Track jQuery AJAX Requests in Google Analytics
There is an easy way to track all jQuery AJAX requests in an application. This method could really be used to log our AJAX requests however we wish, but this particular example will log requests to Google Analytics.
The code
Log all jQuery AJAX requests to Google Analytics
if (typeof ga !== "undefined" && ga !== null) {
$(document).ajaxSend(function(event, xhr, settings){
ga('send', 'pageview', settings.url);
});
}
This code will automatically log all jQuery AJAX requests in our application, including those using `$.ajax()`, `$.get()`, or `$.post()` (and `.load()` too).
This will also work for any jQuery plugins using AJAX requests (e.g. lightbox plugins, etc.), as well as for all Rails 3 remote links and forms (provided we're using the jQuery UJS driver).
In the page layout or in an included js file, we add the following JavaScript:
Updated to make sure _gaq is defined and loaded in page. Thanks to Bart Claeys below for pointing this out.
(function ($) {
// Log all jQuery AJAX requests to Google Analytics
$(document).ajaxSend(function(event, xhr, settings){
if (typeof _gaq !== "undefined" && _gaq !== null) {
_gaq.push(['_trackPageview', settings.url]);
}
});
})(jQuery);
If we're using this in a Rails 3 app, we can put this in our application.js.
if (typeof ga !== "undefined" && ga !== null) {
$(document).ajaxSend(function(event, xhr, settings){
ga('send', 'pageview', settings.url);
});
}_gaq is defined and loaded in page. Thanks to Bart Claeys below for pointing this out.
(function ($) {
// Log all jQuery AJAX requests to Google Analytics
$(document).ajaxSend(function(event, xhr, settings){
if (typeof _gaq !== "undefined" && _gaq !== null) {
_gaq.push(['_trackPageview', settings.url]);
}
});
})(jQuery);
Notes
This assumes we're using the Asynchronous version of Google Analytics. If we're using the older synchronous Analytics code snippet, we just need to replace the_gaq with the older pagetracker syntax:
(function ($) {
// Log all jQuery AJAX requests to Google Analytics
$(document).ajaxSend(function(event, xhr, settings){
if (typeof pageTracker !== "undefined" && pageTracker !== null) {
pageTracker._trackPageview(settings.url);
}
});
})(jQuery);
$(document).ready() event. This is because we're only binding a function to a callback, to be run later when the callback is triggered; we're not actually executing any code on the DOM yet.
How it works
jQuery fires off several local and global AJAX callbacks whenever it executes an AJAX request. The local callbacks fire on the specific element that triggered the AJAX request (i.e. the link or form), while the global callbacks are broadcast to all elements in the DOM, including the root node,document.
So, we're simply binding a function to the root node, on the ajaxSend callback. That function then uses the Google Analytics function for manually logging a page request for the AJAX URL.
On a related note, if we want to make a specific AJAX request stealthy, and not broadcast its global AJAX callbacks to other DOM elements, we can set
global to false. This will also cause our Analytics tracking to be skipped for this request.
$.ajax({
url: '/like-a-ninja',
global: false
});
