Track element visibility with Google Tag Manager

In my last article, I mentioned that I always disable scroll events when setting up Google Analytics. I consider scrolls ambiguous due to their inconsistent nature. The element’s visibility is totally a different story. Not only are you able to track scrolls to a certain element, but you can also granularly control the visibility and appearance conditions.

How the element visibility trigger works

Contrary to the scroll trigger, the element visibility trigger tracks what is actually visible in the viewport. That is an actual view, meaning a certain element becomes visible or viewable in the user’s viewport.

What is a viewport? It’s the part of your website that is actually visible in the user’s browser. You can track when a specific element or elements become visible and fire a tag.

Use cases for the element visibility trigger

From my personal experience, I can list three main scenarios when the element visibility trigger comes in handy:

1. To track form views as a preliminary event before the form submission
2. To track form submission events (based on a thank-you message)
3. To track internal promotions

Track form views

Let’s imagine we have a landing page with a form in the bottom section.

The main goal and purpose of driving traffic to that page would be to get form submissions. This is our macro goal. When we have a low conversion volume (a typical scenario in B2B and niches with insignificant search volume), we don’t have enough data to utilize smart bidding and use bid strategies like Maximize Conversions or Target CPA.

To mitigate that, we can use form view tracking. Obviously, if the form is at the bottom, seeing the form is the first step. Otherwise, a visitor cannot submit it and cannot become a lead. In such a case, a form view event is our micro-conversion, a preliminary action before our macro conversion.

Not every form view will result in a form submission, but every form submission will be preceded by a form view.

Tracking form views helps us to:

• Evaluate how relevant the traffic is by understanding the share of visitors who were engaged enough to scroll to the form section.
• Utilize smart bidding in Google Ads by feeding the algorithm with more data, so it optimizes our campaigns to get more form views when form submission volume is low.

And you can do this not only with forms. For example, every blog post on my website has an author section at the end. By tracking each time that section was viewed, I know how often people at least scroll through the article. Why not use scroll tracking? It will never give consistent results because the page length is always different based on the content length and device screen.

Track form submits

Another application of the element visibility trigger is to track form submissions. Typically, after a form is submitted, the user is redirected to a thank-you page. However, not all forms are set up this way. In some cases, the user gets a notification such as “Message sent.” By tracking the visibility of this notification, we can track form submissions.

I still consider this approach as more of a workaround; a JavaScript listener is a more precise method. But hey, the notification view is the only option, and it works quite well.

Track internal promotions

Using the element visibility trigger, you can track when a certain promotional banner or even a slider item becomes visible. In conjunction with Google Tag Manager variables, you can create dynamic internal promotion tracking setups, allowing you to precisely measure the impact of your internal promotions.

How to set up an element visibility trigger

I will explain the setup process using a live example from my own website. On the Google Tag Manager consulting page, I have a form located at the end of the page. So in order for a person to submit the form, they should see it first. Here is how we set it up:

1. Identify the HTML element.
2. Create the element visibility trigger.
3. Set up the tag to send the event data to Google Analytics.
4. Check the results in the preview mode and Google Analytics.

1. Identify the element

First, we need to find the element in the source code and make sure it has a distinguishable ID or class. In my example, you can see that the div containing the form has the ID form, which I have added manually. By hovering over an element in the DOM tree, you can see how Chrome highlights the element, which is useful for understanding where it starts and ends.

2. Create a trigger

In Google Tag Manager, go to the Triggers section → click New → click Trigger Configuration → select Element Visibility (under the User Engagement section). Here is how the standard element visibility trigger configuration looks (I only added the element ID):

Now let’s cover each setting individually.

Selection method

The selection method allows you to use either an ID or a CSS selector. As a matter of fact, an ID is also a CSS selector, so both of these work:

The ID method is preferable when tracking a single unique element on a page. It’s fine if the element appears on other pages, but it should occur only once per page. If multiple elements share the same ID on a page, only the first one that becomes visible will be tracked.

The CSS selector method, on the other hand, gives more freedom and flexibility. You can be very precise with your selectors and even track multiple elements, including several IDs, by separating them with commas. For example, if you have two forms on a page, you can use the CSS selector method with the following input: #form-popup, #form-bottom.

The drawback of the CSS selector method is that it should be worse from the performance standpoint, requires a bit more knowledge, and is not as explicit. Whenever the element has an ID, I always use the ID method.

When to fire this trigger

This setting controls how many times the trigger might get fired. You will probably choose among the first two. Here is the context:

• If you are tracking a single element, then leave it at the default value, which is Once per page.
• If you are tracking multiple elements and you want all of the impressions to be reported, then select Once per element.

Minimum percent visible

This setting should be quite self-explanatory. Here you select how much of your element should be visible for this trigger to be activated. Don’t be greedy and check your mobile website version.

You can use the browser’s dev tools to simulate how the page looks on a certain device. For example, my form will never fit in a mobile device screen, so setting it to 100% will result in zero trigger activations on phones.

Set minimum on-screen duration

This is a really interesting setting, allowing you to specify how long the element should be in the viewport before firing the trigger. Note that the duration is counted cumulatively: if you set it to 5 seconds (5,000 milliseconds), and a person views the element for 2 seconds, scrolls away, and then returns to view it for another 3 seconds, only then will the trigger be activated.

Observe DOM changes

This checkbox is useful when you want to track the visibility of an element that isn’t viewable by default. Two examples:

1. The element is hidden, such as a pop-up form that appears after a button is clicked.
2. The element doesn’t exist on the page initially but is added dynamically with JavaScript.

If your element is static, you don’t need this setting to be enabled, as it is redundant and will affect the website’s performance, especially when you are selecting a large number of elements.

3. Set up a tag

Now, with the element visibility trigger created, we can set up a Google Analytics event tag to send the element view event:

4. Check the results

Now let’s go to Google Tag Manager preview mode and scroll to the element so we can see it and check if the trigger works. If all is done correctly, you should see Element Visibility in the event timeline (#6 in the list in the screenshot):

At this stage, it’s useful to simulate a mobile device in your browser to ensure you are getting consistent results, and the minimum percent visible setting is not too low.

After some time, you should see the event in Google Analytics and other platforms to which you are sending the element view data:

Wrap-up

The element visibility trigger is one of the most precise ways to track meaningful user interactions on a website. Unlike scroll tracking, it gives you cleaner data and allows you to measure engagement more reliably.

Although the trigger configuration isn’t overly difficult, it has its own peculiarities:

• Prefer IDs over CSS selectors for better control and performance.
• Test the trigger on different screens and adjust the minimum percent visible.
• Do not use minimum on-screen duration and DOM changes observation when not required.