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:
- Click Triggers New.
- Click Trigger Configuration and choose the Scroll Depth trigger type.
- Select scroll depth options.
- 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.
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.