
December 8, 2022
Scroll tracking with Google Analytics 4 and Google Tag Manager
Updated: December 8th, 2022
Compared to previous versions, Google Analytics 4 offers more built-in tracking capabilities. This includes file downloads, outbound clicks, scroll tracking, and more. But did you know that the built-in scroll tracking in Google Analytics 4 tracks only when someone scrolls below the 90% percent mark of the page height?
What if you want to track other thresholds as well (e.g. 25%, 50%, 75%)?
In this blog post, I wanted to show you how to implement scroll tracking with Google Analytics 4 and Google Tag Manager and customize it based on your needs. There are two possible approaches here, and I’ll explain them both.
Also, I’ll show several examples of the Free Form Exploration reports where you can see your scroll data.
Table of Contents
+ Show table of contents +
Video tutorial about scroll tracking in GA4
Note: GA4 interface has slightly changed since I recorded this video. Debugview is not located at Admin > Debugview.
If you prefer video content, here’s a tutorial from my Youtube channel.
Two Approaches
You have probably heard that Google Analytics 4 has a much more flexible data model than its predecessors. But with great flexibility comes greater responsibility. Thus you have to decide beforehand how you will name and structure your scroll events. There are mainly two approaches:
- One event name scroll with the parameter percent_scrolled (this approach is based on what Enhanced Measurement is tracking)
- Unique event name for every scroll threshold, e.g. scroll_25, scroll_50, scroll_75, scroll_90 (or any other similar taxonomy). In this case, there is no need to have the percent_scrolled parameter because we can already see it in the list of events.
Which one should you choose?
The first approach (event name scroll + percent_scrolled parameter) requires registering a custom dimension (if you want to see it in standard reports or Looker Studio), and you can have up to 50 custom dimensions per GA4 property. If you are close to reaching the limit, this option might not be right for you.
The second approach (unique event name for each scroll threshold, e.g. scroll_25, scroll_50). This solution is a bit more convenient in reports like Path exploration, but if you decide to go with 10 thresholds, it means 10 different event names in the list/report. Will that be convenient for you?
So it’s up to you to decide which option to choose.
- It’s either one event and (optionally) 1 custom dimension
- Or 4 (or more) distinct event names
Now, let’s move to the actual configuration.
Disable automatic scroll tracking in GA4
Since we are going to configure custom scroll tracking with Google Analytics 4, there is no need to keep the native one enabled. We are taking over control!
In Google Analytics, go to Admin > Data Streams > Select your web data stream. Then click the Gear Icon…
…and disable Scroll tracking. Click Save.
Configure a Scroll Trigger
Even though Google Tag Manager has scroll-tracking capabilities, they are disabled by default.
Go to Google Tag Manager > Triggers > New > Scroll Depth and enter the following settings:
If you want, you can change the percentages or apply other tweaks. The configuration you see above is the most common one.
Save the trigger.
Enable Scroll Variable(s)
Even though we need just one scroll variable in this setup, you can enable all of them in the container (there won’t be any significant negative impact on your page performance). Go to Variables > Configure (in the Built-in variables section) and enable all scroll-related variables:
Configure the GA4 event tag
Now, it’s time to configure the GA4 event tag that will send the scroll event. In this part, I presume that you already know some GA4 basics and have installed the GA4 configuration tag in GTM. If you are just starting, take a look at this tutorial.
Once you have the GA4 configuration tag installed in Google Tag Manager, it’s time for you to choose which approach you are going to implement:
- One event scroll with the parameter percent_scrolled?
- Multiple scroll event names (one for each threshold) and no custom scroll-related parameters
Option #1: One scroll event with a parameter
In Google Tag Manager, go to Tags > New > GA4 Event and enter the following settings:
Here, we are following the naming convention of Enhanced Measurement. Every time a visitor passes a certain scroll threshold (that is configured in your scroll trigger), this event tag will fire, and together with the scroll event, you’ll also send the percent_scrolled custom parameter.
If you want to use/see this parameter in standard GA4 reports or Looker studio, you also must go to GA4 Admin > Custom Definitions, click Create Custom Dimension, and enter the following settings:
Save this dimension.
Once you start sending scroll events, you will start seeing them in your reports within 24-48 hours, and you will be able to use/see the Percent Scrolled custom dimension.
Option #2: Multiple event names (one for each scroll threshold)
If you decide to go with this approach, go to Tags > New > GA4 Event and enter the following settings (that’s in Google Tag Manager):
Here, we are using the same Scroll Depth Threshold variable, but this time, it’s inserted in the event name. So if a visitor scrolls past the 25% threshold, the event’s name will be scroll_25. If it’s 50% — scroll_50, etc.
In this case, you don’t need to create any custom dimensions.
Test Everything and Publish
Now, let’s test everything. In Google Tag Manager, click the Preview button in the top-right corner. Then enter the URL of your website where you will test the scroll tracking and click Start.
After you are redirected to your website, scroll down (at least below the 50% threshold).
Then go back to the Preview mode (make sure you are checking your current container).
And you should see at least two Scroll Depth events in the preview mode. Click any of them and check if your GA4 event tag is fired. Then check another one:
You can also click on a tag, then switch to Values, and see what kind of data was sent to Google Analytics.
And now, we have to check whether GA4 actually received the data. In Google Analytics, go to DebugView (it’s located at Admin > Debugview). If there is more than one device, you’ll have to find yours (in the top-left corner of the DebugView).
How can you know which one is yours? Well, one of them should be sending scroll events. Maybe that will help to distinguish.
If everything is configured correctly, you should start seeing either scroll or scroll_xx events. You can click them and check what other parameters were sent with it.
In the screenshot below, you will see what the event should look like by following the first approach.
If everything is good, go to Google Tag Manager, click SUBMIT in the top-right corner, and then PUBLISH.
Scroll tracking reports in Google Analytics 4
Once you start tracking scroll in Google Analytics 4, you will need to wait for up to 24-48 hours to see the data in regular reports.
You will see the new scroll event(s) in Reports > Engagement > Events list (on the left sidebar).
If you click that event, you will see several additional charts about it.
If you want to see scroll data on a particular page of your website, you can go to Explore > Free Form report and do some additional configuration.
Configuration #1a: If you use one scroll event name + you want to analyze scrolling on one page
In the Variables column of Exploration, click the plus icon next to Dimensions.
- Find and add the Percent Scrolled dimension (remember: you might need up to 24 hours to start seeing that dimension in the list).
- Also, add the Page Path dimension
Then in the Tab Settings column, add the Percent Scrolled dimension in the Rows section.
Leave nothing in the Columns section.
In the Values section, add Active Users and Event Count.
In the Filters section, add two filters:
- The event name exactly matches scroll
- And if you want to narrow down to a particular page, you can enter another filter with Page Path contains xxxxx (for example, /pages/contact-us/). Remember, Page Path does not contain a domain. You can see the examples of Page Paths in your GA4 > Engagement > Pages and Screens (and then switch to the Page Path and Screen Class above the table).
Then the report might look something like this:
In this report, you can see how many people on a particular page reached certain scroll thresholds.
Configuration #1b: If you use one scroll event name + analyze multiple pages
This is an alternative variation of the previous configuration. In #1a example, we narrowed it down just to a single page. In this example, we will see multiple pages in the same table.
In the Variables column of Exploration, click the plus icon next to Dimensions.
- Find and add the Percent Scrolled dimension (this is a built-in GA4 dimension).
- Also, add the Page Path dimension
Then in the Tab Settings column, add the Page Path dimension in the Rows section. Select to show 25 rows (or even more).
Add Percent Scrolled dimension in the Columns section
In the Values section, add Event Count.
In the Filters section, add the following filters:
- Event name exactly matches scroll
- Percent Scrolled does not exactly match (not set) (if this is bothering you and there aren’t many events that meet this criterion. Otherwise, you should identify and fix the “not set” problem.).
Then the report might look something like this:
As of the moment of recording this video, it looks like you can sort data only by the Totals column. Hopefully, that will change in the future.
Configuration #2a: If you use multiple scroll event names + analyze one page
If you decided to go with distinct events for each scroll threshold (e.g. scroll_25, scroll_50, etc.), then here’s a sample report that you could create for a particular page.
In the Variables column of Exploration, click the plus icon next to Dimensions. Find and add the Page Path dimension and Apply it.
Then in the Tab Settings column, add the Event Name dimension in the Rows section.
Leave nothing in the Columns section.
In the Values section, add Active Users and Event Count.
In the Filters section, add the following filters:
- The event name contains scroll (if your event names are scroll_25, scroll_50, etc.). That way, we will match all scroll events regardless of the full event name.
- And if you want to narrow down to a particular page, you can enter another filter with Page Path contains xxxxx (for example, /pages/contact-us/). Remember, Page Path does not contain a domain. You can see the examples of Page Paths in your GA4 > Engagement > Pages and Screens (and then switch to the Page Path and Screen Class above the table). See configuration #1a in this blog post for more details.
Then the report might look something like this:
Here we see how many users have scrolled past 25%, 50%, and other thresholds on a particular page of the website.
Configuration #2b: If you use multiple scroll event names + analyze multiple pages
This is an alternative variation of the previous configuration. In the #2a example, we narrowed it down just to a single page. In this example, we will see multiple pages in the same table.
In the Variables column of Exploration, click the plus icon next to Dimensions. Find and add the Page Path dimension and Apply it.
Then in the Tab Settings column, add the Page Path dimension in the Rows section. Select to show 25 rows (or even more).
Add the Event name dimension in the Columns section
In the Values section, add Event Count.
In the Filters section, add the following filter: Event name contains scroll.
Then the report might look something like this:
Here you can see your “most scrolled” pages and how the drop-off changes on each threshold.
Scroll Tracking with Google Analytics 4: Final words
And that’s the end of yet another Google Analytics 4 blog post here on Analytics Mania. There are mainly two approaches you can choose from if you decide to customize scroll tracking:
- Track a single event with an additional parameter for scroll thresholds
- Or not use any parameters but include the threshold in the event name instead
In the beginning, I was using the “single event name” approach, but over time, the 2nd approach became more and more appealing.
If you are just starting with GA4 in general and it looks confusing, download my free GA4 ebook below.
20 COMMENTS
Thanks! Please more tutorials for google analytics 4.
Hey Julius,
Pablo here, new to GTM. (:
I have found an interesting thing:
When then page is reloaded and its position is not at the top, it still triggers the vars, when in reality I have not scrolled.
I read an article by Simoa on how to fix that with U GA:
function() {
return {{Scroll Depth Threshold}} === 25;
}
However, how am I able to fix it with GA4?
Thank you very much!
Thr solution does. Not care whether this is GA4 or UA. It will work anyways. Just insert variables in GA4 event tag
Hey Julius,
Also, a page view event is being fired w/ every scrol event.
Are you able to help?
Thanks,
Pablo
That is because you added scroll trigger to a config tag. Don't do that. Use event tag for that. Carefully read the guide once again. Everything is explained there.
If you need additional support, you can enroll in the course here analyticsmania.com/courses/google-tag-manager-course-for-beginners
Hi, great blog. I am actually having an issue setting up a GA Universal tag on GTM. GTM requires the tracking ID in a format of UA-XXXX, while my Analytics account only contains the ID in format G-XXX.
I'm stuck and have no idea how to move forward?
Hi, Google "how to create universal analytics property"
Hey Julius,
Thanks for the amazing guide!!! One strange thing for me is that I don't have Page Path as a dimension in the analytics hub (but do have Page Title and Screen). Would you know why this can be?
Thanks,
Martin
Hi Julius,
this is really great information, thank you!
Other than the limit on the number of dimensions, are there any other pros and cons for each approach? Reporting limits for example?
I don't expect to max out on dimensions or events so I'm trying to understand if there's a preferred approach I should pursue.
Hi Julius,
Wonderful article and clearly explained.
For me 'Percent Scrolled dimension' and page path dimension is showing as 'page path + query' in the dimension tab.
How to resolve this?
Hello,
EVENT under Custom Dimensions is no longer available in GA or GA4, I consulted with Google and they said that is no longer available. So, how can I track this after creating all the excellent tags in GTM?
I hit a dead end now.
Hey Julius, I am glad I have found this website. Thanks.
I have been trying to come up with a solution to differentiate scroll tags on my pages because of my comments. Basically, I set 80% for full post scroll. However, when I have many comments, full post scroll would actually be 50%, but others page it will roughly be at 80%. Is there another calculation to resolve that?
Thanks
Hi Tiago,
You could try an impression event for an element on the bottom of the page. That way, no matter how many comments get added on, it will always be in the same spot. Use the element visibility trigger in GTM and set it to only fire on a specific element at the bottom of the content portion of the page.
Thanks Julius! This is very helpful. I think I'm going to go with the second approach for simplicity in the event reports. In UA, I used to add a 0% threshold, which made it really easy to visualize the different thresholds out of the whole number of pageviews and to show the dropoff at each threshold. But I'm not sure if I'll do this in GA4.
Hello Julius,
Thanks for the blog !
I have a question : If an user scroll after the 50% of the page, does it counts like scroll_25 and scroll_50 or only scroll_50 ?
scroll_25 and scroll_50
Hi Julius,
do you only need to create a custom dimension in GA if you use the GTM-field "Parameter name" or also if you leave it blank?
Can you update this, or write an updated canonical article?
It is up-to-date. What do you think needs an update?
Hi Julius,
can you please tell us how can we implement section-wise scroll percentage for the webpages ?