How to Set Up Scroll Tracking by Blocks Using Google Tag Manager

Page scrolling analysis is a simple and popular method that helps you better understand user behavior. This approach works especially well on landing pages, but it’s also applicable to other types of websites.

In today’s article, I’ll discuss not the common scrolling method that tracks the percentage of a page a user has scrolled, but a more advanced technique—scroll tracking by blocks.

How Does Scrolling by Blocks Work?

Classic scroll tracking by percentage has a key limitation: although it’s easy to set up, the length of the page can vary significantly depending on the device. As a result, if we see that a user has scrolled 50% of the page, we can't precisely determine which specific part of the content they’ve viewed. We can only estimate it, as the page length depends on the screen width.

Scroll tracking by blocks offers a clearer understanding of user activity because it's usually set up by block headers. The division into blocks depends on the page structure. For example, the course page on PROANALYTICS.ACADEMY consists of sections like “Who the course is for,” “Course Program,” “Course Benefits,” etc., while a blog article is divided into its respective headers.

Here’s how it works: when a specific header, marked as a new block, enters the visible area of the screen, an event is triggered. This allows us to build a scroll funnel based on these events.

The setup isn’t difficult and can be done via Google Tag Manager. Follow the steps below for guidance:

• Google Tag Manager Setup
  • Setting up the Element Visibility Trigger
  • Configuring the Tag
• Creating a Funnel in GA4 Based on Section Scroll Data
• Conclusion (Advantages and Disadvantages of Scroll Tracking by Blocks)

Google Tag Manager Setup

As with any GTM setup, we’ll break it down into two main processes: creating the trigger and setting up the tag.

Setting up the Element Visibility Trigger

In the workspace, click on the "Triggers" section → "New."

Next, select "Trigger Configuration" → "Element Visibility."

You’ll see many different settings. This is one of the most flexible triggers, but don’t worry, not all settings are necessary for us.

First, you need to specify which elements' visibility will count as a block being viewed. The best way to do this is using CSS selectors.

To find and copy the CSS selector, go to the relevant page, right-click, and select "Inspect."

The page's code will open, and when you hover over a line of code, the corresponding part of the page will be highlighted. For example, if you need the selector for the “Who this course is for” block, locate the code that highlights the relevant text when you hover over it.

Then, right-click on the code and select "Copy" → "Copy selector."

This method allows you to copy selectors for all necessary elements and paste them into the trigger, separated by commas.

Now, specify how often the trigger will fire. Choose the "Once per element" option, since the trigger should only fire once when the user scrolls to a specific block.

There’s also an option to set a minimum percentage of the element that must be visible when the trigger fires.

When you hover over the code, 100% of the element is highlighted.

If you set the condition to 50%, the trigger will fire when the page scrolls to that level.

Typically, it’s better to set a higher value, like 90%, meaning the event will trigger when the element is nearly fully visible on the visitor's screen.

The last step is to name the trigger EV - block_scroll and click "Save."

Setting Up the Tag

Next, go to the "Tags" section and click "New."

Then, choose "Tag Configuration" → "Google Analytics 4."

Now, select Google Analytics: GA4 Event.

For the tag, you’ll need to provide three settings:

• Tag ID: This is your data stream identifier in Google Analytics 4.

• Enter block_scroll in the corresponding field.

• In the "Event Parameter" field, enter block_name. For the value, select the "Click Text" variable from the "Built-in" group. This will transmit the text of the header marking the start of a block when the event is triggered.

Now, link the trigger EV- block_scroll with the tag.

Then, name the tag GA4 - block_scroll. Don’t forget to save the tag.

That’s it! The setup is complete. Now, wait for the first data in GA4 and create a funnel in the “Explore” section to analyze user interaction with the page in a convenient format.

Creating the Funnel Based on Section Scroll Data

To create the funnel, go to the “Explore” section and select “Blank.”

Now, choose “Funnel Exploration” from the dropdown list.

To configure the steps, click on "Steps."

The first step is to add the page_view event. In the "Page Location" parameter, specify the URL of the page you’re analyzing. This ensures that only users who viewed the specific page are considered.

In the next steps, add the block_scroll events for all headers using this pattern:

• Add the block_scroll event.
• Add the block_name parameter we created earlier in Google Tag Manager. Then, specify the header text the user scrolls to at this stage.
• Be sure to include the "Page Location" parameter, just like for the first page_view event, so the entire funnel reflects only the page you're analyzing.

Continue adding events for each header, progressively covering all key blocks of the page. You’ll end up with a report like this:

Conclusion (Advantages and Disadvantages of Scroll Tracking by Blocks)

Like most things, this setup method has both advantages and disadvantages.

The main advantage of scroll tracking by blocks is its accuracy. We know that every event, regardless of device or screen size, has the same meaning—scrolling to a specific block. Therefore, the funnel built from the collected data will be highly precise.

On the other hand, if your site’s headers are poorly marked, you’ll likely need more than just h2 or h2, h3 selectors in your trigger, and it may take longer to gather selectors from the site.

Also, keep in mind that if a user has auto-translate enabled, the text will be translated into another language. Since we use the Click Text variable for the event parameter, the text sent to analytics will also be translated. This means your block name will change. If you’re targeting a local market, this won’t be an issue. However, if you're an international company operating in multiple countries, this might cause problems or make analysis more difficult.

In summary, scroll tracking by blocks in Google Tag Manager is an effective method for collecting data, known for its accuracy. Despite some drawbacks, such as dependency on text language via the Click Text variable or the need to adapt for different pages, this setup allows for more structured data collection than traditional percentage-based tracking and makes it relatively easy to gather data for analyzing user interactions with the page.

If you're interested in working with GTM or want to master additional setups and learn their nuances, join the PRO GTM course. You’ll be able to master this tool professionally with my guidance.