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

Author:

Tracking scroll depth is a crucial aspect of understanding user behavior and improving the user experience on your website. Google Tag Manager (GTM) provides a variety of ways to track scroll depth, allowing you to measure how far users scroll through different sections of your page. In this comprehensive guide, we’ll walk you through the steps to set up scroll depth tracking for different sections of a page using Google Tag Manager.

Why track scroll depth?

Before we dive into the implementation, let’s discuss why tracking scroll depth is important:

  1. Improve engagement: By understanding how far users scroll, you can identify areas of interest and optimize your content to keep users engaged.
  2. Enhance user experience: Scroll depth tracking helps you identify areas that may be overwhelming or confusing, allowing you to refine your content and make it more user-friendly.
  3. Optimize for conversions: Scroll depth tracking can help you identify the sections of the page that are most relevant to conversion goals, allowing you to optimize those areas for better conversions.
  4. Measure attention metrics: Scroll depth tracking provides valuable insights into how users interact with your content, allowing you to measure attention metrics like time on page and scroll percentage.

Prerequisites

Before setting up scroll depth tracking in GTM, make sure you have:

  1. A Google Tag Manager account set up
  2. A basic understanding of HTML and JavaScript
  3. A Google Analytics property set up and connected to your GTM account

 1. Set up a new tag

In your GTM account, create a new tag by clicking on the “Tags” tab and then clicking the “New” button.

  1. Tag Type: Choose “Custom HTML”
  2. Tag Name: Give your tag a descriptive name, such as “Scroll Depth Tracker”
  3. HTML: Paste the  code into the HTML field. This code uses jQuery to calculate the scroll percentage and push an event to the data layer whenever the user scrolls. The getScrollDepth() function returns the current scroll depth as a percentage.

 2. Set up variables

In GTM, create two variables:

  1. Scroll Percent: Create a variable named “Scroll Percent” with type “Integer” and scope “Page”. Set the value as {{scrollPercent}}.
  2. Scroll Depth: Create a variable named “Scroll Depth” with type “Integer” and scope “Page”. Set the value as {{getScrollDepth()}}.

 3. Create triggers

Create two triggers:

  1. Scroll Trigger: Create a trigger named “Scroll Trigger” with type “Custom Event” and event name “scroll”. Set up the trigger to fire when the event is triggered and the condition is {{ Scroll Percent }} >= 50. This will trigger when the user has scrolled at least halfway down the page.
  2. Scroll Depth Trigger: Create a trigger named “Scroll Depth Trigger” with type “Custom Event” and event name “scroll”. Set up the trigger to fire when the event is triggered and the condition is {{ Scroll Depth }} >= 75. This will trigger when the user has scrolled at least 75% down the page.

 4. Set up tags

Create two tags:

  1. Analytics Tag: Create a tag named “Analytics Tag” with type “Google Analytics” and set up as follows:
    • Track Type: Pageview
    • Category: Scroll Depth
    • Action: {{ Scroll Percent }}
    • Label: {{ Scroll Depth }}
  2. Custom HTML Tag: Create a tag named “Custom HTML Tag” with type “Custom HTML” and set up as follows:
    • HTML: <script> alert('You have scrolled at least 75% down the page!'); </script>

 5. Deploy and test

  1. Deploy your tags and triggers by clicking on the three-dot menu next to each tag and selecting “Publish”.
  2. Test your implementation by scrolling through your website. You should see the alert pop up when you reach the 75% mark.

Best practices

To get the most out of your scroll depth tracking, keep in mind:

  1. Use specific sectioning: Break down your content into distinct sections using HTML elements like headings, paragraphs, or divs. This will allow you to track scroll depth for specific sections of your page.
  2. Use CSS selectors: Use CSS selectors to target specific elements on your page, allowing you to track scroll depth for specific sections or elements.
  3. Adjust threshold values: Experiment with different threshold values (e.g., 50%, 75%, or 90%) to see what works best for your specific use case.
  4. Combine with other metrics: Combine scroll depth data with other metrics like time on page, bounce rate, or conversion rates to gain a deeper understanding of user behavior.

By following these steps and best practices, you’ll be able to track scroll depth for different sections of your page using Google Tag Manager, providing valuable insights into user behavior and helping you optimize your content for better engagement and conversions.

Categories: Digital Marketing