Reading time: 6 min read
Scroll Depth Events In Google Analytics 4
Using Google Tag Manager
Scroll Tracking In Google Analytics 4
Google Analytics 4 (GA4) automatically tracks a collection of events included in the Enhanced Measurement. These events include the standard page views, scrolls, outbound clicks, search results, video engagement, and file downloads. Once the enhanced measurement is enabled, GA4 tracks a scroll event once a visitors reaches 90% of the page. But what about other scroll depth thresholds like 10%, 25%, 50%, 75% or 100%?
In order to track other threshold values, we will learn how to set up custom events in GA4 using Google Tag Manager (GTM). This blog will help you measure custom scroll tracking events on your website to find out how users are engaging with your content. With this valuable data, you can potentially improve any high bounce rates on your website after better understanding how users interact with it. This information is especially helpful to learn how to better optimize pages with heavy amounts of content.
- Setting Up Scroll Tracking
- Disable Default GA4 Tracking
- Scroll Variable Setup
- Scroll Trigger Configuration
- Scroll Tag Configuration
- Testing Your Scroll Tag
Note: ensure your GTM container code is available on the website you want to track before proceeding through these steps. If you need help check out our blog Setting Up Your Google Analytics 4 Property.
Setting Up Scroll Tracking Using GTM
Disable Default GA4 Tracking
For this example, we will set up custom scroll tracking for the following page percentage thresholds: 25%, 50%, 75%, and 100%. In GA4, scroll events are automatically tracked at 90% with enhanced measurement. Consider disabling the default scroll tracking event if you have your enhanced measurement enabled, before setting up the custom scroll events. Otherwise, you will see both scroll events in your GA4 data.
- Navigate to the Admin settings in your GA4 property.
- Click on the Data Streams in the Property column and select the domain settings you want to edit.
- Select the settings icon under enhanced measurement and disable scrolls.
- Click Save.
Now that the default scroll tracking is disabled, let’s look at how to set up scroll tracking for your GA4 property using GTM.
Scroll Variable Setup
In GTM, we need to enable variables for the scroll depth tracking. In the Variables section, under the Built-In Variables click Configure. Navigate to the Scrolling section at the bottom of the list and enable all of the built-in scroll variables:
Your list of Built-In Variables will now include the three variables we enabled: scroll depth threshold, scroll depth units, and scroll direction.
Scroll Trigger Configuration
Let’s go over our trigger configuration to track custom scroll depth for 25, 50, 75, and 100 percent:
- Click New to create our new custom scroll trigger. Name the trigger, in this case we called it Scroll Depth.
- For the Trigger Type select Scroll Depth.
- Check the Vertical Scroll Depths box to ensure that we can track how far down the page users are interacting. After indicating whether you want to track vertical or horizontal scroll depth, this scenario will select Percentages over pixels. In the text box below, is where we will indicate the specific percentages for our custom event and separate each by a comma: 25, 50, 75, 100.
- Indicate whether you want to Enable this trigger on the container load, DOM ready, or window load. In this scenario, we want to have the full page loaded before the trigger fires and on All Pages.
- Click Save.
Scroll Tag Configuration
Before setting up tags in your GTM container, remember Google announced that it will be discontinuing Universal Analytics (UA) as of June 2023. Keep this in mind when setting up new tags in your GTM because UA will not be tracking any new hits after July 1, 2023.
- Select the Google Analytics: GA4 Event option for the Tag Type. Be sure to indicate the GA4 tag you setup as the Configuration Tag.
- There are two approaches to setting up custom events in GA4 using GTM for scroll depth events. Both approaches include the same variable and trigger setup, the only difference would be how the events are displayed in your GA4 event reporting.
- scroll_25
- scroll_50
- scroll_75
- scroll_100
- The following screenshot includes an event parameter on our scroll depth tag indicating device type.
- Once the tag event name and any other event parameters you want to set up are configured, click Save.
Approach 1 – Custom Event Names
The first naming approach uses a custom Event Name for each scroll depth threshold – “scroll_{{Scroll Depth Threshold}}”. In your GA4 event reporting, this method will display each scroll event as:
The tag configuration for a custom event naming will look like this:
| Event Parameter | |
|---|---|
| Parameter Name | *This method does not require different event parameters because the value parameter is indicated in the event name. |
| Value | n/a |
Note: GA4 has a limit of 500 unique event names.
Approach 2 – Custom Dimensions
The second approach uses the same Event Name – scroll, but is differentiated by event parameters. In GA4 reporting, this method is displayed as scroll but it won’t be differentiated what scroll percentage was achieved until the data is filtered. Use Custom Dimensions in your GA4 reporting to differentiate scroll depth thresholds.
| Event Parameters | |
|---|---|
| Parameter Name | percent_scrolled |
| Value | {{Scroll Depth Threshold}} |
Note: GA4 has a limit of 50 custom dimensions per property.
Because a scroll on a mobile device and desktop are very different page lengths, we wanted to ensure our GA4 reporting indicated which scroll depths were achieved with which device. We referenced this blog to create a device type variables using custom javascript.
Here are the event parameters for setting up a device type in your scroll event tag.
| Event Parameters | |
|---|---|
| Parameter Name | device_type |
| Value | {{Device Type}} |
For this tag, we chose the first naming approach. The first approach is more appealing due to the limit of custom dimensions GA4 allows you to set up in your reporting. It also displays the scroll depth threshold for each event name. If you choose to use approach 2, you will need to further filter the scroll events in GA4. Using Custom Dimensions, you can analyze the different scrolling thresholds on one page.
Testing The Scroll Tag
Be sure to test your tags in the Preview mode and debug mode in your GA4 property.
After loading your tag assistant, be sure to scroll to the very bottom of your test page to test all the scroll depth tags.
Here’s a screenshot of the debug mode with the {{Scroll Depth Threshold}} in the Event name.
What’s Next?
We hope you found this blog helpful in creating custom scroll depth events using in GA4 using GTM. Be sure to check out our other GA4 blogs. If you have any more questions regarding GA4 or GTM, don’t hesitate to reach out to our friendly team at [email protected]!