Scroll depth in Google Analytics 4 shows you how far your visitors scrolled on a web page. It’s rather easy to set up scroll depth tracking, with or without Google Tag Manager. Once the data flows in, you can turn it into actionable plans to improve the user experience on your site and make your revenue go up. Let’s get to the bottom of this.
Click on the last item to trigger a scroll depth of 90% in our Google Analytics 4 account. Alternatively, click on a topic of your interest.
What is scroll depth tracking in GA4?
Scroll depth tracking in Google Analytics 4 allows you to see how much of a web page your visitors actually view. You can track both vertical and horizontal scrolling behavior as a percentage or pixels. Scroll depth insights help you improve your content and web design.
Before we dive deeper into how to turn this data into ca$h, let’s see how easy it is to include scroll depth in your GA4 account.
You can choose two paths: with or without Google Tag Manager (GTM).
How to activate scroll depth tracking in Google Analytics 4?
Scroll depth tracking is by default included in GA4. You can switch it on or off in the Enhanced Measurement panel of your account.
To do so, click on Admin in the left bottom corner of your Google Analytics account.
Then click on data streams of your property, choose Web and click on the arrow pointing to the right.
If you don’t see Scrolls under Enhanced Measurements, click on the clog.
In the next screen, you can switch Scroll event tracking on or off.
Set up? Time to look at where you can find the data in your GA4 account.
Where can you see scroll events in Google Analytics 4?
You can find the default scroll events under Events in the menu on the left.
When you click on it, you can start adding comparisons.
If you want to see, for example, the scroll events of your home page, you can add it as a dimension. Choose ‘/’ as the dimension value for your home page.
Even with the default GA4 scroll event, you have access to different dimensions, such as screen size, page path, browser…
Doing nothing to see scroll depth in your GA account is easy enough. But alas, this also comes with a price.
Limitations of the default scroll event in GA4
The default GA4 scroll event has 3 serious disadvantages.
- the scroll depth event is only triggered when visitors scroll 90% of a web page
- you cannot pass additional parameters in the event as, for instance, a scroll depth threshold of 50% (meaning: people reached the middle of a page)
- the depth is only measured as a percentage of the web page and not in pixels
This is painful.
You cannot find out how far people scrolled on your home, or any other web page of your site.
The event is triggered only when they reach 90% of a page. This leads us to an intriguing question…
Why is 90% scroll depth considered as reaching the bottom of a page?
Bigger websites often use the footer as an additional navigation menu. Quick links give people a convenient way to discover more.
Especially on smartphones, this is a smart thing to do. Scrolling all the way up to the top to click on a hamburger menu to navigate further takes the appetite away.
On blogs, the space above the bottom is often used to leave comments or display related articles.
For this reason, a 90% scroll threshold is more reliable than 100% to show that people got to the end of your web page.
Nevertheless, this information is clearly not enough if you are serious about improving the user experience on your website.
To upgrade your scrolling data, you will need to use Google Tag manager. Let’s first look at what the extra effort will reveal to you.
Default scroll depth tracking in GA4 VS GTM
Google Tag Manager gives you more options and flexibility to set up scroll tracking events.
In the picture below, you can see that GTM gives you access to scroll measure units, scrolling directions and thresholds to trigger the event.
Let’s look at how to set it up.
How to set up scroll depth in Google Analytics 4 with Google Tag manager?
Tip: Before you begin, copy the measurement ID on the top of your GTM account. You will need this in step 4.
Step 1: Add a new tag
Click on New Tag in your Google Tag Manager workspace.
Step 2: Name your tag and choose a tag type
Give your tag a descriptive name and click on the icon to choose a tag type.
Step 3: Choose GA4 event
On the next screen, click on Google Analytics: GA4 event.
Step 4: Choose your configuration tag and measurement id
Choose None – Manually set id and then paste your GTM Measurement ID in the field below.
Step 5: Click on the brick of event name
Step 6: Choose your built-in scroll depth variable
If you don’t see any scroll variables, click on Built-ins.
Now you can choose between 3 different scroll dept variables:
- Scroll Depth Threshold (how far do visitors scroll)
- Scroll Depth Units (pixels or percentage)
- Scroll Direction (vertical scroll or horizontal scroll)
Step 7: Change the Event Name (optional)
You can give your Event Name a better description. This is an optional step, but later on, it can add clarity for your team members (and yourself).
You can, for instance, add “Scroll %” in front:
Scroll % {{Scroll Depth Threshold}}
Step 8: Create a trigger
Now click on the trigger field.
If you don’t see Scroll as an option, click on the “+” sign on the right top of your screen.
Step 9: Name and choose a trigger
On the next screen, you can again fill in a name and then choose a trigger type.
Step 10: Choose the Scroll trigger
In this screen, make sure you use the same option as you used in step 3. If you want to measure the direction of scroll depth, mark Horizontal or Vertical.
You can also configure options as
- scroll units as a percentage or pixels. Fill in the values and add a comma between them.
- scroll direction. Horizontal is typical when your website displays tables.
- the pages on which you want to measure the scroll depth. This is, for instance, handy if you have set up a paid campaign with customized landing pages.
- Window Load is the default setting. It assures that the event will only be triggered when the full page is loaded. To keep your data reliable, don’t change this.
Step 11: Save and Submit
After all the hard work, you can finally Save your event and hit Submit to start tracking the scroll events in your Google Analytics 4 account.
Note: A safer approach is to test it in GTM debug mode first.
And then you wait until the next day to see the data roll in…
Your GTM scroll events will now show up in GA4
Well done!
Now the fun can begin…
How to use scroll depth data to improve the user experience on your website?
Scrolling behavior of visitors reveals partly how users experience a web page. If nobody scrolls, you can safely assume there is something wrong with a page.
The only thing is, scroll depth doesn’t tell you exactly why visitors don’t dive deep in your content.
- Did a visual scare readers off?
- Was the title confusing?
- Does the page contain boring or irrelevant texts?
- Does a wall of text make it hard to read to the bottom?
- Or maybe the page is loading slowly?
- Does a pop-up interrupt and distract readers?
- Or is there an element that appears suddenly much lower on the page and gives readers the impression that the page had ended?
Scroll depths don’t give explanations. They are symptoms.
Let me illustrate this with 3 examples.
Example 1: Low scroll depth
If your site has 10 pages with a scroll depth of 90% and 100 pages with a 25% depth, something is not right. Investigate the 10 pages and see if it contains or lacks elements compared to the other pages. Adding or removing them can increase the scroll depth of all your other pages.
Example 2: high scroll depth
A high scroll depth doesn’t mean your content is awesome. Imagine this same page with no images and a font size of 6 pixels.
When you open the page, you see all the content at once. This would show up in GA4 as an amazing 90% scroll depth. However, you wouldn’t use a zoom glass to read anything.
Example 3: Above the fold content
Above the fold content is the part that is visible when a visitor opens a page. It helps people decide whether or not to explore your content. The content can differ on devices and depends on the screen resolution and browser size.
Different screen sizes show different above the fold content
Although scroll depth gives you a hint about user experience, it’s best to combine it with other GA4 metrics.
Other user experience metrics in GA4
In GA4, the following metrics give you insights into user experience and engagement. You can combine them with scroll depth data for an even better understanding of what to improve on your site.
- Average engagement time
- Engaged session per user
- Views per users
- Conversions, like signing up for a newsletter
In GA4, you can mark scroll depths as a conversion
Summary of scroll event tracking in GA4
You can set up scroll depth tracking in GA4 with or without Google Tag Manager. The default GA scroll event shows basic information.
In GTM, you have more control over how to track the scroll behavior of your website visitors.
The information gives you a (tiny) clue about how engaged your users are with your content. Combine this with other metrics to make profound decisions about changing your website design and/or content.
You have now reached the 90% threshold scroll depth. Thank you for making it this far!