YUI2: Google event tracking

YUI2 function to make use of Google Event Tracking and YUI2 Event Listener.

26 September 2011

I wrote a javascript function making use of YUI2 Event Listeners so that end users events could be monitored using Google Event Tracking.

First off I create a 'trackMe' function which can be passed a number of different values:

function trackMe(widgetName, widgetValue, widgetURL)

Within the 'trackMe' function I specify a number of variables, the Google Analytics ID, the development environment and the live environment. I set up variables for development and live as I only wanted to track events on live but see the output of the function though the javascript console of my browser while testing in my development area:

var googleID = 'YourGoogleAnayliticsID',
	devEnvironment = 'http://www.yourdevsitenamehere.com',
	liveEnvironment = 'http://www.yourlivesitenamehere.com',
	googleTracker = _gat._createTracker(googleID);

I check to see if a 'widgetURL' value was passed to the function, I thought this may be handy in case the tracking needs to refer to a canonical URL but if no value is passed I use the url of the page the user is currently on:

// If no URL is passed the current page location is used
if (!widgetURL) {
	widgetURL = location.href;
}

I check the event to see if the url of the page the even happened on was on the live or development box, if it's on live I track the event in my Google Anaylitics but if on the development box I log it in the javascript console:

// Post tracking to Google Analytics if on live environment
if (widgetURL.match(liveEnvironment)) {
	googleTracker._trackEvent(widgetName, widgetValue, widgetURL);
}
// Display tracking values in the console if on dev environment
if (widgetURL.match(devEnvironment)) {
	if (typeof (console) !== 'undefined' && console !== null) {
		console.log(widgetName + ': ' + widgetValue);
	}
}

Finally I set up the element I wish to track, in this example I have just shown a link but there are many more events you could track:

Event.onContentReady('item-to-track', function () {
	var widgetName = 'Item Name',
		widgetValue = this.innerHTML;
	Event.addListener(this, 'click', trackMe(widgetName, widgetValue));
}, this);

Requires the following YUI2 files:

• Dom
• Event

/*global location, console, YAHOO, _gat */

YAHOO.namespace('yourNamespaceHere');
YAHOO.yourNamespaceHere = (function () {
	'use strict';
	var init,
		Event = YAHOO.util.Event;

	// TRACK EVENTS - GOOGLE ANALYTICS
	function trackMe(widgetName, widgetValue, widgetURL) {
		var googleID = 'YourGoogleAnayliticsID',
			devEnvironment = 'http://www.yourdevsitenamehere.com',
			liveEnvironment = 'http://www.yourlivesitenamehere.com',
			googleTracker = _gat._createTracker(googleID);
		// The widget URL can be passed into the function (mainly to track cononical links)
		// If no URL is passed the current page location is used
		if (!widgetURL) {
			widgetURL = location.href;
		}
		// Post tracking to Google Analytics if on live environment
		if (widgetURL.match(liveEnvironment)) {
			googleTracker._trackEvent(widgetName, widgetValue, widgetURL);
		}
		// Display tracking values in the console if on dev environment
		if (widgetURL.match(devEnvironment)) {
			if (typeof (console) !== 'undefined' && console !== null) {
				console.log(widgetName + ': ' + widgetValue);
			}
		}
	}

	init = function () {

		Event.onContentReady('item-to-track', function () {
			var widgetName = 'Item Name',
				widgetValue = this.innerHTML;
			Event.addListener(this, 'click', trackMe(widgetName, widgetValue));
		}, this);

	};

	return {
		init: init
	};

}());

YAHOO.util.Event.onDOMReady(YAHOO.yourNamespaceHere.init);