The jQuery Google Analytics plugin does the following:
- improves page load times by deferring the loading of Google Analytics to after the page has been loaded.
- simplifies event and link tracking.
- helps you track error pages (404, 500) as described here.
Inside the head tag, first include the jQuery JavaScript file, then the jQuery Google Analytics file:
<script type="text/javascript" src="javascripts/jquery.js"></script>
<script type="text/javascript" src="javascripts/jquery.google-analytics.js"></script>
With the script loaded you now have access to these new methods:
- $.trackPage(‘UA-XXX-XXX’) – Adds Google Analytics tracking to the page it’s called from. By default, the loading of Google analytics is done after the onload event.
- $.(‘selector’).track – Used in combination with jQuery selectors to add click tracking, or tracking of other jQuery events, to matching elements. For example: $(‘selector’).track()
-
$.trackEvent – Used for custom event tracking. Same as _pageTracker.trackEvent, but checks that analytics isn’t blocked. For example: $ .trackEvent(‘category’, ‘action’, ‘label’)
To enable Google Analytics page tracking add a call to $.trackPage inside the head tag:
<head>
<script type="text/javascript">
$.trackPage('UA-YOUR_ACCOUNT_ID')
</script>
</head>
To improve page load times, the script defers the loading of the Google Analytics script to after the page has been loaded (window.onload). To disable this feature, set the onload parameter to false:
<script type="text/javascript">
$.trackPage('UA-YOUR_ACCOUNT_ID', {onload: false})
</script>
This plugin implements tracking of error pages as described on the Google Analytics Help pages
To track an error, simply set the status_code parameter to the response code, as shown in this example:
<script type="text/javascript">
$.trackPage('UA-YOUR_ACCOUNT_ID', {status_code: 404}); // Track a 404 error
</script>
Link tracking is done by selecting the elements you want to track with jQuery selectors. By default the click event is tracked, but this can be changed as I’ll explain later.
The following is an example of how to track outgoing links (to also track internal links, set the skip_internal parameter to false):
<script type="text/javascript">
$(document).ready(function(){
$('.normal a').track();
$('.sidebar a').track({
category : 'sidebar'
});
$('.footer a').track({
category : 'footer'
});
// Support any markup you want, eg. http://microformats.org/wiki/xFolk
$('.complex a').track({
// Use class as category. " tracked" is added by plugin...
category : function(element) { return element.attr('class').replace(' tracked', '') }
});
});
</script>
The first example selects links in the sidebar and sets the category to ‘sidebar’.
The second example selects links in the footer and sets the category to ‘footer’.
The third example selects links located inside the “complex div” and uses the link’s class as category.
See index.html for complete examples.
You can also track events by calling the trackEvent method:
<script type="text/javascript">
$(document).ready(function(){
$.trackEvent(category, action, label, value);
</script>
The track methods accepts the following parameters:
- category – required string used to group events. Default is autodetected: internal or external.
- action – required string used to define event type, eg. click, download. Default is click.
- label – optional label to attach to event, eg. buy. Default is href attribute’s value.
- value – optional numerical value to attach to event, eg. price. Default null.
Additional parameters supported by the track(), not the trackEvent(), method:
- skip_internal – Default true. If true then internal links are not tracked.
- event_name – Default click. Name of the event to track.
The following snippet shows you how to define the parameters:
<script type="text/javascript">
$(document).ready(function(){
$('.sidebar a').track({
category : 'sidebar',
action : 'click',
label : 'buy',
value : '10.49'
});
});
</script>
If no parameters are given then sensible defaults are used, which should work in most cases.
Note that you can also use functions instead of string values. Functions are useful for extracting the values from the HTML itself (metadata).
The default behavior is to track the click event. This can be changed to any other jQuery event by setting the event_name parameter to the name of the event you want to track, as shown in this example:
<script type="text/javascript">
$(document).ready(function(){
$('.normal a').track({event_name: 'mouseover'});
</script>
You can print debug statements to the Firebug console by setting the debug option. Default: false.
To enable: $.fn.track.defaults.debug = true;