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.6IE 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.