In this section, we talk about the tracking of page access depth. Now there is a Scroll Depth trigger in Google Tag Manager. It is very convenient to use this tracking. Before this, we need a piece of js code to do tracking.
It’s really much more convenient now.
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:
Setup Process
1、Open built-in variables
Click on Workspace> Variables> Configure in Google Tag Manager and tick all Scrolling:
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.
All of these will be used in Tags.
2、Set Trigger
Create a trigger and select Scroll Depth type:
Named Scroll Depth Test:
There are two types of Both scroll depths are available, 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.
Checking will pop up new settings, such as:
Both scroll depths are available, 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.
The “Enable this trigger on” menu specifies when this trigger should start to listen for relevant interactions,Window Load (gtm.load) is the default option.
- 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 is used to qualify specific pages.
Here we only track the Step-by-step deployment of Adobe Analytics with Adobe Launch page because this page is very long. The complete setup is:
3、Set Tags
Create an event tracking tag with the following settings:
Save!
4、Preview
Click Preview in the upper right corner, and then enter the test state to simulate the operation.
See, Scroll Depth is triggered, we are looking at the real-time report in Google Analytics:
Data was also received.