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 Dimensions	Variant B: Few Events – Zero Custom Dimensions

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)

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. 

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.

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. 

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

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.

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)

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. 

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. 

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. 

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

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.

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.