Scroll Tracking Implementation for Async Google Analytics Snippet

We’re building websites with the prospect to provide essential information to visitor inform of a content i.e. videos, facts, statics and many more etc with intention converting that visitor either to buy something from of the website or to subscribe the news letter.

Some time what happens that we aren’t aware about content consumption capacity of visitor. Regardless we provide all the avail content to visitor on single page then It becomes too long page with 3 -4 scroll.

Now here problem arises that either how to get information about visitor’s content engagement or how does visitor engage with the page that has 2 -3 scroll long content? This analysis is mandatory to get insight about content engagement of visitors or how does visitor look at the content in 2nd or 3rd fold the page?

With the help of scroll tracking implementation for google analytics, based on that analysis website owners can re-organize content placement to increase content engagement of the website.

Scroll Tracking Implementation for Google Analytics

I have developed a jquery based script which would help to identify % page viewed, % page scroll and the page fold user is in.

Instructions to use:

  1. Please download scrolltracking.js
  2. Include the code block as shown below.
    <!-- your default google analytics tracking code -->
    <script type="text/javascript">
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-XXXXXXX-X']); //replace your profile id
    _gaq.push(['_trackPageview']);
    (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
    </script>
    
    <!-- include the jquery library reference -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    
    <!-- include scrollscript.js reference -->
    <script type="text/javascript" language="javascript" src="scrolltracking.js" ></script>

See it in action:

  1. Scroll tracking as Event Category

    Event category of scroll tracking

  2. pv|ps|pf as Event Action

    Event action of scroll tracking

  3. Event Values

    Event value of scroll tracking

Scrolltracking.js would attach a function to scroll change on document. So when ever user scrolls down it’ll collect following values as “pv|ps|pf” with non-interactive flag.

  • pv – maximum % page viewed by user.
  • ps – maximum % page scrolled by user.
  • pf – maximum page fold user viewed.

Here all the values measured and tracked in GA would be the maximum value of %page viewed, %page scrolled and page fold user was in. So we can identify how much content is viewed by user on a given page. If user lands to page and goes to another page without scrolling. It’ll track default values “X|0|1” in GA where “X” is % page viewed (user viewed some portion) and 0% page scroll and 1 as page fold.

Note:

  • This script works with jQuery versions greater than 1.3.2 and tested with chrome, firefox, internet explorer 8
  • You can exclude information if you don’t want to track any of the values pv (% page viewed), ps (% page scrolled) or pf (page fold) – You’ll need to update the script.
The following two tabs change content below.
Aditi Buch

Aditi Buch

Aditi is the Head of Marketing at Tatvic Analytics and looks after all marketing & communications for the team. Her focus is on increasing brand awareness of Tatvic and leveraging the same to build thought leadership in the Data & Analytics space. For any queries or need of information on Tatvic Analytics & our offerings, reach out to her and she'll put you in touch with the right people.
,
Previous Post
Ruling the 3 seconds rule for improving usability of your website
Next Post
Launched Multi Profiles feature for Google Analytics Excel Plug-in

8 Comments. Leave new

  • Nice idea Ravi – can you explain how your code works please?

    Reply
    • Brian,
      Thanks for your comment. The purpose of this scroll script was to understand the content consumption at a one more level of detail. The script fires event calls as users increase content consumption which is scroll down. There are three main values that we are tracking. It is not necessary to track all three, but since we wanted to cover all 3 concept, we have kept 3 different ways to understand scroll.

      First way is to understand % of page viewed which as its name suggest is an indicator of proportion of page viewed. When you break down this event with page path and unique pages views as metric & draw a frequency plot one gets sense of how many unique people are consuming content to different extent. When I get more time I can paste chart within the blog post.

      The second measure is % page scroll , is an derivative of % page viewed represented in percentage incremental scroll that occurs from the basic height of the fold.

      Third measure, is proportion of fold also represents scroll in terms of # of folds, we choose this since UX designers (at least our internal UX) likes to think of page’s content consumption in terms of folds 🙂

      Usecase/example:
      User is viewing a page with 1200 px in height in the browser which has visible area of 300px:

      Now 1st case user has not scrolled anything and viewing the page so:
      %PageViewed would be => 300 (visible client height or viewed page height) / 1200 (total document height) * 100 = 25%
      %PageScrolled would be => 25 – (300/1200)*100 = 0% (as user has not scrolled anything)
      PageFold would be => 300/300 = 1 (User is in 1st page fold)

      Now 2nd case user scrolls some portion i .e. 100 px on the page so updated values:
      %PageViewed would be => (300 + 100 (scrolled amount from top)) /1200 * 100 = 33.34%
      %PageScolled would be => 33.34% – 25% = 8.34%
      PageFold would be => 400/300 = 1.34

      Now 3rd case user scrolls down through bottom of the page so updated values:
      %PageViewed would be => 300 + 900 /1200 * 100 = 100%
      %PageScrolled would be => 100% – 25% = 75%
      PageFold would be => 1200/300 = 4

      Note: Whenever user scrolls up it would not change the values, as the current %PV is lesser then variable stored %PV so it won’t fire the tracking call.

      Reply
  • I like the look of this script. I am going to test it out on one of our sites. It might be worth adding an optional trackPageView call so visitors who view a predetermined % of the page are not considered bounces.

    Reply
  • Jerome Lacroix
    March 14, 2012 12:46 pm

    Hello,
    I get a javascript error when i start to scroll:Erreur : too much recursion
    Fichier Source : http://www.atelierdecocadeau.com/js/scrolltracking.js
    Ligne : 34Can you help?I inserted your script at the very end of my tag, as you can see in the source code.Thanks!

    Reply
    • Hi Jerome, I’ll surely help you. Can you please try inserting script just before the tag?

      Reply
    • Hi Jerome,
      Can you comment line 54 to 57 in scroll tracking script which calls the updateresult() function after 3 second. If gaq tracker is not available. It seems html5 code structure has problem with it.

      Can you please update and let me know that works for you?

      Regards,

      Suketu Parikh

      Reply
  • Nice script, thanks for sharing and I will sure use on my blog

    Reply

Leave a Reply

Your email address will not be published.

Fill out this field
Fill out this field
Please enter a valid email address.
You need to agree with the terms to proceed

Menu