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.

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.

Installation

JavaScript

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>

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’)

Page tracking

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>

Tracking 404 and 500 errors

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

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.

Custom event tracking

You can also track events by calling the trackEvent method:

  
  <script type="text/javascript">
  $(document).ready(function(){
    $.trackEvent(category, action, label, value);
  </script>

Parameters

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).

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:

  
  <script type="text/javascript">
  $(document).ready(function(){
    $('.normal a').track({event_name: 'mouseover'});
  </script>

Debugging

You can print debug statements to the Firebug console by setting the debug option. Default: false.

To enable: $.fn.track.defaults.debug = true;

Todo

Review code
Refactor code

Author

Christian Hellsten (Aktagon Ltd.)

Contributors

Joshua Jabbour

christianhellsten/jquery-google-analytics

christianhellsten

Reviews

Repository Details