Fork me on GitHub

jQuery Google Analytics Plugin

What is it?

A jQuery plugin that helps you easily set up Event Tracking With Google Analytics. When added to a page it will automagically add event tracking to any item containing the appropriate HTML5 data-attributes.

Get it here.

jquery.googleanalytics v2.0.6

IE 8+, Firefox, Safari, Opera, Chrome

Demo

The following markup contains an example of all the possible parameters to send to the Analytics _trackEvent() and _trackPageview() methods. All parameters are validated against the Google Analytics Api constraints.

<!--_trackEvent markup--->
<a href="#" data-ga-category="test category" data-ga-action="test action" data-ga-label="test label" data-ga-value="0" data-ga-noninteraction="true">
    Click to test trackEvent
</a>

<!--trackPageview markup--->
<a href="#" data-ga-event="trackPageview" data-ga-url="/url">Click to test trackPageview</a>

Analytics Arguments

Parameters passed to Google's gaq array are:

Wait there's more...

Whilst the default behaviour should cover most scenarios there's always something that comes up which requires custom behaviour. To cater for this the plugin provides a data api and a tracked.ga event for handling callbacks

Here's an example of how to override the default behaviour as used on this page.

(function ($) {
    // Unbind the default behaviour.
    $(document).off("ready.ga").on("ready", function () {

        // Set some options. The ones below are the defaults.
        var $result = $(".result"),
            options = {
                event: "trackEvent", // The event name unprefixed. 
                handler: "click", // The eventhandler to trigger the tracking. 
                                  // Using 'load' will track immediately.
                debug: true // Whether to run in debug mode.
            };

        // Bind using the custom selector.        
        $(":ga").googleAnalytics(options).on("tracked.ga", function (event) {
            
            // Display the data.
            var args = $(event.target).data("ga").args;

            $result.children("div")
                   .empty()
                   .html("<p>" + args.toString().replace(/,/g, ", ") + "</p>")
                   .end()
                   .show();

        });

    });
}(jQuery));

And More...

It's possible to add further methods to the plugin by extending the $.googleAnalyticsApi object. In the example below we are adding support for the addTrans() method used in ecommerce tracking.

// Create our method rules.
var addTrans = {
        event: {
            value: "_addTrans",
            validation: "isString",
            type: "string"
        },
        orderId: {
            value: null,
            validation: "isString",
            type: "string"
        },
        affiliation: {
            value: null,
            validation: "optString",
            type: "string"
        },
        total: {
            value: null,
            validation: "isString",
            type: "string"
        },
        tax: {
            value: null,
            validation: "optString",
            type: "string"
        },
        shipping: {
            value: null,
            validation: "optString",
            type: "string"
        },
        city: {
            value: null,
            validation: "optString",
            type: "string"
        },
        state: {
            value: null,
            validation: "optString",
            type: "string"
        },
        country: {
            value: null,
            validation: "optString",
            type: "string"
        }
};

// Extend the $.googleAnalyticsApi object. 
$.extend($.googleAnalyticsApi, addTrans);

Return Types

  • string
  • integer
  • float
  • boolean

Validation Types

  • isString
  • isInteger
  • isFloat
  • isBoolean
  • optString
  • optInteger
  • optFloat
  • optBoolean

Data attibutes would then be added to the markup prefixed with data-ga- as with the built in methods.