How to track scroll depth for different sections of a page in Google Tag Manager

Author:

Tracking scroll depth is a great way to understand how users engage with the content on your website. By using Google Tag Manager (GTM), you can set up a system to track how far users scroll down the page, and more importantly, you can monitor how deep they scroll within different sections of the page (such as different content blocks, articles, or product categories). Here’s a step-by-step guide to track scroll depth in different sections of a page using Google Tag Manager.

Step 1: Set Up Google Tag Manager

Before starting, ensure you have Google Tag Manager installed on your website. If you haven’t already installed GTM, you can follow the instructions on the Google Tag Manager website to create a container and add the necessary code to your website.

Step 2: Set Up Scroll Tracking in GTM

GTM provides built-in support for scroll tracking, which you can use to track how far users scroll on your webpage. This can be done through the Scroll Depth Trigger.

Enable Built-In Scroll Depth Trigger

  1. Log into Google Tag Manager and select the container for your website.
  2. Navigate to Triggers in the left-hand sidebar.
  3. Click New and then choose Scroll Depth as the trigger type.
  4. In the configuration panel, set up the following options:
    • Vertical Scroll Depths: This will be the percentages or pixel depths at which you want to track user behavior. For example, you could track scroll depth at 25%, 50%, 75%, and 100% to see how far down the page users scroll.
    • Horizontal Scroll Depths (Optional): If you want to track horizontal scrolling, you can configure this as well.
    • Scroll Depths for Sections: If you want to track scroll depth within specific sections, you’ll need to modify the trigger slightly by tracking when users reach the start of those sections.
  5. Save the trigger once you’ve configured the scroll depths you want to track.

Step 3: Configure Tags for Scroll Tracking

Now that you have your scroll trigger set up, you’ll need to create tags that will fire when a user reaches the specified scroll depth.

Create a Scroll Tracking Tag

  1. Go to the Tags section in Google Tag Manager and click New.
  2. Choose a tag type. If you’re using Google Analytics, select Google Analytics: Universal Analytics or Google Analytics 4 Configuration depending on which version you use.
  3. In the Tag Configuration:
    • For Google Analytics 4, choose Event as the type and configure it with event parameters, such as:
      • Event Name: scroll_depth
      • Event Parameters: You can create parameters like scroll_percentage, scroll_depth, section, etc.
    • For Universal Analytics, select Pageview or Event, and for Event Category, you can use Scroll Depth.
  4. Scroll down to the Triggering section and add the Scroll Depth trigger you created in Step 2. You can set the trigger to fire when specific scroll depths are reached (e.g., 25%, 50%, 75%, 100%).
  5. Save the tag.

Step 4: Set Up Custom JavaScript for Section-based Scroll Tracking

To track scroll depth within specific sections of your page (e.g., tracking when users reach the start of different sections), you’ll need to use a custom JavaScript variable in GTM.

  1. Add a Custom JavaScript Variable:
    • Go to Variables in GTM.
    • Click New and choose Custom JavaScript.
    • Add a script that returns the current section or element being scrolled to. For example, you could track when the top of a particular section is in view:
javascript
function() {
var sections = document.querySelectorAll('.section'); // Replace with your section classes or IDs
var scrollPosition = window.scrollY + window.innerHeight;

for (var i = 0; i < sections.length; i++) {
if (sections[i].offsetTop < scrollPosition) {
return sections[i].id; // or return sections[i].className if you prefer
}
}

return null; // Return null if no section is currently in view
}

This variable will return the ID or class name of the section that’s currently visible in the viewport as the user scrolls.

  1. Modify the Scroll Tracking Tag:
    • Go back to the tag you created in Step 3 and add a Custom JavaScript Variable to track which section the user is in.
    • For example, you could modify the event parameters to include the section variable. In GA4, you could do something like:
javascript
{
'scroll_percentage': {{Scroll Depth}},
'section': {{Custom JavaScript Variable for Section}}
}

This will send the section data as part of the event, so you can track which sections users are scrolling through.

Step 5: Test Your Setup

Before publishing your changes, always test your GTM container to ensure that the scroll depth and section-based tracking are working as expected.

  1. Use GTM’s Preview Mode: Enable Preview mode in Google Tag Manager and load your website. This allows you to see in real-time when your scroll tracking tags are firing.
  2. Check the Data: Open your website and scroll down to see if the tags fire at the specified scroll depths. Ensure that the event names and parameters are being sent correctly.

For instance, in Google Analytics (GA4), you can check Events under the Real-time report to see if scroll events are being recorded. Verify that you can see events like scroll_depth, along with the appropriate values for scroll_percentage and section.

Step 6: Publish Your Container

Once you’ve confirmed that everything is working correctly in Preview Mode, you can publish your container in Google Tag Manager.

Step 7: Monitor and Analyze Data

After your container is live, you can monitor the data sent to Google Analytics or any other analytics tool you’re using. Specifically, look for:

  • Scroll Depth Tracking: You should see events indicating when a user reaches certain scroll percentages (25%, 50%, 75%, 100%).
  • Section-based Tracking: If you’ve set up section-based tracking, you can analyze which sections users are engaging with most.

You can use this data to improve user experience, optimize content layout, and understand which sections are most engaging or need improvement.

Conclusion

Tracking scroll depth with Google Tag Manager is a simple yet powerful way to gain insights into how users engage with your content. By setting up scroll tracking triggers and tags, and using custom JavaScript for section-based tracking, you can monitor not only how far users scroll but also which parts of your page are the most engaging. This data can then inform decisions around content placement, website design, and overall user experience optimization.

Categories: Digital Marketing