Element Visibility trigger in Google Tag Manager

It seems that Google Tag Manager is on a mission to become the best TMS solution in the market. After the recent introduction of the YouTube video and scroll tracking triggers, GTM now gives us  an element visibility trigger out of the box.

This is invaluable for your web analytics data, and something you should definitely consider when planning your Google Analytics Implementation tasklist. With this feature, you are now able to track all the important elements on your web page without exclusively relying on Scroll or Click tracking. You can use the element visibility trigger as an event in order to measure impressions of your footer banners, call to actions, pop-ups, elements that surface post-load (yes they have a DOM listener out of the box as well) and many more.

Without any further ado, let’s dive into it.

Element visibility Trigger in GTM

First of all few words on what exactly Element visibility trigger in Google Tag Manager is.

Element visibility allows you to track certain elements on your web site based on:

a) minimum percentage of visibility and
b) on screen duration

Let’s assume you have a banner with a call to action at the bottom of your page and want to know if your visitors are exposed to your message. This way you will be able to redefine your CTR percent, as up until today you were able to only do that by counting pageviews.

For this to happen, the particular element needs to appear in the browser’s viewport, ie. your screen. GTM will trigger once the banner at the bottom of your page is visible to the user, otherwise the tag wont fire and the event wont be recorded in Google Analytics. This way you will know how many users actually see the message on the bottom of the page and optimise accordingly.

In addition, the trigger allows you to set up additional rules based on the percentage of visibility (how much the banner was exposed to the screen) as well as the screen duration (for how long was the banner visible in he viewport).

Visibility Variables

Before you start, you need to activate the Visibility variables in GTM. These can be found on the variable list as shown below (You can read all about GTM variables here):

There are two different variables, the percent visible and the on-screen duration.

Percent Visible: Accesses the gtm.visibleRatio key in the dataLayer, which is set by Element Visibility triggers. This will be a numeric value (0-100) indicating how much of the selected element is visible when the trigger fires.

On-Screen Duration: Accesses the gtm.visibleTime key in the dataLayer, which is set by Element Visibility triggers. This will be a numeric value indicating how many milliseconds the selected element has been visible for when the trigger fires.

How to set up your Element Visibility Trigger

Once you have activated the variables, create a new trigger and under User Engagement select “Element visibility“.

This will open the Trigger configuration as show below including the following:

• Selection Method: You can select the element either via ID or CSS selectors
• When to fire this trigger: You can select to fire this trigger once per page, once per element or every time an element appears on screen. Your choice depends exclusively in what you want to measure.
• Minimum Percent Visible: You can add numeric values, such as 0,25,50,75,90,100, in order to define when exactly you want the trigger to fire. In the screenshot below we put 50 meaning that the trigger will fire when the element is visible by 50% in the browser’s viewport.
• Set minimum on-screen duration: You can add the minimum time the percent of the element is visible in the viewport before the trigger fires. In the example below, we put 2000, meaning that the trigger will fire when the element is visible 50% and for at least 2 seconds.
• Observe DOM changes: To track elements that do not exist on the first page load (super useful for dynamic elements/web pages):

Selection Method – CSS Selector & ID

If you don’t know how to use css selectors then I suggest you watch the video below or a bit about it in W3Schools:

CSS Selector

In the meantime the quickest way to use it is by right clicking on the element and copy pasting directly from your console. For example below the element selector we need to use for the highlighted banner is div.how-worth.

Then add the name to the element selector field:

ID

In this case, the trigger will fire if you have an ID attribute in the element you want to track. This is ideal if you have data-attributes implemented or if you want to track one item such as a banner pop up for example.

Google Analytics Event Tag

This should be relatively straight foward. Click create a new tag and from the drop down menu of “Track Type” select “Event. Then on Category add “visibility” or whatever suits you really. On Action add the element name that you want to measure in google analytics and on Label add the {{Percent Visible}}.

You will notice that I have set up the Non-Interaction Hit “True“.

This is not a standard selection you need to make, it literally comes down to what you measure and what you consider to be a bounce.

For example, if you have an one page web site and you consider success something that appears after a user takes an action or if a user subscribes to a popup that appears on your homepage, it makes sense that you set the Non-Interaction Hit to “False“.

Event:”gtm.elementVisibility” contents

Finally, before closing this topic, a few words on the event that fires and the variables that are pushed in the dataLayer.

Each time the element becomes visible, GTM will fire an event called “elementVisibility” (notice below: event:”gtm.elementVisibility) with the following variables:

Here is the information captured:

• gtm.element & gtm.elementClasses: the element name / class that became visible
• gtm.elementId: The “ID” value attached to the element (not in this case as the web site I tested did not have IDs)
• gtm.visibleFirstTime:9032 : How much time the user was on the page before the element became visible in viewport (miliseconds)
• gtm.visibleLastTime:9032 : This will update the last time the element was visible on the page (most recent)
• gtm.visibleRatio:92.2 : The percentage of the element that was visible in the viewport (in this case 92.2%)
• gtm.visibleTime:2000 : That the element was visible for at least two seconds.

I hope this blog has been helpful. If you have any questions, please contact me at @akronsound – my Twitter handle!