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.

Share this article: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Twitter
  • GatorPeeps
  • Digg
  • Reddit
  • muti.co.za
  • DZone
  • del.icio.us
  • StumbleUpon
  • Technorati
  • Ma.gnolia
  • Slashdot

Related posts:

  1. Speeding up Google Analytics load times with a jQuery plugin
  2. 12 Tips to improve your jQuery code
  3. Google’s Page Speed Firefox plugin
  4. Google Chrome Frame changes Internet Explorer into Google Chrome!
  5. Transfer your business emails to Google Apps with Google Email Uploader for Mac