Google Analytics is a very powerful analytics platform that let’s perform very sophisticated aggregate data analysis entirely for free. However, there are some limitations in the service that prevents you from doing certain kind of analysis, particularly around AJAX events. This limitation is a result of the ‘page-load’ paradigm that GA is constructed on, however this article will demonstrate how to extend the PageView model to handle sophisticated AJAX interactions.
They key concept: map events to urls.
Create an Event->URL Map
In more detail; for each event you want to track create a unique URL for when it happens (how to register that URL will be discussed below). You want to create a mapping, or encoding scheme that captures a lot of the information about the event. In my experience the more information you can think of, the better.
You want to design your encoding scheme so that it is future-proof, and lets you run aggregate data analysis across multiple pages.
At ProductWiki we use a simple name-value pairing. We always maintain the same ordering across pages so that we can perform aggregate analysis. Furthermore it’s future-proof, because any new values we want to track we append to the end. which does not taint older URLs that have already been registered.
An example: http://www.productwiki.com/product-name/product-category/tab-reviews/
So now we can use regular expressions in GA to see how often people click the review tab, even though it’s javascript based. We can see it per product, and we can even segment per category.
When you combine that with all the other segmentation abilities that Google Analytics gives you there are some very powerful analysis that can be done.
Register Events
So, how do we register these custom URLs? Well let’s dive into the Javascript.
<script src="http://www.google-analytics.com/ga.js" type="text/javascript"></script>
<script type="text/javascript">
var url='some really complicated custom url';
var pageTracker_simple = _gat._getTracker("projectid"); //explained below
var pageTracker_advanced = _gat._getTracker("projectid2"); //for advanced event tracking
pageTracker_simple._trackPageview();
pageTracker_advanced._trackPageview(url);
</script>
the key here is that when you call pageTracker._trackPageView() with no value it defaults to the current URL locatation, this is the default behavior. However, you can specify your own URL as a parameter, this is the key. You can also call _trackPageView() at any time, even long after the page is loaded.
So when a user clicks on a tab, or some other Javascript event you can also trigger a fake page-load to register that event.
The reason why we use two trackers is because unfortunately there is a bug in Google Analytics. When you do this kind of advanced page tracking some basic stats such as bounce rate get all messed up. That’s why we use a secondary GA project to handle basic statistics.
If you guys have your own tips and tricks feel free to shoot them on over.
