Page Depth Tracking and Scroll Depth Trigger in Google Analytics

Depending on the types of content your website produces, you may be interested in measuring scroll depth tracking on your pages. It can be helpful to determine if visitors to your site are actively engaged in reading your content, or identify pages where your call-to-actions are hidden below average scroll depth.

How To Implement Scroll Depth Tracking With Google Tag Manager

The Scroll Depth Trigger

Within the last few years Google Tag Manager has implemented a native Scroll Depth Trigger to help users fire events and JavaScript at certain points in a user’s engagement. This can help you measure how far down the page your users scroll, or let you show users a popup or toast once they’ve reached a certain point on your page.

To set up a Scroll Depth Trigger, open Google Tag Manager and navigate to Triggers >> New. Give your new trigger a name (I’ve called mine “Scroll Depth Trigger”), and select the type as Scroll Depth.

Now you have the option to fire this trigger at different intervals. The Scroll Depth Trigger can be fired multiple times on a single page, either by percent depth or pixel depth. Pixel depth can be helpful if you have a static element that may appear at the same point in the page, regardless of content length. For our purposes, we’ll be using Percent Depth. We want to know when a user has seen 25%, 50%, 75% or the entirety of our content.

Tip: Don’t set too many intervals for your depth trigger. Your Google Analytics may be free, but there are daily and monthly limits you should be aware of. Also consider using the “Some Pages” option to limit where these metrics are collected.

Finally, I’ve chosen to enable the trigger on Window Load. Here’s what the trigger configuration looks like:

Google Tag Manager Scroll Depth Trigger

Scroll Depth Variables

Once you’ve saved your new Scroll Depth Trigger, you’ll be able to see these events start firing in the GTM Debugger when you’re in preview mode. Because Scroll Depth is out-of-the-box in Google Tag Manager, it will start setting some defined variables for you. Make sure these are enabled in GTM by going to Variables >> Configure and selecting the Scroll variables.

scroll depth gtm variables

Here’s what they do:

  • Scroll Depth Threshold: corresponding value to your trigger intervals. 25 = 25%, 50 = 50%, etc.
  • Scroll Depth Units: The type of interval you selected, either “percent” or pixels”
  • Scroll Depth Direction: “horizontal” or “vertical”

The Page Depth Event Tag

Finally, we need to create a tag to send an event to Google Analytics with our page scroll data. Navigate to Tags >> New. Name this tag something along the lines of “Page Scroll Depth” and select Universal Analytics as the tag type. Track type should be Event.

Next, you’ll configure the pieces of your event in a way that corresponds with your page goals, and you’ll use the variables we enable previously to set these values. We want to be able to aggregate these by page, so to I set {{Page Path}} as my action variable. Notice I’ve tacked on the “%” symbol to the Label, because the threshold is just an integer.

I’ve left the Value blank for now, but you could potentially store the Scroll Depth Threshold here, too, and run calculations in a conversion event if you have solid business case for doing so.

Tip: To preserve accurate bounce rates and prevent rogue sessions with no landing pages, set the Non-Interaction Event value to False.

Once you’ve added your Google Analytics property, either through the native Google Analytics Setting or an override variable, set the Trigger tot he Scroll Depth trigger we created earlier.

View Scroll Depth Reports In Google Analytics

With your trigger, variables, and tag fully set up and published in the Google Tag Manager, you’ll begin seeing the events populate in Google Analytics.

To view this report in GA, navigate to Behavior >> Events >> Top Events. You’ll soon notice “Scroll Depth” as a category. Clicking into this, you’ll see the pages that were visited and scrolled on (listed under Actions). Clicking any of these pages will take you to a breakdown of scroll depths:

Leave a comment

Your email address will not be published. Required fields are marked *

%d bloggers like this: