How do you use Google Tag Manager to track scroll depth on your website? A Step by Step Guide

How do you use Google Tag Manager to track scroll depth on your website? A Step by Step Guide

Tracking scroll depth on your website helps you understand how users are engaging with your content. Google Tag Manager (GTM) makes it easy to track this metric without editing your site’s code directly. Here’s a step-by-step guide for tracking scroll depth using GTM:

  1. Log in to Google Tag Manager: Sign in to your GTM account at https://tagmanager.google.com/ and select the container associated with your website.
  2. Enable built-in scroll variables: Click “Variables” in the left-hand menu, then scroll down to “Built-In Variables” and click “Configure.” Enable the “Scroll Depth Threshold,” “Scroll Depth Units,” and “Scroll Direction” variables by checking the boxes next to them.
  3. Create a new trigger: Click “Triggers” in the left-hand menu, then click the “New” button. Give your trigger a descriptive name, such as “Scroll Depth Trigger.”
  4. Configure the trigger: Click on “Trigger Configuration” and select the “Scroll Depth” trigger type. Choose whether you want to track scroll depth based on percentages, pixels, or both. Enter the desired threshold values (e.g., 25, 50, 75, and 100 for percentage-based tracking). If you want to track both vertical and horizontal scrolling, check the “Track both” box.
  5. Save the trigger: Click “Save” to finish creating your scroll depth trigger.
  6. Create a new tag: Click “Tags” in the left-hand menu, then click the “New” button. Give your tag a descriptive name, such as “Google Analytics – Scroll Depth.”
  7. Choose a tag type: Click on “Tag Configuration” and choose the tag type that corresponds to your Google Analytics setup. For Universal Analytics, select “Universal Analytics.” For GA4 (Google Analytics 4), select “Google Analytics: GA4 Event.”
  8. Configure the tag:

    a. For Universal Analytics: Enter your Google Analytics Tracking ID, select “Event” as the track type, and set the event category, action, and label using the built-in scroll variables:

    • Category: “Scroll Depth”
    • Action: “{{Scroll Depth Threshold}}%”
    • Label: “{{Page Path}}”

    b. For GA4: Enter your Measurement ID, set the event name (e.g., “scroll_depth”), and configure the event parameters using the built-in scroll variables:

    • Parameter Name: “scroll_percentage” Parameter Value: “{{Scroll Depth Threshold}}”
    • Parameter Name: “page_path” Parameter Value: “{{Page Path}}”
  9. Choose the trigger: Click on “Triggering” and select the “Scroll Depth Trigger” you created in step 5.
  10. Save your tag: Click “Save” to finish creating your scroll depth tag.
  11. Test your setup: Before publishing your changes, use the “Preview” mode in GTM to test your scroll depth tracking on your website. Make sure the tag fires when users reach the specified scroll thresholds.
  12. Publish your changes: If your scroll depth tracking works correctly in Preview mode, click “Submit” in the top right corner of the GTM interface to publish your changes and make your tracking live on your website.

By following these steps, you can use Google Tag Manager to track scroll depth on your website and gain valuable insights into user engagement with your content. This information can help you optimize your site’s layout, content placement, and overall user experience.

Share the Post:

More How-To Guides