Al Stevens – Art director, interactive and user experience designer. » javascript

Tracking javascript events with google analytics

Al Stevens — Mon, 18 Aug 2008 19:35:45 +0000

One of the key things I want tracked on my website is those who click on the rss icon and add me to their feed reader. When someone actually clicks on subscribe – hey that means that they like what they have seen and want to read more. I am humbled. I am overjoyed. I have a conversion!

In google analytics you can set up conversion goals, and therefore can quickly see on entry whether you have achieved any of your goals in the last set time period. Normally a goal will be a page, like a thank-you page, but in my case I want to track a link to an xml/rss file, which cannot be tracked by javascript.

Looking around online there are some examples of tracking rss – although many of them refer to google analytics’ old script which calls the function urchin. I need one which calls the newer pageTracker._trackPageview arguement. Most recommend the use of an inline javascript which fires the page tracker onclick. But I have several rss links on my website and I don’t want to relpicate this javascript behaviour across all of that code. Otherwise when it comes to changing the code I will need to manually go and update every link with the onclick. Also I want to seperate the behaviour of this javascript from the content of the website.

DOMScripting to the rescue

The solution to this problem is to use a DOM event to call the function. By adding a class to any links which are used to ‘Subscribe’ we can write a DOMScript which creates the javascript event on page load.

Tracking javascript events

So this is what you need to do:

add a class of “rss” to each instance of the RSS link you want to track
add the following code to your javascript library

/* track links with the class of rss */
function trackRss(){
if (!document.getElementsByTagName) return false; //added to test the browsers DOM compatibility
if (!document.getElementsByTagName('a')) return false; //added to test for any divs
var divs = document.getElementsByTagName('a');
 for(var i=0,j=divs.length;i
Note, you will have to add in your urchin tracker ID within the main function at the end of this code. This whole function will now need to be called on page load. I would recommend using an addLoadEvent script like the one below.
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(trackRss);

The result of all of this is that a click on any link with the class “rss” will fire google analytics, and in this example it will read the page as “rss/subscribe” (from the trackPageview)
Extensibility
I think there may be a way of making this more scaleable by getting one function to handle multiple tracking links. Could it use a rel attribute? So that you assign a class to identify it is a tracked link, and a rel to tell it what to call the link.

Larger, more useable click areas using clickBox

Al Stevens — Tue, 22 Jul 2008 11:49:41 +0000

Enlarging the click area of an element has obvious benefits for a person using your website, making it easier to get from one page to another without having to target small links with their cursor. Using this simple DOMscript we can easily make our click areas much bigger and easier for people to click.

From both a marketing and usability point of view it is always important to make sure that people using your website can get from A to B as easily as possible.

But how can we achieve this clickable-ness without reverting back to making our banners out of a single, inaccessible image? And how do we do it in a way that will help, rather than hinder our natural search listings?

Well we could:

Make an image with all our text and graphics. But this is at the cost of scalability and accessibility, and maybe more importantly will not be recognised as well by google.
We could create our nice sematic html, get it to render correctly. Apply a link to the key phrase using an h tag (thumbs up for google), and apply an onClick event to the div.

That’s genius. Google can see our h tag link and rank it appropriately. The html is well formed and accessible AND we can make the whole area clickable. and it could look something like this.


Buy it, its good
It won't let you down - ever
Click here to buy it now

But wait a minute – there’s a fly in the ointment. Not only do we have to apply an inline javascript – breaking the golden rule of seperating content and behaviour, but we also have to duplicate the url. Not so bad in itself – but opening us up to errors if we have lots of these types of links. Furthermore, of we do have lots of these types of links, we are replicating the document.location.href behaviour over and over again

Enter clickBox();

clickBox is a handy little domscript which applies this behaviour on the DOM event of page load. By applying a class name of clickBox to a div you want to be clickable it will turn your core html from this:


Buy it, its good
It won't let you down - ever
Click here to buy it now

into this


Buy it, its good
It won't let you down - ever
Click here to buy it now

The script

I have to thank Jay Bishop for this script, who developed this script to implement clickBox on the First Choice Holidays website.

It works by traversing the DOM and locating each div with a class of clickBox. It then looks at it’s children for any a tags and takes the first a tag and applies the onclick event to it. Whats even better is that although the whole box will be clickable, secondary or tertiary links will still maintain their correct link, so there are no problems with over-riding other links.

/* makes all of div clickable, linking to the first href found within the row. You simply need to add the class 'clickBox' */

function clickableDivs(){

if (!document.getElementsByTagName) return false; //added to test the browsers DOM compatibility

if (!document.getElementsByTagName('div')) return false; //added to test for any divs
var divs = document.getElementsByTagName('div');
 for(var i=0,j=divs.length;i
Implementing the script
In order to call the funtion on page load we use an addLoadEvent script adapted from Simon Willison’s original. In our case we created a library of DOM scripts which includes both the addLoadEvent script and the clickBox script.
Insert the DOM Scripts Library into the head of your document.

Add the class to any element which you want to make clickable

Buy it, its good
It won't let you down - ever
Click here to buy it now

and were done.
Extensibility
Adding any behaviours to these elements in the future (ie add an icon in there, put in a background colour etc) is also a synch. All we need to do is add the required functionality into the script and it will automatically be applied to all of the clickBox elements. Yes, it really is that easy!
Update
I have removed some unneccessary functions from my original clickBox code which were proprietry to our website code. Thanks Jay for pointing these out.

Making google analytics unobtrusive

Al Stevens — Sun, 20 Jul 2008 14:43:37 +0000

Whenever I implement a new tracking script it always strikes me how obtrusive the scripts tend to be.

They tend to put the script either at the start or the end of the document body, and they tend to use nasty document.writes. I love google analytics but sadly on this count it is no different. In this article I look at implementing google analytics in a less obtrusive way.

You may wonder why I would want to look at the implementation of something which does wholly what it sets out to do, so I will start by explaining just a little about how I think the implementation should work.

In order to create a manageable code base I want to make sure the javascript is located in just one place. That is to say, if I want to modify the code at some point, I want to do it in just one place
In order to re-use the code I want it to be easily transferrable, without heavy code re-writes
To maintain the integrity of my website I want the behaviour (javascript) to be seperated from the content (html), just in the same way that we do with layout (css) and content (html)
Should heaven forbid, google’s servers fail to respond quickly I don’t want it to delay the loading of the whole webpage. This could be a point of contention for some people as if the webpage loads without the analytics script, and a person navigates away to another page, then we have not tracked them. Not good. I would question those worried about this scenario as follows: Which is more important in helping the person fulfill their objectives on your website, the tracking script, or the ability to use your pages as they are meant to be used without waiting. I think the answer is clear.NOTE: Your tracking script provider might have some issue with this. I have heard of in some cases the preference for the tracking script to be after the opening body tag. I think however that you need to think about the people who use your website rather than the ability to track their movements. Having the script in line might also help providers maintain a 99.9% uptime record, since if their server is down their script will stop your page loading. This in turn will make you less likely to navigate to a new page, which will mean that in theory at least, the server has been down less.

So how do we achieve this

Simple really, using DomScripting methods we will

seperate the javascript into it’s own file (This fulfills 1,2 and 3)
call the javascript on page load instead of in line (This fulfills point 4)

Step 1 – grab your starting code

In my case I was provided with the following code by Google Analytics

There are two parts to this script. The first actually loads an external .js file from google using the nasty document.write. The reason it loads it in using javascript is that the script is determining whether it resides on a secure server or not. This resolves any issues with ‘mixed’ security error messages on secure servers.

The second part assigns your unique user id and calls a couple of functions from the tracking code

Step 2 – putting it all in one script

So the first thing we need to do is create a script and insert it into the head of your document. (Or wherever you are importing the rest of your scripts)

Step 3 – heres the codey bit

The first thing we need in our code is a function that will call the Google Analytics function on the DOM event of page load. There are lots of references out on the web detailing scripts which allow multiple onLoad functions to be called, and I believe that the one used here is based on Simon Willisons addLoadEvent script. This script is a function that that you can call, to in turn call other functions on page load:

/* Simplifies onload, you will no longer have to add an onload event call just call addLoadEvent */
function addLoadEvent(func,arg){

if (!arg){
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
}
}
  else{/*if the onload event has an argument/parameter cater for that*/
  if (arg){
  oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func(arg);
    }
     window.onload = function() {
      oldonload();
      func(arg);
    }
  }
}
}

Now we have a function which can call our analytics function on load we just need to convert the javascript to make it a littel less obtrusive. The more tricly bit involves loading the external js file which I mentioned earlier in part one. For this we create a function which appends the script to the head of the document. This script is called immediately

function loadGAScript(){
    /*Check browser for Dom compatibility*/
if (!document.getElementsByTagName) return false;
/*Determines whether the page is using a secure or unsecure protocol*/
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
/*Writes in the script to the document head*/
var gaScript = document.createElement("script");
gaScript.setAttribute("src",gaJsHost +"google-analytics.com/ga.js");
gaScript.setAttribute("type","text/javascript");
var domHead = document.getElementsByTagName("head")[0]
domHead.appendChild(gaScript);
    }
    loadGAScript();

We then just need to call ‘part two’ of the script on page load. SO we create a function out of it:

/*Calls the analytics function*/
function callGA(){   
var pageTracker = _gat._getTracker("UA-999999-1");
pageTracker._initData();
pageTracker._trackPageview();
}

and then once the dom has loaded we will call this function

addLoadEvent(callGA);

Putting it all together

So heres the easy bit.

Download the javascript file
Add a reference to the script in your document
Customise your user id

and you’re done