Use Google’s Asynchronous Tracking

We all need some kind of analytics for our web projects otherwise it’s like selling a product and not knowing how much profit you’re making.

Google Analytics suits most people as it has a huge range of features and, of course, it’s free.

The issue that has plagued Google Analytics is how (or more specifically where) you placed its tracking code into your html. In a similar way to Twitter, if you use Twitter’s own method of displaying your Tweets on your web page, the two required javascript files that you need to include in your html are always recommended to be placed at the bottom of your markup, just above the closing </body> tag. This is done so that your site can render everything properly and then loads your Tweets last. It makes perfect sense as if there’s an issue with the Twitter feed, it doesn’t hinder your site’s loading time.

The same principle applies to the Google tracking code. As it needs to load a javascript file (ga.js) and sync with Google, this could have an impact on your load time.

Google has a new(ish) code snippet that optimises how browsers load the ga.js file. The syntax is different but the tracking customisations are exactly the same. It allows the code to be placed within your head tags along with any other javascript file links and starts running in the background as soon as the page starts to load. The other obvious advantage is that Google’s tracking beacon will be sent a lot sooner before the user leaves the page.

Overall its a more efficient and semantically better way of using the Google tracking code in your markup. Let’s take a look at how to set it up.

Step 1
Remove the current tracking code from your page (if you have any customisations then copy it to a text file first to be safe).

Step 2
Go and grab the new code snippet: and paste into the bottom of your <head> section. Then get your unique web property ID (this is shown when you first log into your analytics account and is a code which looks like “UA-1234567-1”) and paste it in place of “UA-XXXXXXX-X”.

Step 3
Place any customisations back in using the asynchronous syntax (check the usage guide here: and you’re good to go!

Migrating to the new tracking code is quick and easy and will provide another tool in increasing your site’s load time and also pushing your analytics accuracy up a notch.


CSS Quick Tip #1 - 1px Bounce Click Effect

Have you ever been on a website a wondered how to achieve that nice 1 pixel bounce when you click on a link or button? It’s easy to do with a simple line of CSS applied to the a:active state:

a:active { outline: 0; position: relative; top: 1px; }

Give it a try, it’s a neat little effect that adds an extra touch to your links.


My first screencast. Tips on how to re-size rounded corners in Photoshop but maintain their radius.

*Apologies for the mouse cursor turning to a black square in this video. Must be a bug in Screenr. I’ll try and fix for next time*


Hello, and welcome…

Thanks for stopping by to check out my ramblings!

I’ve wanted to start a blog for a while now but couldn’t due to time constraints, that is until I discovered Tumblr.

I was thinking about doing a full on WordPress blog and even designed a few concepts but after getting into it further I realised I just didn’t need all the cool stuff that WordPress has to offer and my blog wouldn’t make worthy use of it. I intend to use this blog for shorter “tips and tricks” if you like.

Enter Tumblr. I had been keeping my eye on both Tumblr and Posterous for about the last year and at first it didn’t appeal to me. Not to say I didn’t think they were great, just how would I use them?  Then after going trough the “shall I use WordPress” dilemma, the penny dropped. The next step came deciding between them. Tumblr stood out to me as more or a community driven environment and seemed to be a few steps ahead in terms of themes. As I decided early on I wanted to design my own theme, I gladly handed Tumblr my details and away we went.

The theme you’re looking at now would not be possible without some help from Jeffrey Way over at Nettuts+. They have THE best tutorial on designing and building a Tumblr theme from scratch and really helped me with a few areas.

Thanks again for stopping by and I’ll start uploading some tips and mini-tutorialsvery soon.