How to Track Element Visibility with GTM

When analysing visitor behaviour, it can be incredibly useful to know if a specific piece of content appeared on a user journey. That’s why the element visibility trigger is one of the most versatile tools available in Google Tag Manager.

Whether it’s an image, banner, button, table, error message, or some other content the element visibility trigger offers you the ability identify the number of impressions for an individual element on a web page. It can also be used for many other purposes such as confirming if a user is logged in (e.g. if an account ID is displayed), the type of account (e.g. if different content is shown on a page) or that content has been refreshed without a URL change (e.g. on single page application or form).

The wide variety of ways you can use the element visibility tags means that it can enrich your Google Analytics data, often with no need for development resource. You can then create custom segments to analyse if the element influences key metrics such as conversion rate or revenues.

1. Identify a Useful Element Visibility Asset:

Find an asset that you would be beneficial to track the visibility of and consider how you would use this in your analysis and reporting. For example, I noticed that a client’s website displayed a customer’s name when they logged in. I was able to use a visibility trigger based on this element to identify when users on non-secure pages were logged in or not.

GTM uses two methods to identify the visibility of an element on a web page. It uses either an ID or a CSS selector. It’s not uncommon for website elements not to have IDs and so it’s a good idea to explore the use of CSS selectors in GTM because you can use them to target any element on a website.

CSS selectors come from Cascading Style Sheets (CSS) and are used to determine how HTML elements are displayed on the page. Simo has written a great blog on 10 useful CSS selectors to use in GTM which explains CSS selectors in a lot more detail.

Source: Simo Ahava’s blog

Element IDs are very powerful selectors because they are usually unique to an individual element on the page. That’s why asking developers to include element IDs in new page designs is good practice for improving data integrity. Even if an ID is not unique to an individual element there are strategies which we will discuss later that can be used to target a single element.

2. Create an Element Visibility Trigger:

More than half-way down my homepage I have an image of the 8-step conversion rate optimisation process that I use. I wanted to analyse if users who viewed this image were more likely to make an enquiry.

Use F12 in Chrome or right-click on the element and select ‘Inspect’ to open Google Dev Tools. Here we can see the image has a unique CSS selector of #IMG_12345. We can use this in GTM to set our trigger to fire when this becomes visible.

Go to your GTM container and select Triggers > New > Name: Visibility of CRO 8 Step Process.

Trigger Type: Element Visibility

Selection Method: CSS Selector

Element Selector: #IMG_12345

When to fire: Choose what you think is most appropriate

Minimum Percent Visible: 50 percent

Some Visibility Events

Page Path > Equals > / (use a page path if you wish to target specific pages)

3. Create an Element Visibility Tag:

Now go to Tags > New > Name: GA Event – Visibility of CRO 8 Steps

Tag Type: Google Analytics: Universal Analytics

Track Type: Event

Category: Image Visibility

Action: CRO 8 Steps

Label: {{Page Path}} – Select this from the menu

Non-Interactive Hit: As the user does not interact with the element set this to ‘True’

Google Analytics settings: Choose your GA Settings Variable here

You can now select the trigger you just created and save the tag.

4. Test your Tag Works:

In GTM refresh and select the ‘Preview’ mode. Make sure you also refresh the web page where the element is located. For this tag I gradually scrolled down the page until I came across the CRO 8 step process image. Sure enough the tag only fired when I viewed the correct image.

5. Using Text as the Trigger:

Sometimes you may find multiple elements have identical CSS selectors and so how do you target a single element in this circumstance? Well, on my homepage there are three identical looking green buttons and they all have the same CSS selector (#BUT_12345).

However, the one adjacent to the CRO 8 step process image which I want to track has different text from the other two buttons. The copy reads “Contact Us Now”. With the element visibility trigger we can use this text to target the individual button and ignore the other identical buttons on the page.

Go to Triggers > New > Name: Visibility – Contact Us Now. In addition to setting the CSS Selector as ‘#BUT_12345’ we can use a rule for ‘Some Visibility Events’ based upon the copy text.

Use the ‘Click Text’ variable > Equals > Contact Us Now – to define when we want the trigger to fire.

We can now create a new tag as before and use the new trigger to fire when the correct button click text is visible. Use the same test process as before. I scrolled up and down the page to observe which tags fired. As expected, the new tag did not fire when I viewed the other two green buttons. Only when the ‘Contact Us Now’ button came onto the screen did the tag fire. I also checked this in the Realtime console in Google Analytics before publishing the changes.

Summary:

The element visibility trigger is a powerful and versatile tool in your GTM arsenal. Whether it’s a banner, button, image, error message or content that indicates a user is logged in it can enrich Google Analytics data with relatively little effort in GTM. Keep a look out for useful elements on you site that you can use to create new custom segments to enhance your analytics reporting.