Scroll Depth trigger

Measure scroll events in Google Tag Manager

The scroll depth trigger is used to fire tags based on how far a user has scrolled down a web page. To configure a scroll depth trigger:

  1. Click Triggers and then New.
  2. Click Trigger Configuration and choose the Scroll Depth trigger type.
  3. Select scroll depth options.
  4. Select when the trigger should be enabled.

Scroll depth options

Select the desired Scroll Depth options:

  • Vertical Scroll Depths fire based on how far down a user has scrolled the page.
  • Horizontal Scroll Depths fire based on how far to the right a user has scrolled the page.

Both vertical and horizontal scroll depth values may be used in the same trigger. Set scroll depths as either Percentages of the page height and width, or as Pixels. Enter one or more positive integers separated by commas, representing percentage or pixel values.

For example, select Percentages and enter 10, 50, 90 to set trigger points at 10%, 50%, and 90% of the page height. When this trigger is applied to a tag and a user scrolls 90% of the way towards the bottom of the page, the tag will fire three times: Once at 10%, once at 50%, and once at 90%.

The trigger will only fire once per threshold per page. If the user scrolls back up, the trigger will not fire again unless the page reloads or the user navigates to a new page that uses the same trigger.

For pages that scroll infinitely (dynamically), or pages that vary significantly in size, a better option is to use the element visibility trigger.
If a specified scroll depth is visible in the viewport when the page loads, the trigger will fire even though the user has not physically scrolled the page.

When a scroll depth trigger fires, the following variables are automatically populated:

  • Scroll Depth Threshold: A numeric value indicating the scroll depth that caused the trigger to fire. For percentage thresholds, this will be a numeric value (0-100). For pixels, this will be a numeric value representing the number of pixels specified as the threshold.
  • Scroll Depth Units: Either ‘pixels’ or ‘percent’, indicating the unit specified for the threshold that caused the trigger to fire.
  • Scroll Direction: Either ‘vertical’ or ‘horizontal’, indicating the direction of the threshold that caused the trigger to fire.

Select when the trigger should be enabled

The "Enable this trigger on" menu specifies when this trigger should start to listen for relevant interactions.

  • Container Load (gtm.js): Enable as soon as possible after the page begins to load.
  • DOM Ready (gtm.dom): Enable after the DOM is ready to be parsed.
  • Window Load (gtm.load) (default): Enable after all initial content on the page has loaded.
Note: Because the scroll depth trigger attempts to calculate the dimensions of a page when it is loaded, it is best to wait until the window has fully loaded before this trigger is enabled. This is why Window Load (gtm.load) is the default option.
Was this article helpful?
How can we improve it?