Analytics and Search Marketing Tips

How to Track & Analyze Scroll Depth in Google Analytics

How to Track & Analyze Scroll Depth in Google Analytics

April 10, 2014           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.

Automatic Web Site Long Page Scroll

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:
Scroll Percent Custom GA Report

(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.

scroll depth custom report google analytics

(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’.

Combine Scroll and Previous Page Custom Filter

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.

 


Share this Post

  • Mayo Racek

    Hello, when I downloaded the file where should I put it in google tag manager or in google analytics? I am sorry for this question just I think its brilliant solution and would like to use it, but do not know how to implement it to the site.

    Kind regards and pardon me the question

  • @mayoracek:disqus It really depends on your setup. If using GTM, you’ll want to add the core code into its own tag and make sure to load that tag before your GA code. You’ll have to integrate with your existing GA code to set the custom dimensions. Once I have some time, perhaps I can edit this post and provide more of a step-by-step for GTM…

  • Michael Schiano

    Agreed. Would love to see more of a step-by-step solution.

  • James Varga

    I see this fires – in the example code – in an ‘onload’ event. for a single page website format – how do you get it to fire when you scroll?

  • Sherwood_Botsford

    Very cool. I think this will be a win for me when I can figure it out.

    One thing I’d want to do is to sort on percentage rather than on views. (left column in report is in order) This can indicate where the reader lost interest.

    On potential problem: Comparing pages with different lengths. If a page is only 1 screen high, then all viewers that stay on it more than N seconds count as 100%. If you are trying to measure “Interest in page” you want some sort of screen count. E.g. if the page is 5000 pixels long, and the user’s screen is 800 pixels long, then the page is 6+ screens deep. You want to record how many screens the user loaded. This may be of interest when comparing desktop and mobile viewers.

    One other thing: I can get all sorts of numbers about my site. But it’s not clear what they mean. I’d love to see a series of blog entries about types of sites, and how to interpret the analytics.

  • onc dashboard

    This is great! I wonder, is it possible to set it up so that say 25% is a non interaction event and everything above 25% counts as an interaction? I’m thinking about bounce rate here.

  • Jenny Lomax

    Hey, Joe, I don’t suppose you made any progress on the GTM guide for Scroll Depth, did you?

  • designerfps

    Hello Joe,

    I ran into an issue when I was creating my custom report in Google Analytics. I can’t find both Previous Page and Scroll Percentage in the Dimension Drilldowns. How do I make them appear?

    Thank you.

  • Christoffer Larsen

    I got the same issue – it would be great to know the solution for this

  • Andrew Lopez

    Thanks for the insightful article.

    Quick question, how do you determine what part of the site is 10%, 25%, etc.?

  • Silver Ringvee

    try pasting this in your console (needs jQuery):

    markerHeight = $('html').height() / 4;
    $('body').append('<span id="find-0-25" class="marker" style="top: 0; background-color:#4984EF">0-25%</span><span id="find-25-50" class="marker" style="top:' + markerHeight + 'px; background-color:#1BB15B;">25%-50%</span><span id="find-50-75" class="marker" style="top:' + markerHeight * 2 + 'px; background-color:#EDB908">50%-75%</span><span id="find-75-100" class="marker" style="top:' + markerHeight * 3 + 'px; background-color:#CF343A;">75%-100%</span>');
    $('.marker').css({'height': markerHeight, 'opacity': .4, 'display': 'block', 'width': '100%', 'position': 'absolute', 'font-size': '50px', 'color': 'black', 'z-index': '99999999999'});

  • David

    You’ll need to set up the custom dimensions first:
    Go to Admin > Property > Custom Definitions > Custom Dimensions and create two new custom dimensions with names “Previous Page” and “Scroll Percentage”. These will be assigned an index (eg 1 and 2) which you can then place in the sample GA code, eg:


    ga('set', 'dimension1', bamPercentPageViewedCallback.documentLocation);
    ga('set', 'dimension2', bamPercentPageViewedCallback.scrollPercent.toString());

  • Miloš Milosavljević

    So to check:

    I would place this in GTM as a new tag to fire before the GA Universal code

    bamPercentPageViewedCallback = bamPercentPageViewed.callback();
    if(bamPercentPageViewedCallback !== false)
    {

    And place this in GA proper as custom dimensions?

    //send ga data
    ga(‘set’, ‘dimension6’, bamPercentPageViewedCallback.documentLocation);
    ga(‘set’, ‘dimension7’, bamPercentPageViewedCallback.scrollPercent.toString());
    }

 

Digital Analytics Blog

We're here to help with tips and insight on the following topics:

Subscribe to RSS


Optimize your website and marketing campaigns

Get a constant flow of Google Analytics help and digital marketing tips, case studies and more from Google Certified Partner Blast Analytics & Marketing.




Connect with Blast Analytics & Marketing