How to Track & Analyze Scroll Depth in Google Analytics

April 10, 2014      Joe Christopher      Google Analytics

Sooner or later, you’re going to want to know how deep users scroll on a page.

Wouldn’t it be great if you could track vertical scroll percentage of page and view it easily in Google Analytics? Good news…in this blog post;

• we’ll educate you on the virtues of tracking scroll depth,
• show you how to setup scroll tracking,
• create custom scroll tracking reports,
• create custom segments for actionable analysis,
• and most importantly, we’ll give you the code.

First…Some Clarifications

• Yes, we realize there are tools that exist that can help you with this question, such as Crazy Egg’s scrollmap feature or ClickTale’s scroll reach heatmaps. These tools are great, and we use them frequently. However, some clients don’t have access to these tools, and we want to see this data inside Google Analytics. When you have the data in one place (within Google Analytics), it is easier to create segments and see how scroll impacts conversion, engagement and other on-site behaviors.
• If you’re using Adobe Analytics (aka SiteCatalyst), the getPercentPageViewed plugin is your best tool. The concept is very similar and the data uses provided below are applicable in SiteCatalyst as well.
• You should also check out Justin Cutroni’s great post on measuring on-page scroll/content tracking.  This is a valuable, but different technique from what we are discussing in this blog post. Justin’s post is about firing events when a user gets to an area of the page. This blog post is about measuring the maximum scroll percentage of that user and for a specific page. This leads to simpler, more actionable reporting.
• This method of scroll depth tracking is easily used with Tag Management.

Why track scroll?

Being an analytics geek, I love data (all kinds). I recently purchased a device called Automatic that connects to my car and collects data from my vehicle’s data port. It connects to my phone and a beautiful app shows me data about my driving behavior.

To illustrate the value of scroll tracking, let’s take the Automatic website as an example. Go ahead and open the site so that you can see how long of a page it is.

Welcome back…it sure is a long page, eh? Great design and lots of important information, but it (currently) measures in at 5,887 pixels tall.

If we knew what percentage of the page users saw, what could we learn? Using the example of the Automatic website, here are some examples:

• Do users that see more than 90% of the page convert more than those that don’t? My intuition says that is true, but I want the data. If they see more than 90% of the page, that means they’ve seen the parking location feature. Perhaps this data could lead to an A/B test to determine if the parking feature should be moved up so that the users that view more than 50% of the page see this feature.
• Of the users that view the blog after viewing the home page, what percentage of the home page did they see?
• Do users that watch the video(s) tend to view the entire page? Hint, these are your highly engaged (methodical) users and want to know everything before they purchase (that’s me).
• If there was a call to action at the bottom of the page, what percentage of our users see it and should I consider moving it up higher?

Okay, these are just a few examples of conversion rate optimization questions you could ask. Guessing that you are starting to see the value in tracking this scroll depth data for all your site content types (e.g. home page, category pages, detail pages, blog posts), right?

Grouping Scroll Tracking Data

If you want to ensure this data is actionable, we recommend tracking by quartiles, quintiles, or at the most deciles. Otherwise, if you track too small an increment, you will have a hard time spotting trends in your data. In determining what is best for you, make sure you consider factors such as your site’s volume of traffic, typical page length, and whether or not you have any consistency in logical content sections.

Scroll Depth Tracking by Quartiles

•  (0%), 25%, 50%, 75%, and 100% scroll length

Scroll Depth Tracking by Quintiles

•  (0%), 20%, 40%, 60%, 80%, and 100% scroll length

Scroll Depth Tracking by Deciles (Default)

•  (0%), 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90%, and 100% scroll length

The Code & How it Works

We’ve written a plugin that is very easy to implement (in fact, if you are using a Tag Management Tool, you could get this implemented in a matter of minutes). We do recommend that you place this in its own tag within your tag management solution like GTM (Google Tag Manager).

There are no JavaScript framework requirements (you don’t need jQuery for this) and we’ve tested this across all major browsers.

You are welcome to take and modify the code to fit your needs, but I think you’ll find that what we’ve provided is quite flexible.

Here are the details on what it does (in case you are interested):

• When the page loads, we immediately capture the visible position of the page and calculate the percentage of the page that is visible.
• When the user scrolls and stays in position for a certain duration (this is configurable), then we do the same and capture the visible percentage of the page.
• At any point that this percentage is calculated, we record the numeric value in a cookie only if it is greater than the previously recorded value.
• Also recorded with each cookie write is the page URI. This is important and is explained further below.
• This plugin has configuration options (covered below) and a callback method to grab the maximum scroll depth percent on a page at any time.
• We provided code examples/best practices to grab the result and output it to Google Analytics.

First, the plugin code. We host and link to this on BitBucket to keep it current and up-to-date with the latest changes.  Please download or pull the repo from our BitBucket.

Next, the code to grab the values (can be executed at any time):

bamPercentPageViewedCallback = bamPercentPageViewed.callback();

if(bamPercentPageViewedCallback !== false)
{
//send ga data
ga('set', 'dimension6', bamPercentPageViewedCallback.documentLocation);
ga('set', 'dimension7', bamPercentPageViewedCallback.scrollPercent.toString());
}

Finally, the initialization code (should be called after the above code):

bamPercentPageViewed.init({
percentInterval : '10'
//other options....
});

Here’s the list of configuration options in the init (all are optional):

percentInterval: '10', //the increment at which to bucket the percentage value (10, 25, etc)
cookieName: '_bamPercentPageViewed', //use if you want to name the cookie something else
trackDelay: 1500 //The delay (in ms) before a scroll position is considered stable (reduce scroll bouncers)

Some Important Things to Know

The default behavior of this plugin will be to capture the max scroll percentage value on the subsequent pageview. This means that if the user exits on the page in question, we won’t capture data on the percent of page viewed. To combat this, you could hook in the callback call with your external link click tracking function to set a custom dimension with an event when the user clicks on an exit link.

In the report data, we capture the previous page URI so that you can correlate percent viewed (since we send the data on the subsequent pageview). This also gives you a dimension of data that shows the previous page URI of any hit-level dimension.

If you use a technology, such as ajax that doesn’t fire a pageview or execute the script each time, you can simply grab the callback data and determine when you want to send the data.

This plugin works great in Classic and Universal Google Analytics. In fact, it works with pretty much any analytics tool since it is pure JavaScript with a flexible output (yes, you could use this in Adobe SiteCatalyst if you’d like).

I’m Capturing the Data, Now What?

Custom Report to View Data

Let’s say you decided to use the labels “Previous Page” and “Scroll Percentage” for your custom dimensions. How do you get to the data?

Simple, build a custom report. Build from the screenshot below:

(Note: Keep in mind that we happened to use custom dimension #6 for “Previous Page” and custom dimension #7 for “Scroll Percentage” in our example, but this may vary for your implementation.)

Scroll Depth Reporting Example

Using the Scroll Depth Custom Report that we just showed you how to create; you will select a page (e.g. www.domain.com/services) and then you will see a detailed scroll percentage breakdown report like this.

(Note: Change your graph type to “Performance” in order to get the bar chart with percentages (highlighted on above screenshot). Check out this post for more on Google Analytics graph presentation types.)

Segmenting Visits by Scroll Depth

The next thing I wanted to do was create a segment of visits that saw the /about page and also scrolled to at least 50% of that page. This is surprisingly difficult in Google Analytics since hit-level segmentation is not possible (only visit and user level). If this is important, you need to combine the data into a single dimension. In Universal Analytics, you can simply create a custom filter to do this (or you could edit the code).

Here’s the custom filter for this, where the output would be something like ‘http://www.mydomain.com/about:50’.

From here, I could create a segment with a RegEx matching the /about page and that the number is 50 or above. Here’s that RegEx: .*/about:(5|6|7|8|9|10)0$

What’s Next?

We hope you use this scroll depth tracking data to make more informed decisions. If you need help understanding the data and taking the next step (or implementing this tracking code), we are available to help.

Do you have ideas for the next plugin we should write for the analytics community? If so, leave a comment below.