How to track custom scroll depth in GA4 using GTM (step-by-step)

Why Track Scroll Depth? The Hidden Value

Simply knowing someone landed on a page isn't enough. You need to understand if they engaged with the content presented. Scroll depth tracking helps you:

• See Beyond the Pageview: Understand if users are consuming content below the initial screen view ("below the fold").
• Measure True Engagement: Gauge interaction levels on long-form articles, landing pages, or product pages where key information might be further down.
• Validate Content Effectiveness: Determine if your content is compelling enough to keep users scrolling.
• Identify Visibility of Key Elements: Know if users are reaching important Calls-to-Action (CTAs), forms, or information located lower on the page.

Key Benefits of Scroll Depth Tracking

Implementing scroll depth tracking unlocks several advantages:

• Better Content Performance Analysis: Identify your most engaging pages (high scroll depth) versus those that users abandon quickly. Correlate scroll depth with other metrics like time on page or conversion rates.
• Optimized Page Layout & CTAs: Make data-driven decisions about where to place crucial elements. If most users only scroll 50%, placing a key CTA at 80% down might be ineffective.
• Improved User Experience: Discover pages where users consistently drop off early. This could indicate poor content structure, slow loading elements below the fold, or content that doesn't match user expectations.
• Enhanced Audience Segmentation: Create valuable GA4 audiences based on engagement levels (e.g., users who scrolled more than 70% on key pages) for targeted analysis or remarketing campaigns.
• Meaningful Micro-Conversions: Treat reaching a significant scroll threshold (like 70% or 90%) as an important indicator of interest – a valuable micro-conversion on the path to your main goals.

GA4 Enhanced Measurement vs. Custom GTM Tracking

It's worth noting that GA4's built-in "Enhanced Measurement" automatically tracks scrolls that reach the 90% threshold of a page. This is great for basic engagement tracking.

However, using Google Tag Manager allows for more flexibility:

• Track Custom Percentages: You might want to know who reaches 25%, 50%, or, as we'll demonstrate, 70%.
• More Control: GTM gives you finer control over how and when the tracking triggers.
• Richer Data: Easily add extra parameters to your scroll events for more context in GA4.

Step-by-Step Guide: Tracking 70% Scroll Depth in GA4 via GTM

Let's set up tracking for when a user scrolls 70% down any page.
 

Prerequisites:

• Google Tag Manager (GTM) is installed on your website.
• You have a Google Analytics 4 (GA4) property and know your Measurement ID (e.g., G-XXXXXXXXXX).

Step 1: Enable Built-In Scroll Variables in GTM

1. In your GTM container, navigate to Variables.
2. Under "Built-In Variables," click Configure.
3. Scroll to "Scrolling" and ensure these are checked:
   • Scroll Depth Threshold
   • Scroll Depth Units
   • (Optional but recommended) Scroll Direction

Step 2: Create the Scroll Depth Trigger

1. Navigate to Triggers and click New.
2. Name it clearly (e.g., Trigger - Scroll Depth 70 Percent).
3. Click "Trigger Configuration" and choose type Scroll Depth (under "User Engagement").
4. Configure:
   • Select Vertical Scroll Depths.
   • Select Percentages.
   • Enter the percentage: 70.
   • Enable on: All Pages (Window Load - gtm.load).
5. Click Save.
    

Step 3: Create the GA4 Event Tag

1. Navigate to Tags and click New.
2. Name it clearly (e.g., GA4 Event - Scroll 70 Percent).
3. Click "Tag Configuration" and choose type Google Analytics: GA4 Event.
4. In the Measurement ID field, enter your GA4 Measurement ID (starting with G-).
5. For Event Name, use snake_case (e.g., scroll_depth_reach).
6. (Recommended) Add Context with Parameters:
   • Under Event Parameters, click Add Parameter.
   • Event Parameter: scroll_percentage
   • Value: Click the {{}} icon and select {{Scroll Depth Threshold}}.
   • Click Add Parameter again.
   • Event Parameter: page_location
   • Value: Click the {{}} icon and select {{Page URL}}.
7. Under "Triggering," select the trigger created in Step 2 (Trigger - Scroll Depth 70 Percent).
8. Click Save.
    

Step 4: Test Your Setup

1. Click Preview in GTM (top right). Enter your site URL and connect.
2. On your site (in the preview tab), scroll down any page past the 70% mark.
3. Check the GTM debug console (tagassistant.google.com). Find the Scroll Depth event in the left-hand summary. Click it and verify your GA4 Event - Scroll 70 Percent tag fired.
4. (Optional) Check GA4's DebugView (Admin > DebugView) to see the scroll_depth_reach event arrive in near real-time.

Step 5: Publish Your Changes

1. If testing is successful, go back to GTM.
2. Click Submit, choose Publish and Create Version.
3. Add a descriptive name (e.g., "Implement 70% Scroll Tracking") and click Publish.

Analyzing Your Scroll Data in GA4

Once data starts collecting (allow 24-48 hours), you can find your new event:

• Go to Reports > Engagement > Events in GA4.
• Look for your event name (scroll_depth_reach).
• Click on the event name to see details, including which pages (page_location) triggered the event most often.
• For deeper analysis, use the Explore section in GA4 to build custom reports correlating scroll depth with other dimensions like Landing Page, Device Category, or Traffic Source.

• Consider registering scroll_percentage and page_location as custom dimensions (Admin > Custom definitions) for easier reporting.

   

Scroll depth tracking is a simple yet powerful technique to understand user engagement beyond the surface-level pageview. By implementing custom scroll tracking using GTM, you gain valuable insights into how users interact with your content, enabling you to optimize page layouts, improve user experience, and ultimately achieve your website goals more effectively. Stop guessing if your content connects – start measuring scroll depth today!