hazdik/event.tracking.js

## event.tracking.js
(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);

## index.html
<!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>
	(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>