Set up Advanced Scroll Depth Tracking in Google Analytics 4

Google Analytics 4 has many great features that Universal Analytics doesn’t have. One of them is Enhanced Measurement, which allows you to track some events automatically, including page views, file downloads, scroll depth and others. 

Although GA4 automatically tracks scroll depth, the main disadvantage is that it tracks only 90% of the vertical scroll. When you want to understand the visitors’ behaviour on your website, you usually need to have a few more options – 20%, 50%, or 70% scroll depth. This article will introduce two ways to set up advanced scroll depth tracking in GA4 using Google Tag Manager. However, first of all, what Scroll Depth Tracking is? 

What are scroll tracking events in Google Analytics 4?

Scroll Depth tracking helps you understand how much percentage of your page was scrolled by website visitors. Although you can track two scroll variants: vertical and horizontal, most websites use only one – vertical.  

For instance, your website homepage can have a section with testimonials, and you want to understand the influence of this section on conversions. You can use scroll depth tracking to know how many percentages of all page visitors saw reviews and how many of them converted. When you know the conversion rate of users who saw reviews, you can compare it to the average conversion rate of users who didn’t see the reviews section. Of course, correlation doesn’t mean causation.

Now that we understand how vital scroll depth tracking is for your business. Let’s make our GA4 scroll depth tracking measure other scroll values too. 

How to improve the standard GA4 scroll event to track other scroll values too?

There are two ways to advance GA4 scroll depth tracking:

1. One Event – Zero Custom Dimensions. (updated on Dec 24th, 2022)

2. Few Events – Zero Custom Dimensions.

Two of them have their cons and pros. I use the first one and usually recommend the first one to my clients. You can always change the first one to the second one using the GA4 interface without any changes in GTM or your website code ( GA4 -> Configure -> Event -> Create Event). 

Variant A: One Event – Zero Custom DimensionsVariant B: Few Events – Zero Custom Dimensions
showing-results-of-variant-ashowing-results-of-variant-b

The first one is based on using the default “scroll” event that Google Analytics 4 has. It means you don’t need to send additional events in GA4. You also don’t need to create a custom dimension in GA4 because Google released the dimension “Percent scrolled” in November/December 2022. Therefore, you can use it for all your analysis in GA4, including GA4 Exploration.

In some cases, for instance, the GA4 Path Explore report, you can prefer the second one, which allows you to avoid using a custom dimension in GA4. However, for every scroll value, you want to track, you will need to set up a unique event. It means that if you want to track 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90%, 100% scroll values, you will need to set up 10 events. The first solution gives you to do it with one event and has a better structure, in my opinion.

When we emphasised the advantages and disadvantages of the two solutions and you, most likely, selected your favourite one, let’s implement them through Google Tag Manager. 

Variant A: One Event – Zero Custom Dimensions

Step #1: The first thing that we need to do is to go to GA4 and turn off the “scroll” event in Enhanced Measurement.  ( GA4 -> Admin -> Data Streams -> Web Stream Details -> Enhanced Measurement)

Turning-off-GA4-Scroll-Event
Variant A: Turn off GA4 Scrolls Event in Enhanced Measurement

Step #2: Open GTM and create a scroll depth trigger.

a) Open GTM and open the “Triggers” tab. Click on the “New” button at the top right corner. 

b) Name the trigger. For instance, “Scroll Depth”. 

c) Select the trigger type – Scroll Depth.

d) Select “Vertical Scroll Depth” and provide the scroll percentages you want to measure. For instance, “10,25,50,75,90” to track 10%, 25%, 50%, 75%, 90% scroll. 

e) Save the trigger. 

Scroll-Depth-GTM-Trigger-for-GA4
Variant A: Check Your Scroll Depth Trigger

Step #3: Create a GTM tag for Scroll Depth. 

  1. Now open “Tag” tab. Click on the “New” button at the top right corner.
  2. Name the tag. For instance, “GA4 – Event – Scroll Depth”
  3. Select your GA4 Configuration Tag. (If you don’t have it, read my article) 
  4. Write “scroll” in the event name field.
  5. Add the event parameter “percent_scrolled” and select “Scroll Depth Threshold” as the parameter value.  If you don’t see “Scroll Depth Threshold” in variables, you should activate it in “Variables” tab in GTM. 
  6. Click on “Save” to save the tag.
Showing-GTM-with-GA4-Scroll-Depth
Variant A: Check your GA4 Scroll Tag in GTM

Step #4: Debug the tag in GTM Preview and in GA4 Realtime Report

The next thing you need to do is to preview your tag in GTM and check if you receive the events in GA4. 

Click on “Preview” button at the top right corner and provide the url of your website. GTM will redirect you to your website and start a preview mode automatically. After that, scroll the page and check “Tag Assistant” tab if you see scroll depth triggers and if the tag is triggered successfully. 

Showing-how-to-check-ga4-event-in-gtm-preview-mode
Variant A: Check your Scroll Event in GTM Preview Mode

If everything is ok in GTM, go to GA4 and open Realtime Report and check if you see “scroll” event with “percent_scrolled” parameter. 

GA4-RealTime-Report-Check
Variant A: Check your Scroll Event in GA4 Realtime Report

Step #5: Publish the GTM container

The last step is to publish the GTM container. Open GTM. Click on the “Submit” button at the top right corner and write comments. After the container is published, GA4 will start to track all your new users’ scroll activity.

Publishing-gtm-container

Variant B: Few Events – Zero Custom Dimensions

Step #1: The first thing that we need to do is to go to GA4 and turn off the “scroll” event in Enhanced Measurement.  ( GA4 -> Admin -> Data Streams -> Web Stream Details -> Enhanced Measurement)

Turning-off-GA4-Scroll-Event
Variant B: Turn off GA4 Scrolls Event in Enhanced Measurement

Step #2: Open GTM and create a scroll depth trigger.

a) Open GTM and open the “Triggers” tab. Click on the “New” button at the top right corner. 

b) Name the trigger. For instance, “Scroll Depth Variant B”. 

c) Select the trigger type – Scroll Depth.

d) Select “Vertical Scroll Depth” and provide the scroll percentages you want to measure. For instance, “10,25,50,75,90” to track 10%, 25%, 50%, 75%, 90% scroll. 

e) Save the trigger. 

Scroll Depth Trigger Variant B
Variant B: Check your GA4 Scroll Tag in GTM

Step #3: Create a GTM tag for Scroll Depth. 

  1. Now open “Tag” tab. Click on the “New” button at the top right corner.
  2. Name the tag. For instance, “GA4 – Event – Scroll Depth”
  3. Select your GA4 Configuration Tag. (If you don’t have it, read my article) 
  4. Write “scroll_{{Scroll Depth Threshold}}” in the event name field. If you don’t see “Scroll Depth Threshold” in variables, you should activate it in the “Variables” tab in GTM. 
  5. Click on “Save” to save the tag.

Now GTM tag will send GA4 events for every scroll value you set up in the scroll trigger. 

Variant B: Check your GA4 Scroll Tag in GTM

For instance, if you want to measure 30, 60 and 90% scroll. You will get the following events in GA4:

  1. scroll_30
  2. scroll_60
  3. scroll_90

Step #4: Debug the tag in GTM Preview and in GA4 Realtime Report

The next thing you need to do is to preview your tag in GTM and check if you receive the events in GA4. 

Click on “Preview” button at the top right corner and provide the url of your website. GTM will redirect you to your website and start a preview mode automatically. After that, scroll the page and check “Tag Assistant” tab if you see scroll depth triggers and if the tag is triggered successfully. 

Variant B: Check your Scroll Event in GTM Preview Mode

If everything is ok in GTM, go to GA4 and open Realtime Report and check if you see scroll events.

Variant B: Check your Scroll Event in GA4 Realtime Report

Step #5: Publish the GTM container changes

The last step is to publish the GTM container. Open GTM. Click on the “Submit” button at the top right corner and write annotations. After the container is published, GA4 will start to track all your new users’ scroll activity.

Publishing-gtm-container
Variant B: Publish GTM container

Final Word

Although GA4 provides scroll depth tracking via Enhanced Measurements, it allows you to track only 90% scroll. This is not sufficient if you want to properly understand the impact of some website elements on conversion rate or the percentage of the content your blog visitors read. In this article, I provided a guide on advancing GA4 scroll depth tracking to measure all scroll values you need. If you find this blog useful, don’t hesitate to read my other blogs or write a comment below. 


What are scroll tracking events in Google Analytics 4?

Scroll Depth tracking helps you understand how much percentage of your page was scrolled by website visitors. Although you can track two scroll variants: vertical and horizontal, most websites use only one – vertical.  

Does GA4 track scroll tracking events by default?

Yes. Although GA automatically tracks Scroll Depth, the main disadvantage is that it tracks only 90% of the vertical scroll.

How to improve the standard GA4 scroll event to track other scroll values too? 

There are two ways to advance basic GA4 scroll depth tracking:
1. One Event – Zero Custom Dimensions. 
2. Few Events – Zero Custom Dimensions.
You can read this guide on how to set up advanced GA4 scroll depth tracking via Google Tag Manager. 

5 Replies to “Set up Advanced Scroll Depth Tracking in Google Analytics 4”

  1. Hi, is it possible to set the ScrollDepth so that the Tag fires only when the user scrolls to the final percentage of the page?
    The user scrolls to 60% of the page and ends there. Then he leaves the page, clicks on another article, etc. But I don’t want the Tag to be triggered at each scrolled percentage, but only when the last percentage is reached. Instead of 4x fired Tag (20% 30% 40% 50%) only one 60% Tag is fired.
    Thank you

    1. Hi Matus,

      Thank you for the question.

      Doing what you are asking is possible, but it requires some javascript knowledge.
      You should leverage “onbeforeunload” javascript event and “useBeacon” for Google Tag Manager to fire the event with the necessary variables before a user leaves the page.
      You can read about the solution here.

      Best regards,
      Ihar

  2. Hi! I followed your steps, but it’s asking for a Measurement ID (before asking the event name). What should I do there? Everything I tried was not accepted.

    Thank you so much! 🙂

    Wilma

    1. Hey Wilma,

      You can find the measurement id in GA4 -> Admin -> Data collection and modifications -> Your Data Stream -> “MEASUREMENT ID” section.

      Please let me know if you have any other questions.
      Ihar

Leave a comment

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