Shoora
5/3/2019 - 4:59 AM

Simple jQuery Helper for wrapping GA event tracking

Simple jQuery Helper for wrapping GA event tracking

event.tracking.js
content_copyfile_download
(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
content_copyfile_download
<!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>