Title here
Summary here
Lucas RollinWhy track scroll depth?
Scroll depth is a key indicator for measuring user engagement on your pages. Are they actually reading your content? How deep do they dive into your content?
Quick summary
Google Analytics (GA) offers native scroll tracking, but limited to the 90% threshold.
In this guide, I’ll show you how to set up customized scroll tracking using Google Tag Manager (GTM) and GA to track more precise thresholds such as 25%, 50%, 75% or even 90%.
Prerequisites for following this guide
- You have installed a Google Tag Manager container on your site.
- You have a GA property and its corresponding measurement ID.
- You have created at least GA’s Google tag in your GTM container.
Step 1: Disable automatic scroll tracking in GA
By default, Google Analytics Enhanced measurement generates a scroll event at a scroll depth of 90%. As we’ll be using custom thresholds and manually generating our own scroll event we’ll disable automatic scroll tracking.
In your GA property, go to Admin then Data streams.
Open your web data stream and disable the scroll metric.
Then click Save.
Step 2: Enable built-in scroll variables in GTM
In your Google Tag Manager container, go to the Variables section, then click on Configure in the Built-In Variables section.
Enable the variables in the Scrolling section:
- Scroll Depth Threshold
- Scroll Depth Units
- Scroll Direction
Step 3: Create a scroll trigger
In the Triggers section of your GTM container, create a new trigger.
In the User Engagement section, select the Scroll Depth trigger.
Configure the trigger by checking the Vertical Scroll Depths, then the scroll thresholds you wish to track (here 25, 50, 75, 90).
Important
With this configuration, the Scroll Depth trigger will fire on all pages. If you have very short pages, it’s possible that the 4 scroll depths 25, 50, 75, 90 will be triggered at the same time, sending 4 scroll events to Google Analytics as soon as the page is loaded.
This is an undesirable effect that will pollute your data in GA4 later on, so to avoid this we’re going to add a condition to the trigger that will check that the page is long enough to be able to measure scroll.
To find out the page height, we’ll create a Custom Javascript variable with the code below.
function() {
return document.documentElement.scrollHeight;
}
In the Scroll Depth trigger, add a condition and check that the CJS - scrollHeight variable is greater than 3000 (adjust as you wish).
Step 4: Create the GA event tag
In the Tags section, click on New.
Select the Google Analytics event tag.
Next, configure the scroll event by adding the percent_scrolled parameter. This parameter takes the value of the built-in variable {{Scroll Depth Threshold}}.
Then add the previously created trigger to this tag.
Step 5: Test in GTM and GA previews
Before publishing your changes in GTM, it’s important to test that the scroll event is triggered and received correctly in GA.
GTM Preview Mode
Open the preview from your GTM container.
Check that after a scroll on a short page the scroll event is not sent to Google Analytics.
Then test on a long page that the scroll event is sent to GA with the percent_scrolled parameter.
Click on the tag above and check that the percent_scrolled parameter is sent with the correct value (in this example 25).
DebugView GA
In your GA property, go to Admin > DebugView.
Next, check that the scroll events have been received and that the percent_scrolled parameter is available in the DebugView.
Conclusion
Congratulations, you’ve finished configuring the scroll event on custom trigger thresholds (25, 50, 75, 90) and on your site’s long pages (height greater than 3000px).
You’ve also checked that the configuration works correctly in the GTM preview and that events are received in the GA DebugView.
Scroll 0%
