How To Track Page Scroll Depth with Google Tag Manager

Mostly likely, you’ve used Google Tag Manager to implement your basic tags, but it allows you to implement a wide variety of useful tools to help you make better marketing decisions. This post assumes you have some basic working knowledge of GTM and already have your account set-up. If not, this Beginner’s Guide will help you get started.

Why You Should Track Scroll Depth

We recently implemented page scroll depth calculators for two of our clients for two very different reasons.

For one, we were about to launch a variety of content marketing efforts as part of a top of funnel strategy. We would then remark these folks with another offer, but only to those who were deemed “interested enough” based on how far they reached in the ungated content.

For the other, we were seeing a large number of session durations at 0 seconds for an effort in Analytics. If users don’t take any trackable action in Google Analytics beyond landing on the page, they are counted as zero-second duration. We implemented scroll tracking as a way to have an additional action beyond Analytics just registering the pageview.

Here are a few other reasons how you could use this metric:

  • determine the extent to which your blog posts are being read
  • see where viewers drop off on your product pages
  • know where viewers stop viewing content on your landing pages
  • differentiate which factors make a difference to page depth engagement (examples: device, time of day, location)

How to Track Page Scroll Depth Using Google Tag Manager

Step One: Make Sure Scrolling is Enabled in the Variables Menu

We need to tell GTM that we want to start capturing scroll depth data.

  1. In GTM, select “Variables” on the Left Side column below Triggers
  2. Select “Configure”
  3. Go down to Scrolling and select all of the options

Here are what each of these variables are:

  • Scroll Depth Threshold measures how deep user scrolls
  • Scroll Depth Units determines whether you measure the scroll by percentage or pixels
  • Scroll Direction lets you indicate if you want to measure vertical or horizontal scrolls

Step 2: Create Your Scroll Depth Trigger

This step identifies scroll depth trigger that Analytics will use as part of the event we’ll create in the next step.

  1. In GTM, click on “Triggers”
  2. Click “New”
  3. Name the Trigger in a way that makes sense to you. I’m choosing “Scroll Depth Trigger”
  4. For your trigger type, go to User Engagement, then select “Scroll Depth”
  5. Decide if you want Vertical or Horizontal scrolling captured. In most cases, you’d want Vertical only.
  6. Select if you’d like to measure the scrolling depth in pixels or percentages. I believe most of you will want percentages.
  7. You have to input the percentage values you’d like calculated which you might like to vary depending on the page length and how much information you really want/need. A few ideas (from most in depth to least) include:
    1. 0,10,20,30,40,50,60,70,80,90,100
    2. 0, 33, 60, 66, 75, 90, 95
    3. 0, 25, 50, 75, 90
    4. 0, 33, 66, 95
  8.  Next, decide when you want to the trigger to start calculating
    1. Container Load starts ASAP
    2. DOM Ready starts after DOM is ready to be parsed
    3. Window Load starts after the page content has started to load
  9. Select if you want the scroll depth to be captured on all pages or only select pages. If the latter , then you’ll also enter in parameters to define when the trigger should fire. “All Pages” is your site-wide click trigger.
  10. Hit “Save”

Step 3 :  Create Your Scrolling Event Trigger

  1. In GTM, click on “Tags”
  2. Click “New”
  3. Name your tag in a way that makes the most sense to you – I’m using “Scroll Depth Tracking”
  4. For Tag Configuration, select “Universal Analytics”
  5. For Track Type, pick “Event”
  6. For Category, this depends on how you want this to appear in the events in Analytics. If you have other similarly themed tags already, you might want to have all your tags grouped into one “Engagement” category. For this post, I’m going to have “Scroll Depth” be its own category.
  7. For Action, this again can vary and you should try to be consistent with what you’ve already set-up for other triggers in your account. I am going to use the scroll depth as my action by click on the lego-like icon and choosing “Scroll Depth Threshold”
  8. For Label: Click on the lego-like icon and select “Page Path” so you can see results for different pages on your site (noting you might want a different set-up if you selected above to only have the tag fire on a specific page)
  9. Non-Interaction Hit determines if you want the event to impact session calculation, including bounce rate measurement. Choose “True” if you don’t want these custom event triggers to count and “False” if you do want them to count. There are arguments for both.
  10. In the Google Analytics Settings Box, select the drop down. If you don’t have a Tracking ID set-up, you’ll need to create one:
    – Click “New”
    – Name the Untitled Variable. I think “Analytics ID” makes sense
    – Enter in your Universal Analytics Account number. You can find this in Google Analytics. It’s the number that begins with “UA-“ and a series of numbers.
    – Leave “Cookie Domain” as “auto”
    – Click “Save”. This takes you back to the Tag Screen
  11. Almost there! Now we must add our button trigger to this tag. Click on the trigger icon below
  12. Select your scroll depth trigger
  13. Hit “Save”
  14. Publish your work.

Step 4 :  Go to Preview Mode to Make Sure It Works

  1. Next, in the GTM Workspace tab, click the Preview button. This will allow us to peak in on which Tags and Triggers are firing on our website.
  2. Go to your website. You should see a GTM box on the lower portion of your site.
  3. Scroll down a bit and you should start to see Scroll Depth appear on the left and Scroll Depth Tracking listed under the Fired Tags.
  4. Click over to Data Layer to see how your scroll depth is being captured.

    Step 5 :  See How Your Scroll Depth Event Looks in Google Analytics

    1. Login to Google Analytics
    2. Navigate to Behavior > Events > Top Events.
    3. If you just launched scrolling today, make sure you set your time-frame for today.
    4. Add Event Action as a secondary dimension to see the average depth across your entire site.
    5. You could also go to Behavior > Events > Pages and navigate to your page of interest. Again, add Event Action to see the depth for this particular page.

    Keep Tracking Scroll Depth

    That’s it! You’re all set to see how far most people scroll on a given page or an average throughout your site. Happy scroll depth tracking!

    Which pages are you most interested in tracking scroll depth? How will you be using scroll depth to impact your marketing decisions? Comment below to share!