Skip to content

Instantly share code, notes, and snippets.

@wilr
Created August 26, 2011 03:54
Show Gist options
  • Save wilr/1172651 to your computer and use it in GitHub Desktop.
Save wilr/1172651 to your computer and use it in GitHub Desktop.
Simple jQuery Helper for wrapping GA event tracking
(function($) {
/*
A simple helper plugin for wrapping Google Analytic event tracking
into sites through jQuery and HTML5 data attributes.
This assumes that you have used the standard configuration provided
by google for setting up Google Analytics and used the _gaq var for
storing the tracker.
Can track focus, activate, hover and click input methods but not key
events to prevent spamming.
License: BSD (http://silverstripe.org/bsd-license/)
Author: Will Rossiter
*/
$.fn.trackEvent = function(args) {
_gaq = _gaq || [];
var category, action, label, value, self = $(this[0]);
var e = function(f) { if($.isFunction(f)) return f(self); return f; }
var args = $.extend({
category: function(ele) {
category = $(ele).data('category');
if(!category) category = window.location.toString();
return category;
},
action: function(ele) {
action = $(ele).data('action');
if(!action) action = 'click';
return action;
},
label: function(ele) {
// optional but recommened field
label = $(ele).data('label');
if(!label) label = $(ele).text();
return label;
},
value: function(ele) {
// optional field
return $(ele).data('value');
},
}, args);
var track = ['_trackEvent', e(args.category), e(args.action)];
label = e(args.label);
value = parseInt(e(args.value));
if(label) track.push(label);
if(value) track.push(value);
try {
_gaq.push(track);
} catch(err) {
if(window.console != undefined) {
window.console.log(err);
}
}
};
})(jQuery);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery powered ga.js event tracking</title>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-6721336-2']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<style>
* { font-family: Lucida Grande, Arial }
</style>
</head>
<body>
<h1>jQuery powered ga.js event tracking</h1>
<p>For testing I recommend using <a href="http://analytics.blogspot.com/2010/08/new-tools-to-debug-your-tracking-code.html">ga_debug.js</a> instead of ga.js. <a href="https://chrome.google.com/webstore/detail/jnkmfdileelhofjcijamephohjechhna">chrome extension</a>.</p>
<ul>
<li><a href="index.html" class="track">Default Simple link tracked</a>.</li>
<li><a href="index.html" class="track" data-category="Testing" data-label="Simple Link Track via HTML5" data-action="custom action">Simple Link Track with defined category and action</a>.</li>
<li><input type="text" class="track" data-category="Testing Input" data-label="Focused on input" /></li>
</ul>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="event.tracking.js"></script>
<script>
(function($) {
$(document).ready(function() {
$("a.track").click(function() {
$(this).trackEvent();
return false;
});
$("input.track").focus(function() {
$(this).trackEvent({
label: 'Focused into input box',
action: 'focus'
});
});
$("input.track").blur(function() {
$(this).trackEvent({
label: function(elem) { return $(elem).val(); },
action: 'leave text field'
})
});
$("form#search").submit(function() {
$(this).trackEvent({
category: "Search Queries",
label: function(elem) { $(elem).find("input.text").val(); },
action: "Submitted Search"
});
});
})
})(jQuery);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment