Google Analytics is a great web analytics tool to track Visitor, Traffic Source and Content statistics for free.
Implementing Google Analytics on a website requires that you create an account at http://www.google.com/analytics and add the Analytics Tracking Code to the website body:
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-0000000-0");
pageTracker._trackPageview();
} catch(err) {}
script>
However, there are several problems with this code:
- It requires JavaScript code to be written within the HTML content, which is usually considered bad form.
- The ‘document.write‘ statement executes where it’s encountered, it cannot inject code at a given node point.
- The ‘document.write‘ statement effectively writes serialised text, which is not the way the DOM works conceptually and is an easy way to create bugs.
- The ‘document.write‘ statement breaks pages using XML rendering (e.g. XHTML pages)
- It loads ga.js directly, blocking browsers from continuing page rendering or content downloading (such as scripts, stylesheets or images) for as long as it takes ga.js to download and execute.
To keep the Google Analytics code from interfering with page rendering you can use jQuery to load and execute the ga.js file.
The ‘jquery.geekga.js’ jQuery Plugin:
Geekology.co.za makes use of a custom jQuery plugin to load ga.js and track pageviews & events:
/*
* jquery.geekga.js - jQuery plugin for Google Analytics
*
* Version 1.1
*
* This plugin extends jQuery with two new functions:
*
* - $.geekGaTrackPage(account_id)
* Track a pageview.
*
* - $.geekGaTrackEvent(category, action, label, value)
* Track an event with a category, action, label and value.
*
*
* This code is in the public domain.
*
* Willem van Zyl
* willem@geekology.co.za
* http://www.geekology.co.za/blog/
*/
(function($) {
var pageTracker;
/**
* Track a pageview, e.g.:
*
* $.geekGaTrackPage('UA-0000000-0');
*/
$.geekGaTrackPage = function(account_id) {
//check whether to use an unsecured or a ssl connection:
var host = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
var src = host + 'google-analytics.com/ga.js';
//load the Google Analytics javascript file:
$.ajax(
{
type: 'GET',
url: src,
success: function() {
//the ga.js file was loaded successfully, set the account id:
pageTracker = _gat._getTracker(account_id);
//track the pageview:
pageTracker._trackPageview();
},
error: function() {
//the ga.js file wasn't loaded successfully:
throw "Unable to load ga.js; _gat has not been defined.";
},
dataType: 'script',
cache: true
}
);
//old method, doesn't cache the script file:
/*
$.getScript(src, function() {
if (typeof _gat != undefined) {
//the ga.js file was loaded successfully, set the account id:
pageTracker = _gat._getTracker(account_id);
//track the pageview:
pageTracker._trackPageview();
}
else {
//the ga.js file wasn't loaded successfully:
throw "Unable to load ga.js; _gat has not been defined.";
}
});
*/
};
/**
* Track an event, e.g.:
*
* $('a.twitter').click(function() {
* $.geekGaTrackEvent('feed', 'click', 'Twitter', 'willemvzyl');
* });
*/
$.geekGaTrackEvent = function(category, action, label, value) {
if (typeof pageTracker != undefined) {
//the pageTracker was defined, track the event:
pageTracker._trackEvent(category, action, label, value);
} else {
//the pageTracker wasn't defined:
throw "Unable to track event; pageTracker has not been defined";
}
};
})(jQuery);
Using the ‘jquery.geekga.js’ jQuery Plugin:
To use the plugin, include it and jQuery in the website’s head:
Hello, world!
Hello, world!
… then track pageviews or events using the ‘geekGaTrackPage‘ or ‘geekGaTrackEvent‘ functions.
The geekGaTrackPage function requires a single parameter: the ID of the associated Google Analytics account. This ID is the value starting with “UA-” in the
var pageTracker = _gat._getTracker('UA-0000000-0');
…line of the default Analytics Tracking Code.
The geekGaTrackEvent function requires four variables: Category, Action, Label and Value, as defined in the Google Analytics API’s Event Tracking Overview.
To call these functions, you can embed some jQuery code in the HTML code:
Hello, world!
Hello, world!
… but since part of the idea behind this plugin was to remove the need for embedded JavaScript, it’s best to call these functions from a separate JavaScript file and only after the page has finished loading when jQuery’s ‘$(document).ready()‘ function executes:
$(document).ready(function() {
$.geekGaTrackPage('UA-0000000-0');
$("a[href='http://www.geekology.co.za/blog/feed/']").each(function() {
$(this).click(function() {
$.geekGaTrackEvent('feed', 'click', 'RSS 2.0', 'articles');
});
});
$("a[href='http://www.twitter.com/willemvzyl/']").each(function() {
$(this).click(function() {
$.geekGaTrackEvent('feed', 'click', 'Twitter', 'willemvzyl');
});
});
$("a[href='http://www.geekology.co.za/blog/']").each(function() {
$(this).click(function() {
$.geekGaTrackEvent('page', 'click', 'Home', '');
});
});
});
The jquery.geekga.js plugin version 1.1 can be downloaded here, or downloaded in a minified form here.
0 comments:
Post a Comment