Element Visibility Triggers and Variables in Google Analytics


Before Google Analytics released element visibility triggers, it was difficult to know when an element had appeared on a page. Now, you can fire a tag when an element appears in a browser’s viewpoint. This allows you to track banner impressions, popups, forms that display messages after submission, and other types of elements. It also means that you’ll gain data that is far more useful than basic scroll tracking.

Configuring Your Trigger

You have many options when configuring a trigger. To start, you decide  whether you want an ID attribute or CSS selector as your selection method. The first is for a single element. The second can be for one or multiple elements, which you can input using a class or as a list of selectors separated by commas.

After this, you’ll need to choose a firing option. You have three choices:

  • Once per page. If there are multiple elements on the page, the trigger will only fire when the first becomes visible. However, if the user reloads the page or navigates to another page, the trigger may fire again.
  • Once per element. In the case you specify an ID selector, once per element usually works the same as the above. For a CSS selector, you should only choose this option if there are multiple elements on the page and you want to the trigger to fire when each becomes visible.
  • Every time an element appears on screen. This causes a trigger to fire whenever a matched element becomes visible. If an element becomes visible multiple times (as a user scrolls down and then back up a page), the trigger will fire each time.

Advanced Options

In addition to the above configuration, you have a few advanced options.

The first of these is minimum percent visible. This allows you to define how much of an element should be visible before the trigger fires. Default is 50 percent.

Your next option is to set a minimum on-screen duration. By checking this box, you can define how long an element must be visible for the trigger to fire. On-screen duration is cumulative, meaning that if the element goes off screen and then returns, the total time is what counts. Only if the user leaves or reloads the page does on-screen duration reset.

Finally, you have the option to observe DOM changes. This requires Google Tag Manager to monitor the status of the elements. In the case that multiple elements on the page are matched, observing DOM changes may impact site performance after a page load. If you want to maintain optimal site performance, it is best to use the ID selection method or make the CSS selector match only a small number of elements.

You should also note that if you have multiple elements on the page with the same ID and the trigger is set to “once per element,” the trigger may fire again if the observed DOM change removes the first matched element.

Built-In Variables

When the element visibility trigger fires, it automatically populates two built-in variables. The first is percent visible. This assigns a value between 0 and 100 to show how much of an element is visible when the trigger fires. The second is on-screen duration. It shows how many milliseconds an element has been visible. Make sure you have these variables enabled by heading to the “Variables” screen.

To capture yet more information, you can configure user-defined auto-event variables.

Ways to Use Element Visibility Triggers

Form Submissions

There are many ways to track form submissions, but all these methods fall short when you’re tracking form submissions that lack a thank-you page. The element visibility trigger solves this problem.

To create a trigger for this purpose, you need to use the ID of the div of the thank-you message element as your ID selector. If there is no ID for the element, enter the class name as the CSS selector. Once the trigger has loaded, you’ll be able to send submission data to Google Analytics by creating a new Universal Analytics tag.

Banner Ad Impressions

With the element visibility trigger, you can track banner impressions without needing to write JavaScript code. You’ll need to find the ID or class of the div that contains the banner. Do this by heading to the banner and clicking “Inspect.”google-analytics-explained-element-visibility-triggers

Once you have configured your trigger, create a Universal Analytics event type tag to send the data to Google Analytics. Then, set the tag to fire on the trigger.

These are just a couple of examples of elements you can track. Use the same method to track any other elements simply by using the ID or class of the div.

If you like my articles,