As great as Google Analytics is, it does not track ajax request out-of-the-box. But don’t fear, tracking Ajax calls with Google Analytics is easier than you think. I’m not going to go over how to set up Google’s tracking code on your site, I’m going to assume you’ve already got analytics up and running.

Method 1

The fast and dirty way

First off, I’m going to assume you’re using some sort of JavaScript framework. I prefer MooTools, but this method should work with any framework. Every framework’s Ajax request methods have a built in “successful request” callback. This method is usually and appropriately called onSuccess. This callback method means that your request has completed and returned a successful response. You’re probably already familiar with Google Analytic’s pageTracker._trackPageview(); code, since you have it in every page you are already tracking. That method also takes an optional string argument, usually the name of the page you are tracking. By default that argument is the current page that the code is on. We’re going to use that optional argument in our onSuccess callback to track our request. Here’s a simplified version of the Ajax request code from the contact form on this site using MooTools 1.2.

this.set('send', {
   onSuccess: function(response){
      //a successful request
   },
 
   onFailure: function(response){
      //a failed request
   }
});
this.send();

For this particular example we want to track a successful contact form submittal using a unique string that will show up in our analytics page. I decided to use “/contactFormSubmitted”. This is the name of the “page” that will show up in Google Analytics. You can use the actual page name that the request is submitted to or any identifier you want. So lets add the code to our success callback

this.set('send', {
   onSuccess: function(response){
      //a successful request
      pageTracker._trackPageview('/contactFormSubmitted');
   },
 
   onFailure: function(response){
      //a failed request
   }
});
this.send();

Now anytime someone successfully fills out and submits the contact form on my site, i’ll see it show up in the content section on Google Analytics, as seen here.

I know, the numbers are overwhelming, but the point is, my Ajax request is being correctly tracked.

Method 2

Extending the Request Class to automatically track the requested url

So another way to do this would be to extend the Request class itself and have it track the URL automatically after a successful request. Once again, this is specific to MooTools 1.2. What i want to do is overwrite the default Request.onSuccess method with our new functionality while maintaining the original functionality. This method eliminates the need to add the tracking code to every single success callback in you code base. Very useful for retrofitting large sites with lots of Ajax calls or just getting free functionality.

To implement, simply add the following lines somewhere in your JavaScript file. Just make sure the file you’re adding it to is embedded after MooTools.

Request.implement({
   onSuccess: function() {
      //google pageview code
      pageTracker._trackPageview(this.options.url);
      //default onSuccess code
      this.fireEvent('complete', arguments).fireEvent('success', arguments).callChain();
   }
});

This overwrites the default onSuccess method for the Request Class, keeping the original functionality in tact but adding the tracking code for every Ajax call in your application. The URL of the request will show up on your analytics page.