Track How Far Your Users Scroll in Google Analytics

January 8, 2013

Update 09/01/13: Improved script to exclude MSIE 5-8 as they don’t play nice with the jQuery viewport stuff I’m using to calculate scroll depth. At least it’s possible to filter these out of your reports if you do get dodgy browsers with scroll depth >100%.

One of the most useful reports in tools like Mouseflow, ClickTale, Crazy Egg (?) and the like is the “Scroll Reach” report.

It tracks how far people scroll down a page – fancy that! As simple and useful as this metric is, it’s a forlorn metric as far as Google Analytics is concerned … but I hope I can cheer you up.

I popped together a little script which gives us a rough idea about the scroll depth of visitors as well as the height of their browser viewport in pixels. It’s free, easy to install and you can access all data from your cosy little Google Analytics account.

Win, win and win.
 

How it works

It’s a little different to other scroll depth trackers – such as Justin Cutroni’s excellent engagement tracking script (I highly recommend checking it out). When the page loads, the window view port size is calculated and as a visitor scrolls down the page, it calculates the lowest point that you can see on the page and stores a cookie. When they navigate to the next page, the scroll reach is transmitted to GA using Events Tracking.

I’ve used jQuery as it appears to be compatible across browsers unlike the various plain JavaScript methods I looked at. I also used Scott Andrew’s Cookie functions from the Quirksmode website for reading/writing cookies. All data is collected in Google Analytics and is visible in the events tracking section of the website.

Sure it’s not perfect. For one, it’s doesn’t take into account exit pages (just like the time on site metric) and tabbed browsing is still iffy. Luckily, it will give you an accurate enough indication of scroll reach by page (particularly for eCommerce sites or other sites with low exit rates).

Perhaps other platforms, like SnowPlow Analytics or Piwik, with heartbeat tracking could implement something to work around GA’s 500 hits per session limitation.

Requirements

• jQuery library
• Google Analytics’ Asynchronous script

Installation instructions

Did I mention how easy it is to install it? Well, it is.

Step 1: Paste this snippet after your GA script… and you’re done:

<script type="text/javascript">
// Scroll reach tracking (WTFPL licensed) by Robert Kingston - http://www.optimisationbeacon.com/
// Cookie functions from Quirks Mode by Scott Andrew - http://www.scottandrew.com/
function mkScrCookie(e,t,n){if(n){var r=new Date;r.setTime(r.getTime()+n*24*60*60*1e3);var i="; expires="+r.toGMTString()}else var i="";document.cookie=e+"="+t+i+"; path=/"}function rdScrCookie(e){var t=e+"=";var n=document.cookie.split(";");for(var r=0;r<n.length;r++){var i=n[r];while(i.charAt(0)==" ")i=i.substring(1,i.length);if(i.indexOf(t)==0)return i.substring(t.length,i.length)}return null}function rmScrCookie(e){mkScrCookie(e,"",-1)}jQuery(document).ready(function(){try{var e=parseInt(rdScrCookie("scrReach"));if(e!=undefined&&document.referrer.indexOf("//"+document.location.hostname)>-1){_gaq.push(["_trackEvent","scroll reach","viewport: "+jQuery(window).height()+"x"+jQuery(window).width(),document.referrer.toString(),e]);rmScrCookie("scrReach")}}catch(t){}var n=jQuery(document).height();var r=jQuery(window).height();var i=jQuery(window).scrollTop();var s=Math.round(r/n*100);mkScrCookie("scrReach",s);var o=/MSIE (5|6|7|8)(.*Trident)?/g;if(!o.test(navigator.userAgent)){jQuery(document).scroll(function(){n=jQuery(document).height();r=jQuery(window).height();i=jQuery(window).scrollTop();var e=i+r;var t=Math.round(e/n*100);if(t>s){s=t;mkScrCookie("scrReach",t)}})}})</script>

In an ideal world

We would be able to generate a heatmap overlay with the data. i.e. for each percentage point of the page, we could colour it based on how many visitors saw a particular part of the page. This would make my day. There’s also no telling how it works with those people who open 50 tabs on your site.

We would also be able to implement this (or something similar) into a platform with a heartbeat on the page that tracks away every 15 seconds or so, whilst the user is active. Too bad that it would chew through all of your calls to __utm.gif, faster than the cookie monster could devour a Mrs. Crockett’s factory.

Regardless, these can be developed later. It’s WTFPL licensed, so you can do what you want with it (except for Scott Andrew’s portion of the code). It’s also on Github, so…

…fork it on Github

You can follow it, fork it and add your own modifications. Take a peep through the link below, if you’d like to see the fully commented version of the script.

Visit GA Scroll Reach on Github.

Insights from scroll reach tracking

Identifying poor performing posts
My two posts about how to build conversion rate heatmaps, were very popular when they were posted but suddenly – due to the old API expiring – both methods broke and visitors became disengaged. Because of this, I noticed visitors were just not scrolling – so (along with my readers’ encouragement) I immediately fixed the issue and scroll rates have improved.

Your ideas here…

How will you use this script?

I’d love to hear some of the creative uses for this script. Any interesting ideas etc will get featured in the section above along with recognition in the form of a link.