The original article was written on May 21, 2019, and it focused on sending data to Google Analytics Universal. However, during the migration of the blog to a new CMS, I decided to update the content to reflect the current version — Google Analytics 4.
Scrolling is one of the primary actions users perform on a website. Tracking this behavior allows you to better understand how visitors interact with content on the page. Although GA4 can, by default, track 90% scroll depth using enhanced measurement events, this is often not enough to properly analyze user interaction. In this article, we’ll dive deeper into the possibilities of tracking scroll activity using GTM.
Basic Scroll Tracking
Tracking scrolling via the built-in GTM trigger is one of the simplest tasks — and you’re about to see that firsthand. You’ll need:
Scroll Trigger Setup
When creating a new trigger, select the Scroll Depth type from the User Engagement category.
Google Tag Manager allows tracking both vertical and horizontal scrolling. Since most websites use only vertical scroll (top to bottom), we’ll focus on that.
Trigger configuration can be divided into three main parts:
- Scroll direction selection. In this section, you can choose the direction and the unit of threshold measurement: percentages or pixels. You can also specify the threshold values. If you want to specify multiple values — separate them with commas.
- Enable this trigger on. This defines when the trigger becomes active — based on page load events: Page View, DOM Ready, or Window Load. This option allows you to select the moment when the page content is fully loaded so that the system can correctly calculate the page length. Most likely, you’ll choose DOM Ready or Window Load. If unsure, use Window Load.
- This trigger fires on. In this block, you can specify any additional conditions as with other triggers. For example, if you want to track scroll only on your homepage, your condition would look like this:
Activating Built-in Scrolling Variables
To activate built-in variables, go to the Variables section and click Configure:
The data collected when a scroll threshold is reached (as defined in your trigger settings) is stored in three built-in variables:
- Scroll Depth Threshold – this variable contains the exact threshold value reached by the user (e.g., 25, 50, 75, 100)
- Scroll Depth Units – stores the measurement unit: percent or pixels
- Scroll Direction – the direction of scroll: vertical or horizontal
Tag to Send Data to Google Analytics 4
Finally, create a GA4 event tag:
- Measurement ID – your GA4 website measurement ID. To find it, go to Admin > Data collection and modification > Data Streams > Web > Your data stream > Measurement ID
- Event Name – use the name
scroll_and select the Scroll Depth Threshold variable to append the reached value
Don’t forget to assign the scroll trigger you created earlier.
Different Scroll Thresholds for Different Pages
Depending on the page type, you might want to track different scroll thresholds. For instance, on your blog homepage, you may want to use thresholds of 25, 50, 75, and 100. But on other pages — 10, 25, 50, 75, 100.
There are two ways to achieve this:
- Create multiple triggers, each with additional firing conditions specifying the pages. For example, for the homepage:
- Use a custom variable of type Lookup Table.
This is the method we’ll explore in detail.
- In the first row, specify the Page Path variable ({{Page Path}}) that you’ll evaluate.
- In the Input column, specify the page path for which you want special scroll thresholds. In the Output, provide the thresholds you want.
- In the final row, specify a default value — this will be used for pages not listed in the above conditions.
Now use the resulting variable in the scroll trigger instead of static threshold values:
If you need more complex page conditions, you can use a variable of type RegEx Table. Its setup is similar to the Lookup Table, but in the Pattern field (equivalent to Input), you can define more complex conditions using regular expressions.
Changing Scroll Thresholds Based on Page Length
Finally, let’s look at a scenario where you need to change scroll thresholds dynamically based on the length of the page. This is especially useful if some of your pages are the height of only one screen. In such cases, GTM may fire all scroll thresholds at once upon viewing the first screen.
To fix this, we’ll use a Custom JavaScript variable with the following code:
function() {
var heightOfPage = Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight);
var heightOfViewport = Math.max(document.documentElement.clientHeight, window.innerHeight);
var ratio = heightOfViewport / heightOfPage;
var fallbackDepths = '101';
var verticalScrollDepths;
if (ratio < 0.2) {
verticalScrollDepths = '20,40,60,80,100';
} else if (ratio < 0.25) {
verticalScrollDepths = '25,50,75,100';
} else if (ratio < 0.5) {
verticalScrollDepths = '50,75,100';
} else if (ratio < 0.75) {
verticalScrollDepths = '75,100';
} else {
verticalScrollDepths = fallbackDepths;
}
return verticalScrollDepths;
}Let’s break down what’s happening here.
This line calculates the height of the page:
var heightOfPage = Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight);Then we calculate the height of the first screen:
var heightOfViewport = Math.max(document.documentElement.clientHeight, window.innerHeight);The ratio variable stores the ratio of viewport height to page height:
var ratio = heightOfViewport / heightOfPage;Later in the code, this ratio is used to determine appropriate scroll thresholds:
var fallbackDepths = '101';This value is used as a “never met” scroll depth threshold — for cases when the page height equals the screen height. Since users will never reach 101% scroll, the trigger won’t fire.
The if block dynamically assigns scroll thresholds based on the ratio. You can modify this logic as needed.
Use the created variable in the Percentages field of the Scroll Depth trigger:
All other event tag settings are the same as in the Basic scroll tracking section.
Instead of Conclusion
Tracking scroll depth is one of the key methods to understand how users engage with content on your page. Choose the method from this article that best fits your needs. If you still have questions about scroll tracking — ask them in the comments.
P.S. Another example of user interaction with content is video viewing. You can learn how to track that through GTM in the next article.
If you enjoyed this content, subscribe to my LinkedIn page.
I also run a LinkedIn newsletter with fresh analytics updates every two weeks — here’s the link to join.
Web Analyst, Marketer