It’s an age-old design question if your core web content should be above the fold or if users are happy to scroll down to see it. tools such as ClickTale (below) provide a really powerful solution to show you exactly how far down your page your visitors are scrolling. However, with 70% of businesses using Google Analytics, it would be really great to have that kind of insight built into Google Analytics reports.

Scroll reach tracking

Unfortunately, this is something that they have never provided.

Scroll reach tracking plugin

In order to try and get around this, I’ve built a Google Analytics plugin that uses JQuery and event tracking to measure how far down your pages your visitors are scrolling.

How it works

The script works by working out the height of your webpage and dividing it into ten even splits (10% scroll). It then finds the height of the user’s browser window and works out how many of those 10% splits the visitor can see and fires an event to Google Analytics for each of those 10% splits (10%, 20%, 30% etc.)

Then, if the user starts to scroll down the page, it fires an event when they reach the next 10% split and then another event for every 10% split thereafter.

It’s built to only fire each 10% split event once, so if a user scrolls all the way down the page and back up you would get 10 events rather than 20 or more.

The events fired use the following code:

_gaq.push([‘_trackEvent’, title, ‘scroll reach’, ‘10%’,10,true]);

Where title is the page title that the user is currently on and the 10% changes to reflect the split of the page that the user has scrolled to. The last field is set to true and this tells Google Analytics not to consider these events in bounce rate calculations so that your pages don’t suddenly have zero percent bounce rate after setting this tracking up.

The value of the event is set to the value of the scroll position, so 10% would give 10 etc. so that the average scroll depth is given in Google Analytics and you can see whether your “average user” is seeing your important content nice and easily.

To install:

  • Requires JQuery to be installed 
  • Should be placed below the call for JQuery and the main Google Analytics tracking code
  • Uses the Asynchronous tracking script (gaq, not gat)
  • I recommend placing in an external JS file so you can easily include it across your site without having to copy and paste lots of code into every page.

 

You can download the plugin here:

 

google-analytics-scroll-tracking

 

If you have any questions or want to suggest any improvements, leave a comment below.

 

mail

Scroll reach tracking in Google Analytics
Tagged on:         

12 thoughts on “Scroll reach tracking in Google Analytics

  • I would like to know that if I have an Analytic Google code and this is not Asynchronous I would have to change my mode Analytic code from synchronous to asynchronous too?

    In wich folder I have to put this script?
    The results for that script I can see in the same account That I have now?
    Thanks

  • At the moment, this won’t work with the older code, it needs to be asynchronous. But, it could be modified to work. I would recommend upgrading to the asynchronous code though as the non-asynchronous is really outdated now.

    If you just put this in your normal JavaScript folder and link to it from the head of your page (eg. )

    That would be fine

  • Interesting. A buddy sent me a link to this. I hope you don’t mind but I made this a little smaller and more flexible:

    $(function() {

    // every threshold in percent, makes it easy to be more or less granular.
    // This number should a divisor of 100 (1, 2, 4, 5, 10, 20, 25, 50, 100)
    var threshold = 10;
    var curReach;
    var $window = $(window);

    var getReach = function(){
    return Math.floor((($window.height()+$window.scrollTop())/$(document).height())*(100/threshold))*threshold;
    };

    var trackReach = function(reach){
    curReach = reach
    _gaq.push([‘_trackEvent’, document.title, ‘scroll reach’, curReach+’%’, curReach, true]);
    };

    trackReach(getReach());

    $window.scroll(function(){
    if (getReach() > curReach){
    trackReach(getReach());
    }
    });

    });

    Its only 259 bytes minified.
    $(function(){var t,o=10,n=$(window),c=function(){return Math.floor((n.height()+n.scrollTop())/$(document).height()*(100/o))*o},r=function(o){t=o,_gaq.push([“_trackEvent”,document.title,”scroll reach”,t+”%”,t,!0])};r(c()),n.scroll(function(){c()>t&&r(c())})});

    1. Don’t mind at all! I did suspect there is probably a simpler way of doing this, but my JavaScript is pretty basic so his was as far as I got!

    1. Hey Matt,

      If you go to Content –> Events –> Top events, you will see the pages you have installed it on in there as the event category, clicking through on each one will take you through to the different % scroll reaches.

      Hope you like it

      1. I made an extension for Google Chrome that will pull in all of the information stored in Google Analytics, compile it into real numbers per page, and display it as an overlay similar to how the image for this blog post looks.
        Right now its all working, but some of the values are hard-coded (like which GA accounts to get the data from and which domains have data), but I’m going to eventually create an options page to allow these values to be entered by the user.
        I’ll post it back here when its ready.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>