Monitoring Scroll Depth In Google Analytics 4 With Google Tag Manager

This article describes how to use Google Tag Manager to monitor scrolling depth in Google Analytics 4.

Scrolling through improved statistics

Google Analytics 4 gives you the ability to track different types of events:

• Automatically logged events are those that Google automatically collects when a counter is created and enabled.
• Improved statistics - additional events that Google also collects automatically, but only if you have enabled this feature in your resource settings (for web streams only).
• Recommended events - events that are already built into Google Analytics 4 for different types of activities, with standard names and parameters as described in the official documentation, but which you will need to customise for your tasks.
• Special events - events you create to suit your needs.

The updated statistics system includes monitoring of the following activities: page views (page_view), clicks on external links (click), search results on the site (view_search_results), interaction with YouTube videos (video_), file downloads (file_download) and page scrolling (scroll).

These events can be enabled during counter registration in Google Analytics 4 or in the web resource settings in the "Administrator - Resource - Data flows" section. Once enabled, the corresponding event types are automatically recorded and displayed in analytics reports.

It is particularly important that the scroll event is activated each time a user scrolls to the end of a web page and reaches the 90% threshold. In this case, the 'percent_scrolled' parameter is sent with the event, which has a value of 90.

This percentage of vertical scrolling in the advanced statistics system is the only criterion for triggering an event and sending this data to Google Analytics 4, no other parameter is used for this purpose.

In the Google Tag Manager, this tracking is comparable to the "scroll depth" trigger setting, which has a threshold of 90%.

Now you don't need to manually configure variables, enable triggers or add tags to track 90% scroll depth. In Google Analytics 4, this 90% scroll tracking feature is enabled by default when you enable advanced statistics.

Scroll tracking in Google Analytics 4

You have two options for what you can do:

1. Pass different values for scroll, such as 10, 25, 50, 75, to an existing scroll event in the system, but use different parameters for each individual event.
2. Set specific scrolling thresholds - 10, 25, 50, 75 - for each event individually. For example, create separate events such as scroll_10, scroll_25, scroll_50 and so on for each of these values.

In the first scenario, you may encounter a limitation in Google Analytics 4 when creating special parameters (up to 50 per event) for each resource. In the second case, you may encounter a limit on the number of unique event names (up to 500). However, Julius Fedorovicius of analyticsmania.com denied on his Twitter account that there is a limit on event names for web streams.

The choice of actions depends on personal preference. You can choose to create a single event with a single custom parameter, or you can develop multiple events for different scrolling values. We'll take a closer look at each of these approaches below.

Disabling advanced statistics

Since we're going to manually configure scroll depth tracking through the Google Tag Manager, we don't need to use the 'Scroll Enhanced Stats' event. To do this, go to the 'Admin' section of your Google Analytics 4 resource, then to 'Data Streams' and select the web stream you want to use.

Then click the gear icon:

And turn off scroll tracking:

Save changes.

Enable variables

The first step you need to take is to enable the built-in variables. To do this, go to the Google Tag Manager and enable the variables in the 'Scroll' category:

• Scroll Depth Threshold - returns the value of the scroll depth threshold.
• Scroll depth units - returns a value in pixels or percent.
• Scroll Direction - returns the value of the scroll direction (vertical or horizontal).

Setting up a trigger

Now you need to create a trigger of the type 'Scroll Depth'. Our recommendation is to track vertical scrolling with thresholds of 25%, 50%, 75% and 90%. This is standard practice and the most common tracking option.

A less common but acceptable practice is to set the scrolling thresholds to 10%, 25%, 50%, 75% and 100%. You can adjust these percentages to suit your needs and requirements. Once configured, don't forget to save the trigger you have created.

Creating a tag

The final part of the process is to create a tag of the type 'Google Analytics: GA4 Event'. The settings for this tag will depend on which of the approaches described above you choose:

1. Pass scroll values (10, 25, 50, 75, etc.) to the scroll event, but with different event parameters.
2. Pass the scrolling value (10, 25, 50, 75, etc.) to each event separately.

Let's look at both options.

The scroll event and various event parameters

If your goal is to pass a scroll value (10%, 25%, 50%, 75%, etc.) to a standard Google Analytics scroll event, but with different parameters for each event, then you'll need to configure the tag as follows:

• The configuration tag is your Google Analytics 4
• Event name - scroll
• Event Parameters - percent_scrolled
• Value - {{Scroll Depth Threshold}}

Select the scroll depth trigger you created earlier as the trigger to activate. This trigger will be the same whichever configuration method you choose. Then save the tag.

Whenever a visitor to your website exceeds the specified scroll depth threshold that you set in the scroll depth trigger, this event tag will be activated. It sends the scroll event along with the percent_scrolled event parameter, which records the value at the moment of scrolling in the Scroll depth threshold variable (25%, 50%, 75%, 90%).

In order for this data to appear in Google Analytics 4 reports, you will need to manually create special definitions in the GA4 interface. This can be done in the 'Configuration - Custom definitions' section by clicking on the blue 'Create custom parameter' button.

Type:

• Parameter name - Percentage of scrolling
• Scope - Event
• Description - can be left blank
• Event parameter - percent_scrolled

Save your custom parameter settings.

After enabling scroll depth tracking, you may need to wait up to 24 hours for the event data and its parameters to appear in your Google Analytics 4 reports.

Note: For more information on what other custom definitions you can add to Google Analytics 4 once you have created a counter, please see this article.

For individual scrolling events:

If your goal is to pass individual scrolling values (10%, 25%, 50%, 75%, etc.) for each event, then you need to configure the tag as follows

1. The configuration tag is your Google Analytics 4
2. The name of the event is scroll_{{{Scroll Depth Threshold}} (no spaces)

As the activation trigger, use the same scroll depth trigger you created in the previous step. Once you've set it up, don't forget to save the tag.

This configuration uses the same built-in variable {{Scroll Depth Threshold}}, but it is included directly in the event name, separated by an underscore. This name format is standard for Google Analytics 4, alternatively you can use names such as scroll{{Scroll Depth Threshold}} as long as there are no spaces in the name. So if the visitor exceeds the scroll threshold of 25%, the event will be called scroll_25, for 50% - scroll_50, and so on. With this tracking option, you do not need to pass an additional event parameter or create a special parameter in Google Analytics 4.

Debugging mode

Once you have set up tracking using one of the suggested methods, it is important to check that it is working correctly. To do this, use the preview mode in Google Tag Manager. Visit your website and scroll to the bottom of the page. In debugging mode, you should see a number of registered scroll depth events, each of which was triggered when the scroll depth threshold set in the trigger was reached, as well as activated GA4 tags.

You can click on this tag and navigate to the Values section to see exactly what data was sent to Google Analytics.

In the DebugView tool, when using the first tracking method, you will be able to observe several events of type scroll, but with different values in the percent_scrolled event parameter. For example, 25%:

If you use the second configuration method, the DebugView will display different scroll depth events, each with its own unique name.

When you're done with all the settings, don't forget to publish the container to Google Tag Manager to apply the changes.

Reports on scrolling events

Configuration - Events

After enabling scroll tracking, it can take up to 24 hours for the data to appear in Google Analytics 4 reports. Once this time has elapsed, you can go to the Configuration - Events section of Google Analytics to view the logged event.

Reports - Interactions - Events

You can also view event data in the Reports - Interactions - Events section of Google Analytics 4, where you can find the 'scroll' event if you used the first setup option with the 'percent_scrolled' event parameter, and click on it for a detailed view.

On this page you will see detailed data for a particular "Scroll" event. Within this page, there should be a separate card (widget) that displays specific parameters, such as "Scroll Percentage".

Research.

If you want to see scrolling data on a specific page of your website, you can use the research feature in Google Analytics 4. There are a few different ways to analyse it:

1. by setting up a single scrolling event and analysing multiple pages;
2. if you set a single scrolling event and analyse a specific page;
3. if you set multiple scroll events and analyse multiple pages;
4. if you set several scroll_ events and analyse a specific page;

Option 1. One event and one page

For the analysis, select the created "Scrolling Percentage" from the list of parameters and add it to the "Rows" section. As indicators, use standard Google Analytics 4 metrics such as active users and number of events.

To analyse a specific page, use a filter. Include the 'Page Path' and 'Screen Class' parameters in your search, and then use them as filter criteria. For example, set the filter so that the Page Path and Screen Class are exactly "/saas-end-to-end/".

This will fit the data in the study to the specified criterion and you will be able to see how many people on the specified page have reached certain scrolling thresholds.

If you come across a "(not set)" value in a report, you can either ignore it or exclude it with a filter. To do this, add a condition that the Scrolling Percentage does not contain "(not set)".

Option 2. One event and multiple pages

To analyse multiple pages at once and not create a filter in the study, you need to select the Page Path and Screen Class option from the list and add it to Rows and the special Scrolling Percentage option to Columns.

Option 3. Multiple events and multiple pages

In this case, add the Event Name parameter to the study, move it to Rows and add a condition to the Filters: This will match all scrolling events regardless of the full event name.

After applying the filter you will get a report like this:

Option 4. Multiple events and one page

To limit the list to a specific page, simply add a filter for Page Path and Screen Class to the first filter by name, as you did in option #1.

For example, the page path and screen class is exactly /saas-end-to-end/:

The report will remain the same, but the numbers in it will change, because you were analysing scroll depth for all the pages on the site, but now you're only analysing one.