dvdsmpsn’s blog

Just another WordPress.com weblog

jGoogleAnalytics - Google Analytics integration for jQuery

with 8 comments

Since I last added Google Analytics to a website, Google have changed from the old urchin.js file to the shiny new ga.js file. This means that I really ought to start using ga.js now.

The University of Nottingham uses Sungard’s Luminis portal system which produces some rather nasty looking URLs. Web analytics for this is rather a handful - bad URLs, multiple features per page (each of which we’d like to track) and often tracking would be nice across sub-domains.

With that in mind, and Google’s Tracking Code Migration Guide close at hand, I’ve written jGoogleAnalytics.js to allow me to track:

  • clicks events
  • form submit events
  • cross subdomain
  • cross domain (e.g. for eCommerce payment gateways hosted externally)
  • new organic search engines
  • all the features of Jason Huck’s GA jQuery integration

Download jGoogleAnalytics.js

Usage:

$.jGoogleAnalytics( ‘UA-XXXXXX-X’); // At it’s simplest

$.jGoogleAnalytics(
‘UA-XXXXXX-X’, // Your GA tracker code
{
anchorClick: false, // adds click tracking to *all* anchors
clickEvents: null, // e.g. {’.popup’: ‘/popup/nasty’}
crossDomainSelector: false, // e.g. ‘a.crossDomain’
domainName: false, // e.g. ‘nottingham.ac.uk’

evalClickEvents: null, // e.g. {’#menu li a’: “‘/tabs/’+ $(this).text()”}
evalSubmitEvents: null, // e.g. {’#menu li a’: “‘/tabs/’+ $(this).text()”}

extensions: [
'pdf','doc','xls','csv','jpg','gif', 'mp3',
'swf','txt','ppt','zip','gz','dmg','xml'
], // download extensions to track

external: ‘/external/’, // prefix to add to external links
mailto: ‘/mailto/’, // prefix to add to email addresses
download: ‘/download/’, // prefix to add to downloads

organicSearch: null, // e.g. {’search-engine’: ‘query-term’, ‘google.nottingham.ac.uk’: ‘q’}
pageViewsEnabled: true, // can be disabled e.g. if only tracking e.g. click events
sampleRate: null, // e.g. 50 - set the sample rate at 50%
submitEvents: {’#personUK’: ‘/personsearch/uk’}
}
);

I’ve not added any eCommerce tracking to this release as we simply don’t have the need for it.

If you use this script, pplease leave a comment!

Written by dvdsmpsn

June 18, 2008 at 10:43 am

Posted in jQuery

Tagged with , , ,

8 Responses to 'jGoogleAnalytics - Google Analytics integration for jQuery'

Subscribe to comments with RSS or TrackBack to 'jGoogleAnalytics - Google Analytics integration for jQuery'.

  1. [...] to support the new ga.js script from Google Analytics. Hence, I am very interested in trying out dvdsmpsn’s jGoogleAnalytics plugin, which not only converts my original plugin to work with ga.js, but also adds a slew of additional [...]

    Wheel 2.0: Jason Huck’s Devblog » Expanded Google Analytics Plugin

    2 Jul 08 at 10:15 pm

  2. Hi,

    Thanks for this, it looks like a good upgrade from Jason Huck’s code, I’m interested how I can track events that only happen on a single page (so shouldn’t be wired up throughout the site). e.g. Upselling, at the moment we do this onclick: javascript:urchinTracker(’/upsold/false/Some-Item’);

    Is that possible with your code?

    Tim

    Tim

    8 Jul 08 at 2:59 pm

  3. Great stuff!

    Bert

    18 Jul 08 at 12:11 pm

  4. Tim: If your upselling links had a parent container with a class name of “upsell”, e.g.


    [ul class="upsell"]
    [li][a href="http://example1.com"]Example 1[/a][/li]
    [li][a href="http://example2.com"]Example 2[/a][/li]
    [li][a href="http://example3.com"]Example 3[/a][/li]
    [/ul]

    …sorry for the square brackets

    Your call to jGoogleAnalytics would be:

    $.jGoogleAnalytics( 'UA-XXXXXX-X', evalClickEvents: {'.upsell a': "'/upsell/'+ $(this).text()"} );

    This registers a click event for each anchor in the .upsell container, evaluates the link text and send it to GA.

    The page impressions in GA for each link above would read:
    /upsell/Example 1
    /upsell/Example 2
    /upsell/Example 3

    dvdsmpsn

    18 Jul 08 at 8:20 pm

  5. Thanks for getting back to me, I’ve done something similar however as my upsell links are image buttons (so no text) I’ve done the following (the user has the choice in upgrading or not hence the true/false):

    $.jGoogleAnalytics(
    ‘UA-123456-7′,
    {
    evalClickEvents: {
    ‘.upsellt’: “‘/upsell/true/’ + $(this).attr(’title’)”,
    ‘.upsellf’: “‘/upsell/false/’ + $(this).attr(’title’)”
    }
    }
    );

    And here’s the relevant HTML:

    But I can’t see the upsell being logged anywhere in Google (but the page hits are).

    Any ideas?

    Tim

    Tim

    21 Jul 08 at 10:00 am

  6. Ops sorry about the html (with square brackets):

    [a href="/order/?li=241&vi=167&act=add" class="upsellt" title="Classic+Wax+100g"][img src="/img/bYes.png" /][/a]

    Tim

    21 Jul 08 at 1:32 pm

  7. Great plugin! Thanks! One problem though…

    Using $.getScript will reload ga.js from google every time a page is requested. I fixed it by creating a function with the following code:

    return jQuery.ajax({
    type: “GET”,
    url: gaScriptURL,
    dataType: “script”,
    cache: true,
    success: function() { setupTracking(); }
    });

    The essential part is to pass parameter cache: true. Now, jQuery will not force reloading the script every time.

    Harri Kauhanen

    28 Sep 08 at 7:23 pm

  8. @Harri:
    Thanks. I’ll get it updated.

    dvdsmpsn

    28 Sep 08 at 11:11 pm

Leave a Reply