Tracking Element Visibility Using GTM

A Step-by-step Guide

Element visibility is a new feature of GTM which can be used to gain a better understanding of your site’s speed performance. Find out how to get started:

 

1. Configure the required built-in variable

Click on the ‘Variables’ tab in the left-had column, and select configure. Scroll to the bottom of the ‘Configure Built-In Variables’ list and tick ‘Percent Visible’ to enable this variable. Close the window to return to the Variables list.

Scroll down to ‘User-Defined Variables’ and click ‘New’.

element-visibility-tracking-step1

2. Configure a new user-defined variable

This variable will record when your element first becomes visible.

element-visibility-tracking-step2

element-visibility-tracking-step3

A) Name the variable.

B) Select ‘Data Layer Variable’ as the variable type.

C) Give it a name – remember that you and your colleagues will need to recognise this later.

D) Select the Data Layer Version which is currently in use.

Save your trigger and navigate to the triggers tab using the menu on the left-hand side.

 

3. Set up the triggers needed to make your element visibility tag fire

element-visibility-tracking-step4

 

A) Select Element Visibility as the trigger type.

B) Choose either ID or CSS Selector as the selection method. This will depend on the attributes of the particular element you will be tracking. If you select ID, the trigger will wait for an element with a specific ID attribute to appear before firing, whereas selecting CSS Selector will cause the trigger to wait for elements matching the CSS selector string which makes it possible to wait for multiple elements.
CSS Selector has been used in this example because the header we were tracking did not have an ID.

C) Enter either your elements ID or CSS Selector according to your choice at B.

D) Choose whether you’d like the trigger to fire once per page, once per element or every time the element is visible.

  • Once Per Page – only fire once on the current page, so if more than one element has been included in the CSS Selector string, the trigger will only fire once when the first of these becomes visible.
  • Once Per Element – the trigger will fire once when a specific ID appears but if multiple CSS selectors have been included, it will fire once every time each of these elements is loaded.
  • Every time an element appears on screen – will fire any time the chosen ID or CSS element(s) is visible. This may be multiple times per session.

E) By default, the Minimum Percent Visible is set to 50% meaning that at least 50% of the element must be visible before the trigger will fire. This can be adjusted according to your measurement needs.

F) Choose whether this particular trigger will fire on all visibility events, or some visibility events. Use ‘Some’ to increase the specificity of you element targeting and create exceptions.

 

4. Create your element visibility tag

element-visibility-tracking-step5

Create a new tag in your current workspace. Set ‘Universal Analytics’ as your tag type, and ‘Event’ as your track type.

Name the category – we used ‘Element Visibility – Hero’.

Use the variable selector to choose the variable ‘Percent Visible’ – this is the built-in variable enabled in step 1. Add ‘% Visible’ after the brackets.
This will ensure the data shows in a meaningful format in GA (written as XX% Visible, rather than just XX).

In the label field, type ‘First Visible After’ and then use the variable selector to choose the custom ‘first visible’ variable created in step 2.

The value field can be left blank.

Ensure that non-interaction is set to TRUE – forgetting to do this will result in significant changes to your site’s bounce rate.

Finally, apply the trigger you created earlier:

trigger-for-visibility-tag

Hit save and start testing in preview mode! Once you’re satisfied, go ahead and publish it. Remember to make notes about the changes made and what it is you’re tracking to help your colleagues out later.

Like what you see? Lets talk. Get In Touch