The Handy Guide to Setting Up Scroll Depth Tracking

How would your marketing approach change if you knew that 80% of your users were only scrolling 25% of the way down your homepage? User falloff can happen for a number of reasons. Perhaps your content isn’t relevant. Maybe it’s too long, or just flat-out boring. Whatever the reason, scroll depth tracking is a great way to find out just how much of your content is actually being seen by your users.

Scroll depth tracking enables you to measure user engagement with your content. It can be implemented on every page of your website, and allows you to track the percentage of users that meet certain scroll depth thresholds on a given page, such as baseline(0%), 25%, 50%, 75% and 100%. This blog post will walk you through a simple step-by-step process for getting scroll depth tracking set up on your own site, using Google Tag Manager (GTM) and Google Analytics (GA).

Google Analytics has many powerful features straight out of the box. However, with just a little tweaking, you can easily augment Google Analytics to capture additional data, which in turn allows for deeper, more meaningful insights. Setting up scroll depth tracking is one of these easy augmentations.

Unfortunately, Google Analytics doesn’t track user scroll depth by default. The good news is that scroll depth tracking can be implemented without too much of a fuss by using Google Tag Manager. The next part of this post will walk you through 18 easy steps to getting it up and running in no time.

NOTE: Before we begin, this guide will assume that you already have jQuery set up and are running Universal Analytics (UA) through Google Tag Manager. If you don’t already have jQuery you can download and host it yourself or add a simple code snippet where Google’s CDN will host it for you without much of a hassle. To learn more, check out W3School’s guide to jQuery.

Let’s get started on how to setup scroll depth tracking.

Step 1:

Open GTM and click “Add a new tag”:

Step 2:

Now select “Custom HTML Tag”:

Step 3:

Copy and paste the following code under “Configure Tag”. Don’t forget to include <script> </script>! Click continue after adding the code. To learn more about the finer points of the Rob Flaherty’s code go to: http://scrolldepth.parsnip.io/ where he explains his code in detail.

NOTE: This code will only work if you have Google Analytics (UA) setup via GTM.

Step 4:

You’ll now see a section 3 on your screen entitled “Fire On”. Under this section select “All Pages” or “Some Pages” depending on your preference for which pages you’d like to have scroll depth tracking be applied to. For the purposes of this guide, we’ll be going with “All Pages”. Hit “Create Tag” at the bottom and you’ll be prompted to name your tag. I’d suggest that you name it something appropriate (e.g. Scroll Depth Tracking). Now click “save”.

Step 5:

Now, in the upper right-hand corner of GTM, next to the “Publish” button, click on the arrow to the right and select the “preview and debug mode” as illustrated here:

Step 6:

Now go to your website (or refresh your site’s page) and the display console from GTM should appear at the bottom of your page as shown below: 

Step 7:

Off to the left on the display console under “Summary” select “ScrollDistance” and then click on “Data Layer” on the upper middle portion of the display console. You should see Data Layer values such as “eventCategory”, “eventAction”, and “eventLabel”:

Step 8:

Now let’s test things out by scrolling down on one of the pages on your site. If all goes well, additional ScrollDistance events should fire on the left portion of the Display Console (under Summary).

Click on one of these “ScrollDistance” events and it will tell you how far you have scrolled down the page by again clicking on it (a newly populated ScrollDistance event) and then going to “Data Layer” at the top portion of the display console and then looking at the eventLabel, which will state baseline (0%, 25%, 50%, 75%, 100%).

In the screenshot below you can see the scroll depth was measured to be at 50%:

Once you see a percentage under eventLabel in the display console, data is being successfully transmitted to the data layer. Now we need to transfer that data to GTM. To do this we will create three variables within GTM. Each of these will be based on the Data Layer Value names we previously saw in the GTM Display Console, which are the following: eventCategory, eventAction and eventLabel.

The following steps show how to step it up.

Step 9:

Now go back to GTM and on the left panel select “Variables” as illustrated below:

Scroll down to “User Defined Variables” at the bottom and select “New” and select “Data Layer Variable”:

Step 10:  

Under “Variable Name” we need to link a few value names we saw earlier in the display console in the data layer. We will need to create three new data variables in total.

Name the first one eventCategory  - just like we saw before in the display console, and click “Create Variable”. When prompted to name it again, name it “eventCategory”.

Remember, we are drawing these values directly from the Data Layer within the Display Console so the names must be identical when creating our variables.  

Step 11:

Now it’s time to create two more variables, eventAction and eventLabel. These were the other important value names listed our data layer under the display console as seen below: 

Repeat steps 9 and 10 and create two new variables, one for eventAction and one for eventLayer.

Step 12: (optional)

Now with all three variables in place, the data layer should soon be connected to GTM. Go to preview and debug mode in GTM and be sure to refresh your site’s page. Select a ScrollDistance event and look under the variables tab to verify eventCategory, eventAction and eventLabel are all in place.

Step 13:

The last piece of the puzzle is to connect your scroll depth reporting with Google Analytics.

In order to do so go back to GTM and select “New Tag”, just like in the very first step.

Select “Google Analytics tag” and choose “Universal Analytics” (not “Classic Analytics”).  Hit “continue” and enter your UA tracking ID (found by going to Google Analytics and finding your tag that starts with UA when you’re selecting your GA account). Name this tag “GA Event Scroll”.

Under Track Type, change from the default “Page View” to “Event”:

Step 14:

Next, under Tracking Parameters, click on the button to the left of the of each input field and select the appropriate corresponding event label. For example - for Category, select eventCategory so it reads {{eventCategory}} and the same for Action and Label as shown below.

Also, be sure to set “Non-Interaction Hit” to True so as not to affect your bounce rates.

Step 15:

Click “Continue” and you’ll reach section 3: “Fire On”. Select the “More” button and then click the red “new” button in the upper left corner and select “Custom Event” from the following screen: 

Step 16:

For the “Event Name” input under “Fire On”, enter exactly: “ScrollDistance” (as that was the event name displayed within our Display Console).

Select “Create Trigger” and when prompted to name it, type “ScrollDistance event”.  Now hit “create trigger” at the bottom of the page. When prompted to enter a name for the tag, name it something appropriate like “ScrollDistance event” and create the tag.

Step 17:

Google Analytics should now be reading your scroll depth data. To check, in GTM go to preview and debug mode again, refresh your site’s page and scroll down in order to fire events.

Then go to GA and under Real-Time Reporting select “Events”. You should now be seeing scroll depth data coming in.

Scroll Depth data will appear within 48 hours under Behavior > Events > Overview if you would like a more detailed breakdown of your scroll depth percentages.

Step 18:

Don’t forget to hit publish in GTM to ensure none of your work was in vain.

What next?

With scroll depth tracking all set up you’ll be able to gain insights into just how much content your users are viewing. If you find that a significant amount of your users are reaching that 100% scroll threshold, great. However, if you find that many users aren’t making it that far, it may be time to rethink how to better present your content to get your users to take the action(s) you want them to. To learn more about how to keep users engaged with your content I highly recommend checking out Dan Petrovic’s post: “How to Write for the Web - a New Approach for Increase Engagement”.

Get blog posts via email

About the author

Clay Wyant

Clay came to Distilled after previously operating a direct mail marketing business and formerly pursuing a career in maritime law as a licensed attorney. His hobbies include cooking Cajun & Creole dishes and reading up on ancient philosophy from...   read more