Element Visibility Tracking

Page Scroll Depth tracking with Google Tag Manager is a great tool for determining the interaction visitors have with your content as part of your analytics assessment. You can go a step further with Element Visibility tracking by setting a trigger to fire a tag when a user views a specific section of a page of content. This could be a content section header or infographic as well as how much of it they see and how long they are exposed to it.

We will go through all the steps you will need to take in order to configure your Google Tag Manager account to record element visibility of a specific piece of content on a specific page and show this as an Event in Google Analytics.

Before we begin the configuration steps it is important to understand that in order for Google Tag Manager to be able to identify the content section it will have to contain an identifier in the code.

Google Tag Manager looks for either IDs or CSS Class status and an identifier name. For example the header would need to be within a Div Class to be detected by the trigger. Determine the element you want to be alerted to and make note of the ID/Class identifier as well as the URL of the page.

Code example of element visibility div class

Create an Element Visibility Trigger

You will begin by creating a trigger that will listen for the page visit and exposure of the target section of content that will permit the element visibility tag to fire.

Click on ‘New’ trigger and name it ‘Element View Trigger’ then choose the trigger type ‘Element Visibility’ that you will find under the User Engagement section. The Selection Method will be ‘CSS Selector’ if you have a as the identifier and the ‘Element Selector’ will be the name preceded with a ‘.’ dot character.

Set ‘When to Fire this Trigger’ to ‘Once per page’ and the ‘Minimum Percent Visible’ as 50% and the minimum on-screen duration set to 5000 milliseconds (5-seconds). The trigger should fire on ‘All Visibility Events’ then click ‘Save’.

Element Visibility trigger configurations

Create the Tag

Under the ‘Tag’ section click on ‘New’ tag and name it ‘Element Visibility Tag’, choose the tag type ‘Google Analytics: Universal analytics’ and the track type should be changed to ‘Event’.

The ‘Category’ field should be named ‘Element Visibility’ and the ‘Action’ field set as the name of the content section you are tracking. For the ‘Label’ field click the block + icon and choose {{Page Path}}. The Non-Interaction Hit should be set to ‘True’, so this doesn’t affect your bounce rate statistics. The Google Analytics Settings should be your Google ID then click ‘Save’.

Element Visibility tag configurations

An optional addition to the ‘Action’ field is to record the duration spent looking at that section and also the percentage of visibility you had for that section. This will help if your section is large and you doubt just seeing the header will mean the user has read all the content. To track this you will amend the ‘Action’ field to: (name of section) – {{On-Screen Duration}} – {{Percent Visible}}.

Use Google Tag Manager’s ‘Preview’ function in order to confirm the visibility event is happening and the trigger fires and then go to Google Analytics and the Realtime then Events section to see the event information.

Google Analytics Element Visibility report screen