How to set up scroll depth tracking in GA4

If you’re familiar with Google Analytics 4 (GA4), you probably already know that it comes with built-in scroll tracking by default.

And of course, you might be wondering: why do I need custom scroll depth tracking?

The GA4’s “built-in scroll event” is raised when a user has scrolled through about 90% of the page – but you’ll most likely want to know more than that, like how many users have scrolled through 50% or even 25% of the page.

Because of this, you need to set up custom scroll depth tracking in GA4.

By tracking scroll depth, you can gain insights into user engagement and behavior, understand how much content users are consuming, and optimize accordingly.

We will check the implementation using Google Tag Manager (GTM).

Overall I would highly recommend using GTM for your GA4 setup versus gtag.js as it has very useful features to use and takes less time maintaining the setup.

At least you can go hybrid and use GTM with datalayer.push method whenever you need more granular control over tracking.

We’ll learn how to set up scroll depth tracking and create a sample dashboard for interacting with content in Looker Studio.

How to set up scroll depth tracking

First, we need to turn off the default scroll tracking Improved measurement Electricity.

Navigate to data stream > Clicks to stream.

Disable scroll tracking in the pop-up dialog box.

Navigate to the GA4 Custom Definitions settings page and add the custom dimension “scroll_percentage” (you can give it any name). We will use this to send scroll depth thresholds.

Navigate to variables in Google Tag Manager and enable these three built-in variables:

• Scroll depth threshold.
• Scroll depth units.
• scroll direction.

Navigate to “Triggers” and add a scroll depth trigger called “Custom Scroll”.

In the “Percentages” settings, add the scroll depth levels you want to track as a comma separated list.

Please note: if you have a high traffic website and add too many thresholds like (21,22,23….90) etc. you might hit the GA4 BigQuery export limits of 1 million daily events and lose one of the largest Advantages of GA4 .

You may find that there are also pixel values ​​that you can use to track scroll depth by pixel.

In some cases it may make sense to use it, but there aren’t any broad use cases in my opinion.

For example, if you’re tracking a scroll depth of 1,000 pixels, you might not be able to tell exactly how much of an article users have read, because article lengths can vary widely, ranging from 2,000 to 10,000 pixels.

Go to keywords in GTM and add one case Sign.

Enter “scroll” in the event name and set the custom parameter to “scroll_percentage”.

Choose a trigger Custom scroll.

In short, custom scroll tracking works as follows:

• Disable default scroll tracking.
• Adding the same scroll tracking again with the event name “scroll”.
• Scroll depth thresholds are sent in a custom parameter.

Once you’ve got scroll depth tracking set up, let’s move on to setting up the Looker Studio (formerly Google Data Studio) dashboard, which will report articles with their average scroll depth.

How to create a Looker Studio scroll depth report

Open Looker Studio and add GA4 as a source.

Insert a pivot table as a chart type.

Add “Page Path” as a row dimension and scroll_percentage as a column dimension. Add ‘Total Users’ and ‘Event Count’ as metrics.

Apply a filter with “event name” containing “scroll” to filter out other events like “page_view” from the data.

Due to the peculiarities of the GA4 data structure, all events are retrieved and a filter is required to eliminate non-scroll events.

How to create a scroll depth report in Explorations

The same report can be created in Exploration, although I recommend using Looker Studio as you can share it with your editorial team and it’s easier to read.

To create a scrolling depth report in Exploration, navigate to Explore and create an empty “free-form” report. Add dimensions like Page Path and Scroll Percentage.

Generate the report according to the screenshot.

Don’t forget to filter only events named “scroll”.

It’s also useful to set conversions based on scroll depth. For example, we have a conversion rate whenever you read 50% of an article.

To set up the conversion based on scroll depth, we’ll use one of GA4’s greatest features, which is setting up an event based on event parameters.

Navigate to events Settings and click create an event button in the top right corner.

In the popup dialog, enter “Event Name=scroll” and “scroll_percentage=50” and name your event.

And mark it as a conversion in the conversion settings.

Diploma

Here we discussed how to track scroll depth in GA4, which is an important metric to measure your audience engagement.

I would recommend trying to create different segments and compare how each type of user is interacting with your content.

Also, consider merging data with Google Search Console and see which keywords are driving more engagement with your content.

In the future we will tell more about using GA4 and help you to set it up.

To keep up to date with our upcoming guides, we invite you to subscribe to our newsletter.

More resources:

---

Featured image: fizkes/Shutterstock