Subdomain tracking update to the geekGa.js jQuery plugin for Google Analytics
26 Sep 2009 
3 Comments
Previously, Geekology published a post on the jquery.geekGa.js jQuery plugin for Google Analytics.
Geekology reader Armin noted that the plugin doesn’t cater for tracking subdomains as detailed here, and his suggestion has been integrated in the latest release.
The $.geekGaTrackPage() function now accepts an optional second parameter, domain_name:
//Track a pageview on a domain: $.geekGaTrackPage(account_id) //Track a pageview on a domain and its subdomains: $.geekGaTrackPage(account_id, domain_name);
While this change will allow you to track subdomains within one profile, reports may not distinguish between pages coming from www.example.com versus help.example.com. For example, in the Top Content report, there may be hits to www.example.com/index.html and help.example.com/more.html, but the report will display the following:
/index.html /more.html
To distinguish between subdomains, create an Advanced Filter for the profile with the following settings:
Filter Type: Custom filter -> Advanced
Field A: Hostname
Extract A: (.*)
Field B: Request URI
Extract B: (.*)
Output To: Request URI
Constructor: /$A1$B1
With this filter in place, the previous examples would appear with the subdomain attached:
www.example.com/index.html help.example.com/more.html
Using the ‘jquery.geekga.js’ jQuery Plugin:
To use the plugin, include it and jQuery in the website’s head:
<html> <head> <title>Hello, world!</title> <script src="javascript/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="javascript/jquery.geekga-1.2.min.js" type="text/javascript"></script> </head> <body> <p>Hello, world!</p> </body> </html>
… then track pageviews or events using the ‘geekGaTrackPage‘ or ‘geekGaTrackEvent‘ functions.
The geekGaTrackPage function can be used with 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.
Alternatively, the geekGaTrackPage function can be used with two parameters: the ID of the associated Google Analytics account as well as the domain name that subdomains will be tracked on.
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:
<html>
<head>
<title>Hello, world!</title>
<script src="javascript/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="javascript/jquery.geekga-1.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$.geekGaTrackPage('UA-0000000-0');
});
</script>
</head>
<body>
<p>Hello, world!</p>
</body>
</html>… 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.2 can be downloaded here, or downloaded in a minified form here.
Related posts:
author
Many thanks for the script
Regarding the https/http bit of code, Would it make sense for the URI to be //www.google-analytics.com/ga.js?
That way the call is protocol independent.
all the best
Dave