I had set up a couple of jCarousel arrays and found that one one page (which had it’s won unique styling) the carousel animation seemed to glitch, dragging the background with it in a jumpy, jaggedy manner.

The solution

Having searched online I couldn’t find any other instances of this. After half a day of de-constructing the page I finally found that the css file was to blame. It wasn’t the contents, but the file itself, which must have somehow become slightly corrupt or contained some hidden characters.

Either way I managed to find an earlier source file, save a new version and copy all the styles over.

Strange, but true and hopefully this post might save someone out there a great deal of time.

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:

1. add a class of “rss” to each instance of the RSS link you want to track
2. 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<j;i++){
  if (divs[i].className.match('rss')){ // .match to deal with multiple class names
   divs[i].onclick = function (){
		var pageTracker = _gat._getTracker("UA-XXXXXX-X"); //Enter your Google Analytics account ID here
		pageTracker._initData();
		pageTracker._trackPageview("/rss/subscribe/");
   }
  }
 }
}

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.

So why use Starkers? The Starkers theme is a brillant starting point from any Web Designer/Developer point of view since it gives us the clean starting point from which to style up the website. It starts by stripping out all css, and implements a universal reset like this one.This is fabulous since it never is easy modifying other peoples css. More importantly it cleans up the code generated with the result being clean, semantic markup which in theory makes the website more accessible, googleable, maintainable, and more visible by multiple devices. SO in theory, all the building blocks are in place for a highly accessible website.

Yesterday we went to the Shaw Trust in Wales to get our company website audited from an accessibility point of view. The Shaw Trust is a national charity that provides training and work opportunities for people who are disadvantaged in the labour market due to disability, ill health or other social circumstances. They offer a Web Accessibility Accreditation service to businesses which is designed to be the most comprehensive service available and endorsed by GAWDS (The Guild of Accessible Web Designers), it combines a full technical audit with rigorous disability user testing. Every member of the testing team is an experienced assistive technology user and understands the frustrations of not being able to access websites that don’t consider the needs of disabled users.

It was a really interesting day spending time with real people with differing needs, using the website on an array of different devices, from switches to screen readers. I have been involved with much discussion about accessibility – normally amongst colleagues and the wider online community, but had never spent time with real people accessing websites on all of these devices. Seeing all the little improvements we could make to our website – which would make a big difference for people of differing needs made me realise that I have kind of put accessibility no the back seat for a while. Resting happy that my semantic markup would be easily accessible to a screen reader – I had forgotten about the useful devices which can easily be implemented, from high contrast layouts and access keys to skip menus – which make a massive difference to all sorts of users.

Suffice to say it will be a while until we can implement these changes to our website but that got me thinking that it might be nice to include some of those accessibility features – as standard – in a Wordpress theme.

The Starkers Accessibility Theme

So I got to thinking that maybe I could build no the great work done by Elliot Jay Stocks by adding in some standard accessibility components into the Starkers theme. That’s where I am at the moment and I am wondering what features I would like to include. Off the top of my head I might add in:

1. Skip menu and access keys – hidden by css but accessible to keyboard and screen reader users
2. Style sheet switcher – to enable a high contrast layout
3. An accessibility guide for the website

Your feedback

Is there anything you think should be included, or not included in such a  theme. I’d love to hear your feedback

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:

1. 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.
2. 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.

<div class="myBannerAd">
<h3><a href="http://www.mygoodproduct.com/trackingurl/1789425311" onclick="document.location.href='http://www.mygoodproduct.com/trackingurl/1789425311'">Buy it, its good</a></h3>
<p>It won't let you down - ever</p>
<p class="button">Click here to buy it now</p>
</div>

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:

<div class="myBannerAd clickBox">
<h3><a href="http://www.mygoodproduct.com/trackingurl/1789425311">Buy it, its good</a></h3>
<p>It won't let you down - ever</p>
<p class="button">Click here to buy it now</p>
</div>

into this

<div class="myBannerAd clickBox">
<h3><a href="http://www.mygoodproduct.com/trackingurl/1789425311" onclick="document.location.href='http://www.mygoodproduct.com/trackingurl/1789425311'">Buy it, its good</a></h3>
<p>It won't let you down - ever</p>
<p class="button">Click here to buy it now</p>
</div>

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<j;i++){
  if (divs[i].className.match('clickBox')){ // .match to deal with multiple class names
  if (!divs[i].getElementsByTagName('a')[0]) continue; // to ensure no errors if href is not present
  divs[i].style.cursor = "pointer"; // change the cursor to a pointer if onclick is applied
   divs[i].onclick = function (){
     window.location = this.getElementsByTagName('a')[0].href; //regular link
   }
  }
 }
}

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.

<script type="text/javascript" src="/js/clickbox.js"></script>

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

<div class="myBannerAd clickBox">
<h3><a href="http://www.mygoodproduct.com/trackingurl/1789425311">Buy it, its good</a></h3>
<p>It won't let you down - ever</p>
<p class="button">Click here to buy it now</p>
</div>

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.

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.

1. 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
2. In order to re-use the code I want it to be easily transferrable, without heavy code re-writes
3. 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)
4. 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

<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">
var pageTracker = _gat._getTracker("UA-999999-1");
pageTracker._initData();
pageTracker._trackPageview();
</script>

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)

<script type="text/javascript" src="/wordpress/wp-content/themes/default/js/googleAnalytics.js"></script>

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