Use Google Analytics and Ajax? Remember to update your code

This post is more than 2 years old.

Just a quick tip to remind you that if you use Google Analytics with a heavily Ajax driven site, you may want to update your code to track your Ajax requests. Google details this here:

How do I track AJAX applications?

I updated ColdFusionBloggers to add this code and did a bit of cleanup. Previously I had 4 different functions that loaded content into the main div for the site. There was loadContent(), which was called when you first hit the page, previous and next, called with pagination, and the search button. All of these used jQuery's .load() function to load a URL and then ran a callback function named cbfunc. (Yes, real imaginative.)

cbfunc took care of turning off the loading animation. I thought it would be a great place to handle logging the request with Google. Unfortunately, I didn't have access to the URL requested from within the call back function. I could have rewritten the 4 main functions to do something like so:

$("#content").load(u, function() { $("#loadingmsg").hide(); pageTracker._trackPageview(u); });

That would have worked - but it felt like a lot of repetition. I added a new method to handle everything called loadDiv():

function loadDiv(theurl) { $("#content").load(theurl,function() { <cfif not structKeyExists(variables, "isiphone") or not variables.isiphone> $("#loadingmsg").hide(); </cfif> <cfif not> pageTracker._trackPageview(theurl); </cfif> }); }

The iPhone check in there simply disables hiding the loading indicator for the iPhone version. The check simply blocks Google Analytics from running when I test locally.

Anyway, I'll let folks know what kind of impact this has on my stats. To be honest, I don't ever go beyond page 1 myself, except when I'm searching. Still though I'm curious.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA

Archived Comments

Comment 1 by Jason Klingstedt posted on 2/18/2009 at 6:36 AM

You may be fully aware of this, so forgive me if you do... There is a beta program in Google Analytics called Event Tracking and you can track, well, events just like this. Since what you describing is essentially a page view, your solution works here, but what I am using it for is tracking other little functions like posting comments (we do ours via AJAX), etc. I don't know how one goes about getting into the program (we were invited), but once you are in, it just shows up in the content tab in the Analytics UI. Firing it off is as easy as adding this to your function that is doing the AJAX call: pageTracker._trackEvent(action, category, label);

<a href="">Full documentation here</a>

Comment 2 by Raymond Camden posted on 2/18/2009 at 7:21 AM

I was _not_ aware of that. Thanks for sharing it.

Comment 3 by Jules Gravinese posted on 2/27/2009 at 9:29 AM

The problem I found with this is that it uses the current window title for the hit's name. Kinda silly for an ajax app. DOH!

I got around it by changing the window title just before making the call.
document.title = newTitle;

But that depends on how much of your page is changing with the ajax data. In my case, it was a large area so it makes sense to do so. EX:

Comment 4 by Raymond Camden posted on 2/27/2009 at 9:12 PM

Thats not a bad tip. It probably would be a good idea, on CFBloggers, to change the title as well.

Comment 5 by Jules Gravinese posted on 2/28/2009 at 7:25 AM

In the development version of that above site I am doing it like this...

// do fadeout effect
document.title = '...loading...';
// do ajax function
document.title = newTitle;
// do fadein effect

Just a little added niceness for the viewer.

Comment 6 by Adi posted on 5/21/2009 at 9:59 PM

wow...thx for your sharing...
i will update at my code..
thx a lot