Track Page Visit Depth Using the Scroll Depth in GTM

Table of Contents

Update time: January 15, 2025

This article introduces the scroll depth trigger in Google Tag Manager.

Scroll Depth is very necessary to track long pages. For example, our page Step-by-step deployment of Adobe Analytics with Adobe Launch is very long. We want to know the depth of access of different people, so we need to use Scroll Depth to track.

Let ’s take a look at the setting process:

Step 1 : Enable Built-In Variables

Google Tag Manager has built-in built-in variables for scroll depth. It needs to be enabled before it can be used. If you have already enabled it, please ignore this step.

In GTM , click「Variables」——「Configure」，Check these Built-In Variables of click：

There are three built-in variables:

Scroll Depth Threshold: Accesses the gtm.scrollThreshold key in the dataLayer, which is set by Scroll Depth triggers. This will be a numeric value that indicates 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 that represents the number of pixels specified as the threshold.
Scroll Depth Units: Accesses the gtm.scrollUnits key in the dataLayer, which is set by Scroll Depth triggers. This will be either ‘pixels’ or ‘percent’, that indicates the unit specified for the threshold that caused the trigger to fire.
Scroll Direction: Accesses the gtm.scrollDirection key in the dataLayer, which is set by Scroll Depth triggers. This will be either ‘vertical’ or ‘horizontal’, that indicates the direction of the threshold that caused the trigger to fire.

Step 2 : Set Up the Trigger

In GTM，click「Triggers」——「New」——「Choose a trigger type to begin set-up」——「Scroll Depth」，name it “Scroll Depth- Specific Page”, and make the following settings:

There are two types of Both scroll depths are available, options:

Vertical Scroll Depths：Fires based on how far the user scrolls down the page. There are two types, percentage-based and pixel-based
- Percentages：Simply enter numbers separated by commas, such as 10, 50, 90 to set trigger points at 10%, 50%, and 90% of the page height.
- Pixels：Directly enter pixel height
Horizontal Scroll Depths fire based on how far to the right a user has scrolled the page.

Enable this trigger on：Indicates when to start monitoring，generally, no modification is required, the default is fine.
- 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.

This trigger fires on：Set the trigger scope. If the trigger is limited to a specific page, make the settings. If you want to do scroll tracking for the entire site, do not make any settings here.

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.

Step 3 : Set Up the Tags

In GTM , click「Tags」——「New」——「Choose a tag type to begin set-up」——「Google Analytics: GA4 Event」，named “GA4-Event-Scroll Depth”， and make the following settings:

The event name is Specific Page—{{Scroll Depth Threshold}}, where Scroll Depth Threshold is Percentages, If it is triggered by 25%, the event name is Specific Page—25.

aka: You can also set Scroll Depth Threshold as event parameters and distinguish by event parameters.