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 2^nd or 3^rd 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. Scrolltracking as Event Category

   

2. pv|ps|pf as Event Action

   

3. Event Values

   

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.

Liked this? Get more by Signing up for our free newsletter!

Would you like to understand the value of predictive analysis when applied on web analytics data to help improve your understanding relationship between different variables? So register now for our Upcoming Webinar: How to perform predictive analysis on your web analytics tool data. Get More Info & Book Your Seat Now!

Suketu Parikh

Suketu Parikh working with Tatvic as Tech Lead., have more than 5 years of experience as developer. Google Plus Profile: Suketu Parikh

Twitter - More Posts

Tagged as: scroll tracking, scroll tracking implementation