Adam Howitt's Blog

Using Google Analytics to Monitor AJAX Applications

In this post, I'm going to explain how  to use Google Analytics to help you monitor AJAX and DHTML activities on your web applications.

Just over a week ago Google launched Google Analytics as a free, tag based web analytics package for one and all to use.  The product is based on Urchin which Google purchased for $30 million at the end of March 2005. 

This means you can create a free account, copy the basic snippet of code

and within 6-12 hours be looking at some great stats.  My personal favorite is that it is goal centered.  It makes you think about what the goal is for your website (readership, whitepaper downloads, sales, etc.) and focus on tracking those behaviors.

With traditional log based analytics packages you only get to see requests for files but with tag based analytics packages, like Google Analytics, you can monitor each and every JavaScript action, each click away from your site and tweak your application based on what your visitors are doing. 

I have an AJAX search box on WalkJogRun.net which up until last week I had no idea how it was used by visitors.  I mean, sure, it said search but people should know what that means, right?  Entering a search term dynamically filters the list of routes in the panel beneath the search box without refreshing the page.

Based on the results of tracking this for a week, it now reads "Find a route by name or zip code" because I was able to see that the most common behavior was to enter a zip code as a search term which, until I realized this, was a dead end.  The search was only looking for keywords so a zip search would find no results here.  A simple change and now it recognizes zip codes and handles your request differently.

Okay, but how do you track events?

Once you have your Google Analtics account and have copied the snippet into the head of your web page you are one line of code away from the answer.  Any time you want to log an event or activity to Google Analytics, add a call to the urchinTracker function which expects the name of a page (or for the purpose of this example, a virtual page since the search activity isn't a real page...  You can do this anywhere you can put JavaScript in a page including your own methods or, say, the onClick property of an href.  Since my application is already calling a JavaScript function to handle the AJAX call, I added the following line to my file:

which logs the event under a virtual directory called /search_routes/ and then logs the actual search term used under that.  To access this information in the Google Analytics manager when you are looking at your reports, click on "All Reports" > "Content Optimization" > "Content Performance" > "Content Drilldown" and you should see a pie chart and something like this:

 

You can see the /search_routes folder here and that 119 visitors have used the search tool 184 times between them.  Click on the folder icon next to the label "search_routes" and you see the next layer down:

The % Exit column reflects the damage that was done by providing a search box with no results when you search by zipcode! 

What else can it do?

Since every href can have an onClick event, you can log each click away from your site under a virtual folder called /outgoing_links/ to monitor which links your visitors found the most interesting.