Element visibility trigger

Google Tag Manager's element visibility trigger fires when a selected element becomes visible in the web browser's viewport. Events that cause an element to become visible include page loads, scrolls, when a browser tab has moved to the foreground, or programmatic routines that affect the position or visibility of the element.

To configure an element visibility trigger:

1. Click Triggers New.
2. Click Trigger Configuration and choose the Element Visibility trigger type.

Use the Selection Method menu to choose whether to select elements using either an ID attribute or a 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.

You will also have these options choose from to determine how frequently a trigger should fire:

• 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.

Advanced options

• Minimum Percent Visible: 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: 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.

When an element visibility trigger fires, the following variables are automatically populated:

• 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.