“Google Analytics jQuery Plugin” is a jQuery Plugin!

When used in conjunction with the famous jQuery framework, this plugin allows easy integration of Google Analytics on any webpage.

Google Analytics is an enterprise-class web analytics solution that gives you rich insights into your website traffic and marketing effectiveness.

Advantages of using this plugin

• Extremely simple to use. Copy-paste (almost) anywhere within your page. It just works!

• Familiar usage syntax for jQuery fanatics!

• No need to write messy JavaScript codes within HTML body. Makes it easier to maintain pages, besides making the HTML codes sexier.

• Does not use the infamous document.write method to insert JavaScript.

• Increases the performance of your web-pages by loading Google Analytics codes after the current page is fully loaded.

• Does not stop page loading while Google Analytics ga.js file is loading. In effect, prevents the annoying delay of loading pages due to slow response from Google Analytics servers.

• Extremely lightweight. The minified version of this plugin is as small as 688 bytes!

• New: Dynamically binds to the Google Analytics pageTracker and allows easier access to Google Analytics API

Download Google Analytics jQuery Plugin

You can download this plugin for free by following the link provided below. The downloaded compressed (zipped) package contains a minified ((a compressed form of packaging JavaScript with all whitespace formatting and documentation being removed.)) version of the plugin and also a well documented debug version.

Download
[download id=”7″ format=”1″]

This plugin complies and conforms to the licensing scheme of jQuery. You are free to redistribute the code and use it in any of your applications.

Also available on jQuery plugin repository:
http://plugins.jquery.com/project/ga

Usage Instructions

Using this plugin is as simple as including this plugin JavaScript file along with other JavaScript files of your pages HTML section and then replacing xxxxxx-x in that code with your Analytics account number.

Installing this plugin and the Google Analytics codes:

After, extracting the downloaded package to the desired folder on your server, you would need to include the code snippet given below, within the section of all your pages where you want this plugin to work.

http://jquery.ga/jquery.ga.js

$(document).ready( function() { $.ga.load("UA-xxxxxx-x"); } );

You might also need to change the path to the plugin file by providing the correct path in src="jquery.ga/jquery.ga.js" attribute.

Using Google Analytics Tracking API with this plugin:

This plugin dynamically maps all Google Analytics tracking methods to $.ga for easy access. What this means is that, whatever public API Google Analytics pageTracker uses, the same is applicable to this plugin.

For example, to invoke the pageTracker._trackEvent(category, action, opt_label, opt_value) method, you simply need to call $.ga.trackEvent(category, action, opt_label, opt_value)

Current list of methods that this plugin automatically binds on to: (This is not the ultimate list. The plugin binds on to all functions that begin with an underscore “_”.)

To get the complete Google Analytics Tracking API, visit Google Analytics Tracking API Reference page.

Executing a callback function:

You can execute a callback function upon load of Google Analytics Code. This can be done by passing a function to the 2^nd parameter of the load(uid, callback) method.

$(document).ready( function() {
   $.ga.load("UA-xxxxxx-x", function(pageTracker) {
      // an example of a line of what your code can be...
      pageTracker._setDomainName(".example.com");
   });
});

The first parameter sent to the callback method is the pageTracker object of Google Analytics.

How this plugin works?

This plugin uses the robust and reliable jQuery.ajax API to fetch the Google Analytics core JavaScript file (ga.js) after the document load is completed. It does not use the jQuery.getScript API as it prevents the loaded script from being cached.

The core code that does this is illustrated below.

jQuery.ajax({
   type: "GET",
   url: (document.location.protocol == "https:" ?
      "https://ssl" : "http://www") + ".google-analytics.com/ga.js",
   cache: true,
   success: function() {
      if (typeof _gat != undefined) {
         pageTracker = _gat._getTracker(uid);
         pageTracker._trackPageview();
      } else {
         throw "_gat has not been defined";
      }
   },
   dataType: "script",
   data: null
}); 

After loading Google Analytics, it dynamically maps all tracker API to itself. This also implies that should, Google Analytics change its API, this plugin should automatically adapt to the changes.