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.

 

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:

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.