h1. jQuery Google Analytics Plugin
NOTE This plugin hasn't been updated to work with the latest version of Google Analytics. I recommend you fork and improve the code and submit a patch.
h2. Introduction
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. (Note Google is currently testing their own implementation which does the same)
- simplifies event and link tracking.
- helps you track error pages (404, 500) as described "here":http://www.google.com/support/analytics/bin/answer.py?hl=en&answer=86927.
h2. Installation
h3. JavaScript
Inside the head tag, first include the jQuery JavaScript file, then the jQuery Google Analytics file:
h3. Usage
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')
h4. Page tracking
To enable Google Analytics page tracking add a call to $.trackPage inside the head tag:
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:
h5. Tracking 404 and 500 errors
This plugin implements tracking of error pages "as described on the Google Analytics Help pages":http://www.google.com/support/analytics/bin/answer.py?hl=en&answer=86927
To track an error, simply set the status_code parameter to the response code, as shown in this example:
h4. Link tracking
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):
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.
h4. Custom event tracking
You can also track events by calling the trackEvent method:
h4. Parameters
The track methods accepts the following parameters:
- "category":http://code.google.com/apis/analytics/docs/eventTrackerGuide.html#Categories - required string used to group events. Default is autodetected: internal or external.
- "action":http://code.google.com/apis/analytics/docs/eventTrackerGuide.html#Actions - required string used to define event type, eg. click, download. Default is click.
- "label":http://code.google.com/apis/analytics/docs/eventTrackerGuide.html#Labels - optional label to attach to event, eg. buy. Default is href attribute's value.
- "value":http://code.google.com/apis/analytics/docs/eventTrackerGuide.html#Values - 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:
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).
h4. Tracking mouseover and other events
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:
h4. Debugging
You can print debug statements to the Firebug console by setting the debug option. Default: false.
To enable: $.fn.track.defaults.debug = true;
h2. Todo
- Review code
- Refactor code
h2. Author
"Christian Hellsten":http://christianhellsten.com ("Aktagon Ltd.":http://aktagon.com)
h3. Contributors
"Joshua Jabbour":http://joshuajabbour.com