A repository of over 1000 quality jQuery plugins

jQuery jQuery Google Analytics

jQuery Google Analytics is a jQuery Loading plugin.

Created by Christianhellsten

A Google Analytics plugin for jQuery. Improves page load times. Simplifies link and event tracking.

Not what you're looking for? Click here to view more Loading jQuery plugins

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:

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:

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

You might also like these other Loading jQuery Plugins

  • PreLoadMe, a lightweig...

    PreLoadMe is a lightweight preloader for any webcontent. Powered by jQuery and CSS it is fully responsive and will run […]

  • jQueryui Amd

    AMD-wrapped modules for jQuery UI for use in loaders like RequireJS

  • WaitForImages

    A jQuery plugin that lets you attach callbacks to useful image loading events.