Table of Contents

Element Visibility can track the display ratio and display market of specific content on the page, and trigger as long as it is satisfied.

Suppose we want to track the user pull down the page to show the Tag Cloud this time, and use Element Visibility to track.

Let’s take a look at some setup procedures and learn how to use the Element Visibility trigger.

Setup Process:

1、Open built-in variables

In Google Tag Manager, click Workspace> Variable> Configure, then all Visibility:

There are only two built-in variables:

Percent Visible: A numeric value (0-100) indicating how much of the selected element is visible when the trigger fires.
On-Screen Duration: A numeric value indicating how many milliseconds the selected element has to be visible before the trigger fires.

Will be used in later tags.

2、Set Trigger

Create a Trigger and select Element Visibility:

Named Element Visibility Test：

Selection Method is to locate a specific location, you can use the ID attribute or CSS selector:

ID: Selects a single element based on the value of an element’s ID attribute.
CSS Selector: Selects one or more elements based on a specified CSS selector pattern.

There are three types of frequency-controlled movements:

Once per page: The trigger will only fire once per page. If multiple elements on a given page are matched by the ID or CSS selector, the trigger will only fire the first time one of them is visible on that page. If the user reloads the page or navigates to a new page, the trigger will reset and may fire again based on the selected element’s visibility.
Once per element: The trigger will only fire once per selected element per page. If multiple elements on a given page are matched by a CSS Selector, this trigger will fire the first time each one of them is visible on that page. If multiple elements on a page have the same ID, only the first matched element will fire this trigger. However, if you have the Observe DOM changes option enabled in Advanced settings and there are multiple elements on the page with the same ID, this option may cause the trigger to fire again if an observed DOM change removes the first matched element. If the user reloads the page or navigates to a new page, the trigger will reset and may fire again based on the selected element’s visibility.
Every time an element appears on-screen: The trigger will fire every time a matched element becomes visible, either programmatically or through user interaction.

A brief summary is that there are three types: a page is triggered only once, and only one element is triggered, as long as the elements are satisfied.

There are three Advanced options:

Minimum Percent Visible: What percentage is triggered when it is displayed. By default, elements must be at least 50% on screen to trigger an event. Here you may specify a different percentage value that the selected element must be visible on screen before the trigger fires.
Set minimum on-screen duration: How long does the display trigger? Check this box to specify how long a selected element must be visible on screen (at the specified minimum percent visible) before the trigger fires. By default, this option is not enabled, and the trigger will fire as soon as a selected element becomes visible.
Note: The on-screen duration of a selected element is cumulative per page view. In other words, if an element is visible for 5,000 milliseconds, goes out of view, and then comes back into view for another 5,000 milliseconds, the total on-screen duration will be 10,000 milliseconds. If the user reloads the page or navigates to a new page, the trigger (and on-screen duration) will reset.
Observe DOM changes: Check this box to enable the trigger to track matched elements that appear as the DOM changes.

We use CSS to locate here, and then the displayed ratio is 80% before triggering. The complete configuration is as follows: