• Courses
    • Courses
    • Course bundles
  • Blog
  • Services
  • Resources
    • Youtube channel
    • E-books and Guides
    • GTM Recipes
    • View All Resources
    • GTM Community
    • GA4 community
  • About
    • About
    • Contact
  • Login
  • Courses
    • Courses
    • Course bundles
  • Blog
  • Services
  • Resources
    • Youtube channel
    • E-books and Guides
    • GTM Recipes
    • View All Resources
    • GTM Community
    • GA4 community
  • About
    • About
    • Contact
  • Login

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 +

  • Two Approaches
  • Disable automatic scroll tracking in GA4
  • Configure a Scroll Trigger
  • Enable Scroll Variable(s)
  • Configure the GA4 event tag
    • Option #1: One scroll event with a parameter
    • Option #2: Multiple event names (one for each scroll threshold)
  • Test Everything and Publish
  • Scroll tracking reports in Google Analytics 4
    • #1a: If you use one scroll event name + analyze one page
    • #1b: If you use one scroll event name + analyze multiple pages
    • #2a: If you use multiple scroll event names + analyze one page
    • #2b: If you use multiple scroll event names + analyze multiple pages
  • Final words

 

 

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:

  1. One event name scroll with the parameter percent_scrolled (this approach is based on what Enhanced Measurement is tracking)
  2. 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.

disable scroll tracking in google analytics 4 enhanced measurement

 

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:

scroll trigger in google tag manager

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):

google analytics 4 scroll tracking tag

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.

start google tag manager preview mode

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.

scroll event in google analytics 4 debugview

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:

  1. The event name exactly matches scroll
  2. 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:

  1. Event name exactly matches scroll
  2. 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:

  1. 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.
  2. 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.

 

Julius Fedorovicius
In Google Analytics Tips
20 COMMENTS
Responsywnie
  • Feb 26 2021
  • Reply

Thanks! Please more tutorials for google analytics 4.

Pablo
  • Apr 10 2021
  • Reply

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!

    Julius
    • Apr 10 2021
    • Reply

    Thr solution does. Not care whether this is GA4 or UA. It will work anyways. Just insert variables in GA4 event tag

Pablo
  • Apr 10 2021
  • Reply

Hey Julius,

Also, a page view event is being fired w/ every scrol event.

Are you able to help?

Thanks,
Pablo

    Julius
    • Apr 10 2021
    • Reply

    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

Vaida
  • Apr 21 2021
  • Reply

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?

    Julius
    • Apr 21 2021
    • Reply

    Hi, Google "how to create universal analytics property"

Martin
  • Apr 21 2021
  • Reply

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

Renee
  • Apr 28 2021
  • Reply

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.

Umashankar Natarajan
  • May 3 2021
  • Reply

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?

eduardo cabrera
  • Nov 24 2021
  • Reply

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.

Tiago
  • Aug 15 2022
  • Reply

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

    Nick Pistone
    • Oct 17 2022
    • Reply

    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.

Nick Pistone
  • Oct 17 2022
  • Reply

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.

Azoulay
  • Oct 31 2022
  • Reply

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 ?

    Julius
    • Oct 31 2022
    • Reply

    scroll_25 and scroll_50

Rene
  • Jan 13 2023
  • Reply

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?

Chris
  • Jan 16 2023
  • Reply

Can you update this, or write an updated canonical article?

    Julius Fedorovicius
    • Jan 16 2023
    • Reply

    It is up-to-date. What do you think needs an update?

Chandu Aki
  • Jan 20 2023
  • Reply

Hi Julius,

can you please tell us how can we implement section-wise scroll percentage for the webpages ?

Leave a comment Cancel reply

Your email address will not be published. Required fields are marked *

 

Hi, I'm Julius Fedorovicius and I'm here to help you learn Google Tag Manager and Google Analytics. Join thousands of other digital marketers and digital analysts in this exciting journey. Read more
Analytics Mania
  • Google Tag Manager Courses
  • Google Tag Manager Recipes
  • Google Tag Manager Resources
  • Google Tag Manager Community
  • Login to courses
Follow Analytics Mania
  • Subscribe to newsletter
Recent Posts
  • 3 Ways to Pull Data from Data Layer with Google Tag Manager
  • Cannot See the Google Tag Manager Option in Google Ads Conversion?
  • A Guide to Conversion rate in Google Analytics 4
Analytics Mania - Google Tag Manager and Google Analytics Blog | Privacy Policy
Manage Cookie Settings