Track Scrolling in a Page (Engagement) with Jquery and Google Analytics

December 20th, 2011 admin Location: Raleigh, NC, Topic: Web Design | Digital Media

So I came across a post by RTP Harry from http://runtingsproper.blogspot.com/2010/03/google-analytics-tracking-content.html where he explains how to track scroll depth in Google Analytics.

Since I was looking for exactly that for one of our projects I was excited to give it a go. However it didn’t work. And so I started in my usual journey of understanding why it wasn’t working, fixing it and then sharing it with all of our readers. So here it is:

Problem:

You want to track the engagement of your users and therefore you would like to see in Google Analytics if your users are scrolling down your pages and reaching at least 90% of the length.

Solution:

This could be done in several ways, however in this case probably the easiest solution is to use Jquery (client-side) and Google Analytics.

To begin, Google Analytics provides something called Event Tracking. This allows to track things happening in your website, blog or page. And that is exactly what we are after. Most of the time this behavior is used to track downloads of PDFs videos or clicks on links. This time we are going to track scrolling on a page.
[private]
So here it is. I am not going to explain line by line since I have done so inline with the code. If you have a question please don’t hesitate to post in the comments box at the bottom. Before we begin, let me say that most of Harry’s code was correct, however there were a couple of things that didn’t work any longer for the new Google Analytics. This code that I am sharing with you works with the new Google Analytics Tracking Script.

/*
* Code to Track Scrolling up to 90% in a particular page
*
* This code allows the tracking of deep scrolling in a page (engagement)
* with Google Analytics Event Tracking. The function fires when a visitor
* reaches at least 90% of the total length of a page.
*
* Make sure to include jquery first
*/
// define a variable to prevent duplicates
var IsDuplicateScrollEvent = 0; 

// wait until DOM is completed.   
$(document).ready(function () {
	// call function to Track Event.
	TrackGAEvent();
}); 

//function to determine scroll percentage.
function GetScrollPercent()
{
     var bottom = $(window).height() + $(window).scrollTop();
     var height = $(document).height();
	 // return the percentage of scroll reached.
     return Math.round(100*bottom/height);
}

// track event function for Google Analytics New Code
function TrackEvent(Category, Action, Label) {
           _gaq.push([Category, Action, Label]);
}

// Main Function - Call TrackEvent every time that the page is scrolled 90%
function TrackGAEvent() {
      $(window).scroll(function(){
			var scrollPercent = GetScrollPercent();
            if(scrollPercent > 90) {
				// track the even only if it is a unique event.
               	if( IsDuplicateScrollEvent == 0) {
                 	IsDuplicateScrollEvent = 1;
                 //console.log("Page Scrolled to 90% in " + document.location.href);
                 TrackEvent("Content Engagement", "Scrolled To 90%", document.location.href);
               }
             }
        });
}                                 

Thanks again
[/private]

About the Author

Alex Centeno MBA., is an international creative director and digital media strategist. Currently residing minutes away from the Research Triangle Park (RTP) - North Carolina, and with over 10 years of interactive marketing training and experience, Alex leads Merkados' international clients to maximizing their online business strategies. One of Alex's biggest strengths is his world-class capacity to effectively combine interactive marketing, digital media design and web development.

You may find further information about Alex Centeno MBA. at: and Twitter.

Sobre el Autor

Alex Centeno MBA., Es un director creativo y estratega de medios digitales reconocido internacionalmente. En la actualidad reside a tan solo minutos del Research Triangle Park (RTP) - Carolina del Norte, y con más de 10 años de entrenamiento y experiencia en marketing interactivo, Alex lidera a los clientes internacionales de Merkados™ para maximizar sus estrategias de negocios en línea. Una de las mayores fortalezas de Alex es su capacidad global de combinar de manera efectiva, mercadeo interactivo, diseño de medios digitales y desarrollo web.

Para más información sobre Alex Centeno MBA. puede visitar: y Twitter.