Element Visibility Trigger in Google Tag ManagerPosted on 06 Jan by

Element Visibility Trigger in Google Tag Manager

More often than not, we would like to track the number of views by a user on a certain web page element or browser area. Usually, for tracking such web page elements we were dependent on paid UX tools such as Hotjar, Usability tools or Woopra. But with the newly introduced trigger called ‘Element Visibility Trigger,’ we can now track visible area of a browser's viewport easily through Google Tag Manager. In short, the element visibility trigger will fire whenever a specific element or group of elements appear in the visible area of the user's screen area.

How to track element visibility events using element visibility trigger in Google Tag Manager

Below steps will guide you to track element visibility on your website using Element Visibility Trigger in GTM :

Step 1 -  Creating and Configuring Element Visibility Trigger in Google Tag Manager

Go to your Google tag manager account and select the trigger section.

Configure Element Visibility Trigger by clicking ‘New Trigger’ and name this trigger as ‘Element Visibility Trigger’ or any other name you find suitable.




Element Visibility Trigger in Google Tag Manager


 Now configure the trigger by selecting ‘Element Visibility’ as the trigger type.




Element Visibility Trigger Type


Element Visibility Trigger provides two methods of selection:

  • ID - Using this method,  you can select a specific element to appear in the user's viewport. E.g. header element, footer element or content element






Element ID Selection Method in Element Visibility Trigger


  •    CSS Selector - Here you can select an element or group of elements to appear in the visible area of user's browser. E.g. .div.header, div.footer, h1.title



CSS Selector Selection Method in Element Visibility Trigger


Let's select Element ID as the selection method and let's assume we need to track the header element of the browser's viewport. Below screenshot shows header id on the website to be tracked.Below screenshot shows header id on the website to be tracked


Header Element ID to be tracked through element visibility trigger




The header ID, in this case, is ‘cmn-hdr.’ Now provide this Id in the element id column

 

In the next step, you can select when to fire this trigger and the ideal options associated with it are:

  • Once per Page - the trigger fires once per page load.
  • Once per Element - the trigger will fire once the specific element (cmn-hdr) appears in the visible area of the users’ viewport
  • Every Time an element appears on the screen - the trigger fires whenever the element appears on the screen.



Firing Rule for Element Visibility Trigger


In an ideal scenario, we would select ‘Once per element’ or ‘Once Per Page’ options to avoid data manipulation. Let's select ‘Once Per Page’ for the purpose of this tutorial

 

Element Visibility Trigger also provides advanced options like : 

  • Minimum Percent Visible - The percentage of the provided element visible to the user before the trigger fires.  E.g. 50 Percent, 70 Percent or 100 Percent.
  • Set Minimum On Screen Duration - The minimum amount of time the element should be visible on the screen before the trigger fires. E.g. 2000 Milliseconds (2 seconds), 5000 Milliseconds (5 seconds)

However, you need to be careful while setting a minimum on screen duration for matching multiple web elements as it can seriously affect your webpage load time. So be careful to match a few web elements while selecting CSS Selector as your element selection method or use Element ID as the selection method instead.




Minimum Percent Visible and Minimum Onscreen Duration Trigger Configuration


In the next configuration step, you will be asked when to fire the trigger.You can either opt for the trigger to fire on all visible events or you can specifically select an event such as ‘click classes matches ‘xyz’ or the page URL contains /landing, etc. 


Trigger Fires on Visible Elements


After Configuring the Trigger, save the trigger.


Save Element Visibility Trigger

 


Step 2 - Creating and Configuring Google Analytics Element Visibility Event Tag



For creating this tag, go to tag section in Google Tag Manager and click ‘New’ Tag  

 

Now name the tag as ‘GA Event - Element Visibility’ or any name you find suitable.

 

After naming the tag, start configuring it by selecting Universal Analytics as the tag type.




Google Analytics Universal Analytics Tag Type


 Select ‘Event’ as the Track Type.


Google Analytics Event Track Type




Now provide the Event Tracking Parameters for this tag to be seen in Google Analytics Reporting Interface.

 

It would be best to use a custom name for the Event category as it would be easier to find the same while generating a report. Eg: ’Home Page Viewport Visibility’ or something similar.

 

The Event Action can be named as ‘View Element’ The event label can be selected as Page Path Variable ({{Page Path}}). Event value can be left blank or you can provide a suitable value.

 

Non Interaction Hit can be provided as ‘False’ if you want to record non-interaction hits.




Event Tracking Parameters

Now select ‘enable overriding settings in this tag’ option and provide your Google Analytics Property Tracking Id (UA- X*******-X)

 


Now select the firing trigger by enabling the configured Element Visibility Trigger and save the tag.


Save Google Analytics Element Visibility Event Tag

 


Step 3 - Preview and Debug the Created Google Analytics Tag

 Preview the created Google Analytics Event Tag by going into preview and debug mode. This can be done by clicking the Preview button on the top right corner of your GTM interface next to submit button.


Element Visibility Event Tag in Preview and Debug Mode in GTM




Now check whether the tag fires when the specific element appears in front of the screen.

If the tag fires then your tag and trigger configurations are working fine if it doesn't then you need to check for errors in the tag and trigger configuration.

Step 4 - Create Version and Publish Changes

If the tag fires successfully then create a new version of Google Tag Manager.


Google Analytics Element Visibility Tag Version Creation


After creating a new version, publish the Visibility Event Tag to make the changes live.


Element Visibility Google Analytics Tag Publishing


Now you can view the triggered events in Google Analytics Reporting Interface.

 

 Step 5 - View Element Visibility Event Report in Google Analytics 

Go to Behaviour Section and select Events Overview, you can view events by category name, Action or Label.


Google Analytics Element Visibility Event Report

 


If you want to see real-time events, you can view it through Real-Time Reporting Section of the Google Analytics Interface.




Google Analytics Element Visibility Event Real Time Reporting

 


Conclusion

Tracking user engagement is an important aspect of website conversion rate optimization. Tracking Views or interaction of a specific web element can provide useful web page insights. With this user engagement data, you can optimize your website to achieve more conversions.  So Element Visibility trigger in Google Tag Manager can be considered as the new revolution in user experience tracking of websites.

 

This resource was published by
06 January 2018
  • Ranjit is a Digital Marketing Specialist at Webdura Technologies . He is Google Analytics, Google Adwords, and Hubspot Certified . He loves digital space and helps businesses increase their returns through digital strategies.

POST YOUR COMMENT

Leave a Reply

Your email address will not be published. Required fields are marked *