Google Analytics has included the ability to track AJAX requests for quite a while, but I don’t know how much awareness there is of this particular feature. Personally, I just discovered it the other day. I was looking at my Analytics data for a particular page on which I heavily use AJAX to replace all of the body content based on form selections. At that point, it occurred to me that, while I was getting good information about the numbers and types of people visiting the page, I wasn’t getting any segmented data based on the information they were requesting.
I then started Googling for a solution; certain that there was a simple way to track AJAX requests. I was right. It is actually extremely easy to track AJAX requests using Analytics. As you can see in the linked article, it’s as simple as attaching to the pageTracker object and feeding it a specific filename/pagename for the AJAX’d content.
In that article, the author recommends adding your Analytics code just below the opening <body> tag in order to ensure that the Analytics script has loaded before you try to attach something to it. If the Analytics base code hasn’t yet been loaded, a javascript error will be thrown and can stop the rest of your javascript from loading and executing properly when you try to attach something to the pageTracker object.
If it is 100% imperative that the information gets tracked, calling the Analytics code just after the opening <body> tag (or, even in the head of the document) is a good solution. In fact, if you put your Analytics code anywhere else in the document (for instance, just above the closing </body> tag, as is customary for page optimization), you can’t be guaranteed that the code will load and the page will be tracked before the visitor clicks a link to go elsewhere, anyway. However, the downside of that is that placing your Analytics call anywhere but just above the closing </body> tag will cause the page to load more slowly, as the Analytics code will have to load and execute before the rest of the page loads.
If it’s not absolutely 100% necessary to track the Analytics, you can use a different method. You simply need to check to make sure the pageTracker object exists before you attempt to attach something to it. Therefore, I would recommend using the following slightly modified version of the code provided in that article.
/* Other code would go here.
Do not use this code as-is, it
is only an example to show
approximately where the Analytics code
might go in your various functions. */
http_request.onreadystatechange = sendAlert;
http_request.open('GET', url, true);
http_request.send(null);
/* More code could go here if you want */
function sendAlert() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
alert(http_request.responseText);
/* This is the meat of the code that
changes the Analytics-tracked information */
if(typeof(pageTracker) !== 'undefined') {
/* Change "pagefilename1" to whatever you want the
tracker to use for the file name */
pageTracker._trackPageview("/pagefilename1" );
}
/* And you're done changing your tracking information */
}
else {
alert('Error.');
}
}
}
/* Even more code would go here */This code can safely go anywhere in your document – above or below the initial Analytics code – as it won’t be executed unless the Analytics code has already loaded. If you wait until the document is “ready” (by either using the jQuery document.ready() method or the standard javascript window.onload assignment), the Analytics code should be loaded and ready before you try to use it anyway. This code, however, will make sure it is before it attempts to do anything with the Analytics information.