We absolutely loved it from start to finish. Everything about the day way exceeded any expectations that we had and we came away from this amazing event with heads full of exciting new ideas and a heap of new industry friends.

In this brief overview, I’m going to focus more on our experience of the day as a whole rather than a review of each of the speakers, but I will list a few links to some great reviews that go into more detail of each talk at the end of this post.

The Conference

The venue for the conference was the Albert Hall in Nottingham, which provided an ideal setting for the day (even though the seats started to get a bit uncomfortable after a few hours). I kind of knew what the basic format of these types of events would be like, but I couldn’t quite picture in my mind beforehand how the day would pan out and what usual information I would be able to bring back and use in our day to day work here at Carron Media. At first, I was a bit worried that we would miss the start as the queue was literally around the block to get in, but fortunately Colly delayed the start until everybody was in. Even with the delay, the whole event felt very professionally organised, but still keeping a personal, intimate atmosphere.

Probably one of the most amazing aspects of New Adventures was the price; we paid £80 each for an early bird ticket. This wasn’t just a bargain, it was a steal. The opportunity to hear some of the industries top speakers was worth way more than this alone and when you factor in that it included lunch (the now infamous ‘Lunch in a bag’ complete with mini-quiches) and a free bar at the after party, it becomes even better value.

For the event, Simon produced a newspaper full of unique content and interviews and both PDF and physical copies can be purchased for a little as £1.50 on their website, which is well worth it and I would highly recommend that you buy one!

The Speakers

When I first saw the list of speakers, the two that immediately sprang out to me were Andy Clarke and Elliot Jay Stocks, whom I have admired in the industry and learnt a huge amount from and they certainly didn’t disappoint. Andy’s talk was beautifully crafted and used similarities in old school comic strips to tell his message about using space on a website to give the reader the impression of timing and telling a story.

The talks started of brilliantly with Dan Rubin‘s “The New Language of Web Design” talk where he spoke about the language that we use and just how important this language is when dealing with clients. This was the ideal start as it got my head thinking straight away.

Jon Tan‘s talk “Language and the Lizard Brain” was a very interesting and thought provoking insight into how we can understand the emotions of users and use them to build better websites. The last talk of the day was from Brendan Dawes who’s highly entertaining talk focused on product design and his passion for stationary.

One thing that certainly resonated with me was the part of Tim Van Damme‘s talk where he detailed how it was our responsibility to pass on our knowledge back to the community. It was really reassuring to hear this as I learnt my way in the web business from the blogs and websites of other designers & developers and I think that it’s important that this trend continues. I can’t think of many of industries where this transfer of knowledge so openly happens and that makes us pretty unique.

I have to admit, I was initially expecting a bit more practical geeky stuff and perhaps some more code based tutorials form the talks, but as it turns out, I think all of the talks were way more useful and I’m glad that they weren’t all about code and design trends.

The Web Community

Even though the event was really well organised and the talks were inspiring and entertaining, there main thing that both Lou and I took away with us was the sense of being part of a community, even though we had only met everybody for the first time that day. As I said, I think that this is really unique and there aren’t many industries where we have the opportunity to talk to so many like minded people.

There are no ego’s or social hierarchies here, just lot’s of liked minded individuals who are more than willing to chat and share their knowledge with you. And you can’t beat that.

Thanks

This really was a truly wonderful and enjoyable experience and I really want to thank Simon Collison and his team of hard working volunteers for putting on such a well organised event. It was so apparent that Colly put heart and soul into getting it right, and he did.

Also, thanks to all of the speakers for giving us a load of great talks and sources of inspiration. Although I’m risking sounding a bit cliched and over emotional, we’re can’t explain enough how much we enjoyed meeting so many new people and we are really looking forward to catching up with you all again in 2011 and beyond!

Other Useful Reviews

• http://www.bigbadbobthefish.com/leakys-adventure-to-naconf-part-1/
• http://phil.replete.nu/new-adventures-2011/
• http://beneverard.co.uk/blog/new-adventures-in-web-design-2010/
• http://simonyoung.net/blog/new-adventures-in-web-design-review/

UPDATE: Read Lou’s review on her day out

If you, like us, believe that this is a very worthwhile cause, please head over to This One’s 4 Ruby site where you can find out about the cause and what fundraising events that are being planned. If you simply want to help by making a donation, the How to donate page will give you all the information you need.

We hope you get better soon Ruby!

It has taken us a while to make this decision, but the office that we have finally settled on is in the perfect location for all of us and, I’m happy to say, there are loads of nice pubs within a very small walking distance. The building itself is Grade II listed and dates back to the middle of the 18th Century, although it has been modified into its current form in the early part of the 20th Century.

So as of Wednesday last week, our new address is:

19 London End,
Beaconsfield,
Buckinghamshire,
HP9 2HN

Here is our office on a map, if you are ever in the area, please stop by and say hello!

Everything was working nice and smoothly until Twitter changed the way users can retweet from the main Twitter website. Not that this was a bad thing, the new(ish) functionality was a great addition to an already great service. Before the changes, users manually typed ‘RT’ at the beginning of their tweet to signify that they have retweeted it from another user. Now days, you simply click a button which will take care of it for you.

But, as Kerem pointed out in the comments of the original article, our code does not display these new retweets. Instead, it just displays an empty space where your latest tweet should be sitting pride of place. In nearly all circumstances, I would imagine that this is not the desired effect, especially as the retweet functionality is used a lot more these thanks to the new functionality.

As a result, I have got back to the drawing board to investigate how we can get around this problem and improve the current script. If you wish, you can download the sources files before continuing on.

The Cause of the Issue

The find out why this was happening, we started looking in the Twitter API Wiki. The statuses user_timeline page revealed that the user_timeline API call does not support the new retweets when the data has been requested in the JSON or XML formats:

“Note: For backwards compatibility reasons, retweets are stripped out of the user_timeline when calling in XML or JSON (they appear with ‘RT’ in RSS and Atom).”

The obviously impacts the code we wrote in the original article as we used the JSON format for our returned data. Unfortunately, they don’t expand as to why the no longer support these formats, so we are just going to have to take their word for it.

The Solution

As it turns out, the solution to this issue is relatively simple, but implementing that solution is slightly trickier as it will require some server-side code (of which I will go into later).

As per the Twitter API, the user_timeline API call still supports the RSS and Atom formats. Therefore we can simply change the API request URL to return our data as an RSS feed. If the latest tweet is a retweet now, the text is simply prefixed with an ‘RT’. This is much more useful that a blank tweet, as I’m sure you will agree.

This method does have a few drawbacks though. In our code, we use the jQuery .getScript() method to send our API call to Twitter and return our tweet. This is fine for the JSON format (it’s JavaScript, which can be opened with .getScript), but is not valid for the XML of the RSS feed.

Therefore, we are going to use jQuery’s .get() method instead. However, it not a straight swap because for security reasons, this method will (quite sensibly) only let you request local files with this function and our request is going directly to the Twitter API (i.e, not local).

Cache the tweet locally with PHP

There is a really simply solution to this problem though, using a PHP proxy script, we can load the data locally.

This file will sit locally on you server, and instead of calling the Twitter API directly, we will call it in the query string of this proxy.php file. This means that our new request URL will look as follows:

proxy.php?url=http://twitter.com/statuses/user_timeline/' + username + '.rss?count=1

Here is the source code of the proxy.php script (the file is included in the download at the bottom of the page). Save the file to a web accessible folder on your server:

<?php
// PHP Proxy
// Loads a XML from any location. Used with Flash/Flex apps to bypass security restrictions
// Author: Paulo Fierro
// January 29, 2006

$session = curl_init($_GET['url']);
curl_setopt($session, CURLOPT_HEADER, false);
curl_setopt($session, CURLOPT_RETURNTRANSFER, true);
$xml = curl_exec($session);
header("Content-Type: text/xml");
echo $xml
curl_close($session);
?>

Basically, this script uses the PHP cURL Extension to open the file sent to it in the query string. It then strips away any additional information, such as the file headers, to leave the raw data (the XML of the RSS feed in our case). Finally, it changes the output header to XML and the returns the raw data.

The new jQuery

As we have changed the format of our data, will we need to change the way jQuery parses that data. In the original article, we basically took Twitters own code and tweaked it slightly. This time around, it’s going to be easier and quicker just to rewrite it.

The new JavaScript file (named twitter2.js) is included in the download for this article.

Here is the twitter2.js file in full. I will run through the code in chunks to give you an understanding of what is going on.

UPDATE: Ed Knittel quite correctly points out in the comments that the date format in the RSS results differs to that of the JSON results. Therefore, I have updated the code below to reflect this format difference.

function relative_time(time_value) {
    var newtime = time_value(',','');
    var values = newtime.split(" ");
    time_value = values[2] + " " + values[1] + ", " + values[3] + " " + values[4];
    var parsed_date = Date.parse(time_value);
    var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
    var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
    delta = delta + (relative_to.getTimezoneOffset() * 60);

    if (delta < 60) {
        return 'less than a minute ago';
    } else if(delta < 120) {
        return 'about a minute ago';
    } else if(delta < (60*60)) {
        return (parseInt(delta / 60)).toString() + ' minutes ago';
    } else if(delta < (120*60)) {
        return 'about an hour ago';
    } else if(delta < (24*60*60)) {
        return 'about ' + (parseInt(delta / 3600)).toString() + ' hours ago';
    } else if(delta < (48*60*60)) {
        return '1 day ago';
    } else {
        return (parseInt(delta / 86400)).toString() + ' days ago';
    }
}

$(function() {

    var username = '<yourtwitterusername>';

    $.get('<path-to-file>/proxy.php?url=http://twitter.com/statuses/user_timeline/' + username + '.rss?count=1', function(tweets) {
        $(tweets).find('item').each(function() {
            var tweet = $(this);
            var pattern = new RegExp("^"+username+": ","g");
            var status = tweet.find('description').text().replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g, function(url) {
                return '<a href="'+url+'">'+url+'</a>';
            }).replace(/\B@([_a-z0-9]+)/ig, function(reply) {
                return  reply.charAt(0)+'<a href="http://twitter.com/'+reply.substring(1)+'">'+reply.substring(1)+'</a>';
            }).replace(pattern,'');
            var tweetDate = relative_time(tweet.find('pubDate').text());
            $('.loading').fadeOut(750, function() {
                $('#latest_tweet').append($('<p>&ldquo;'+status+'&rdquo; <small>- <span>'+tweetDate+'</span></small></p>').hide().fadeIn(750));
            });
        });
    });
});

First of all, we define a function that turns the time and date of the tweet into something that is more understandable to humans. This is identical to the original, so I won’t go into detail again.

$(function() {

    var username = '<yourtwitterusername>';

Here we create the standard jQuery on DOM ready function and set a variable called username to store your Twitter username:

$.get('<path-to-file>/proxy.php?url=http://twitter.com/statuses/user_timeline/' + username + '.rss?count=1', function(tweets) {

Next we request the RSS data from Twitter using jQuery’s .get() method. This is where we load your latest tweet via the proxy.php file (make sure you include the correct file path to the proxy.php file if it is in a different directory to this JavaScript file). If you would like to load more than one tweet, change the final option in the URL (e.g. enter count=3 at the end of the query string if you would like to return three tweets). The data returned from the Twitter API in then stored in an object called tweets which can the be called in the callback function.

$(tweets).find('item').each(function() {
    var tweet = $(this);
    var pattern = new RegExp("^"+username+": ","g");

In the next block of code, we need to search through the XML to find the text and time of each tweet. We use the .find() method to search through the XML and locate each XML element called ‘item’. We then loop through each of the discovered elements. We set a variable called tweet which caches the currently selected element in the loop.

The next step is to create a new RegExp object. By default, you may have noticed that the Twitter API not only prefixes the tweet with RT if necessary, it also prefixes every tweet with your Twitter username. The regular expression here simply matches your Twitter username so we can remove it from the tweet later on.

var status = tweet.find('description').text().replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g, function(url) {
    return '<a href="'+url+'">'+url+'</a>';
}).replace(/\B@([_a-z0-9]+)/ig, function(reply) {
    return  reply.charAt(0)+'<a href="http://twitter.com/'+reply.substring(1)+'">'+reply.substring(1)+'</a>';
}).replace(pattern,'');

Now, at first glance, this chunk of code may look a bit confusing, but don’t let that put you off. We start by extracting the actual text of the tweet from the XML data, again using jQuery’s .find() method. We then pass this text through three regular expressions. The first regular expressions searches for any URL’s in the text and replaces them with HTML <a> links. The second expressions searchs for the Twitter @ references and again turns them into actual links. The final filter uses the regular expression that we set up earlier that removes the username from the beginning of the tweet.

 var tweetDate = relative_time(tweet.find('pubDate').text());
     $('.loading').fadeOut(750, function() {
         $('#latest_tweet').append($('<p>&ldquo;'+status+'&rdquo; <small>- <span>'+tweetDate+'</span></small></p>').hide().fadeIn(750));
     });

This final chuck extracts date and time of the tweet and passes it through the relative_time to turn it into a nice readable format. The last bit inserts the tweet into your website in exactly the same way as the original script.

Conclusion

The code in the original article has proved quite successful and I think many of you have found it useful. Hopefully the new version will continue to be helpful in your projects. Please let us know if you have used this script, we would love to hear if you have found this useful in any way.

Thanks!

Resources

• The original article
• Twitter API Wiki
• Twitter API – statuses user_timeline
• PHP proxy script
• PHP cURL Extension

The people at the Hampstead Theatre came up with the idea to create a play using content completely written by visitor submissions and then to perform it at the theatre during their writing festival. Every visitor to the site can see the last five submitted lines and then add their own line to the play.

Please visit the You Write The Play site and submit your line. There have been some hilarious lines submitted already and the final play is set to be fantastic, if not a little bizarre.

Thanks!

There are several well supported campaigns running in the web design community (and beyond) to bring the end to this life sapping browser. The most notable are the Death to IE6 and the Bring Down IE6 campaigns, both of which receive my full support for trying to change the web for the better. Most of the big names on the Internet are getting in on the action as well with Facebook and YouTube (amongst others) displaying messages to users who visit their sites using IE6.

The big reality check

However, a conversation with a old friend of mine brought me crashing back down to Earth and to remind me of the true reality of the situation. There are an extraordinary amount of web users out there who still have to rely on (through no choice of their own) the services of IE6 to provide them access to the Internet.

Why? Because the corporate networks on which the users browse through to 8 hours a day are still running IE6. For example – my friend works in the IT department of a fairly large law firm in London. They have spent the last 2 and a half years deploying Internet Explorer 7 to their users. The main reason for this massive project is the amount of bespoke web based applications that their business relies on to function. The money men of world don’t care if a users browsing experience is ruined by an out of date browser, especially when the bill to replace the old systems could run into the tens of thousands of pounds.

There is even more reason for large companies to stick with the old browser, Microsoft will still support Windows XP SP3 (of which IE6 is a supportable feature) via their Extended Support program until April 2014 – See Microsoft’s Windows XP: The facts about the future article and the Microsoft backs long life for IE6 BBC News report.

Use your website statistics wisely

This notion of large companies sticking with IE6 is supported when we looked at some global usage stats for the different browsers. The W3Counter Global Stats site claims that in August of 2009, IE6 still held a 14.04% share of the global Internet browser market, while Hitlist market share stats show the August figure to be 25.25%.

Of course, every website is different. You (or your web developer) must all check your own site statistics to see what your percentage of your visitors are using IE6. If the numbers seem too big for you to ignore, then don’t ignore them! Using my friends company as an example again, their website statistics show that over 40% of their visitors are using IE6, and that doesn’t include their own staff! I can only imagine how many companies out there are in the same situation.

Conclusion

The moral of the story is this – for the majority of websites, IE6 is here to stay. If yours or your clients site stats suggest that your visitors are still using IE6, then you should support it. Simple as that. It’s your responsibility to provide as many of your visitors with the best possible experience when they visit your site. If that means spending those extra hours fixing the problems created by IE6, then so be it. The web, after all, is for everybody to enjoy.

What are your views on this? We would love to hear them. Please comment below and let us know what you think.

Thanks!

I’m pretty sure that it has not escaped your attention that Twitter is an invaluable tool if you want to communicate with your clients and peers. As you are spending all this time tweeting, it makes sense to display this information on you own website so you can draw in more followers on Twitter and get your voice heard.

There are quite a few tutorials available on this subject and several jQuery plugins that will display your tweets for you, all of which are very good in their individual way. However, this tutorial will show you just how easy it is to use the Twitter API tools with a tiny bit of jQuery to display your latest tweets in a fully customisable, simple and functional way.

First we will create a very basic HTML document to display our latest tweet. Then I will show you how to get the Twitter JavaScript code which will translate the returned data for us. We will be using our Twitter account, @carronmedia in the examples, please feel free to follow us.

View Demo

The Twitter API

The nice people over at Twitter have provided us with a selection of tools, know as API’s, that allow us to easily use and update information on their servers. For this tutorial, we are going to concentrate on the most basic of these functions which is to simply retrieve the latest tweet for a selected Twitter account. There is an API for pretty much any programming language and plenty of documentation to back it up. Head over to the Twitter API Wiki where you will find all the information you need.

Why bother using jQuery?

Although Twitter is a wonderful service, it can suffer time to time from a bit of overcrowding and as a result, their servers can be a bit slow in returning data to your website. This can cause undesirable problems with your site and prevent the other data on the page from downloading.

We can reduce these problems by using the jQuery $(document).ready() method to load the our modified JavaScript file after the DOM has loaded and also allows to to give the end user some feedback (in the form of an loading .gif image) to let them know that some data is on its way.

The basic HTML

Create a new file in your project and call it index.html. Open it up and enter the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My latest Tweet</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="twitter.js" type="text/javascript"></script>

</head>

This is standard XHTML document so we have specified a DOCTYPE and a page title. The first thing we need to do is load the jQuery library. This is best achieved by loading the core file from a content delivery network such as Google’s. I have gone into more detail about this in a previous post, Extend Google Analytics with jQuery, so I won’t go into it again here.

We have also referenced a bespoke JavaScript file called twitter.js which we will create shortly. Make sure you get your folder path correct. For example, if you create your twitter.js is a sub-folder called ‘js’, the src attribute will become src="js/twitter.js".

Create a loading image

Before we continue, head over to ajaxload.info which, if you have never seen this before, is a great site where you can easily create a nice loading animated .gif file. Choose your design, or download the project source code and use the one I generated.

Now lets create the body of the html file. Here we will create a <div> element that will insert our tweet into. Also, there is a nested div within it that will hold our nice animated gif that lets the end user know that something will be loaded into this area.

Enter the following at the end of the file:

<body>

<div id="latest_tweet">
    <h3>Twitter</h3>
    <div class="loading"></div>
</div>

<a href="index.html">Reload</a>

</body>
</html>

There isn’t too much explanation need for this markup. The <div> with a class of ‘loading’ will have our loading .gif as a background image and will be faded out once our tweet has been successfully loaded.

Style the tweet

Finally we need to style this markup, add the following in the <head> section beneath the last <script> tag (in a real live project, you should create these styles in a separate .css file):

<style type="text/css">
body {
    font: 12px/16px normal Arial, Helvetica, sans-serif;
    color: #666;
}
#latest_tweet {
    border: 1px solid #dfdfdf;
    width: 250px;
    padding: 20px;
}
#latest_tweet small, #latest_tweet a {
    color: #7aa6cb;
}
.loading {
    background: url('ajax-loader.gif') center no-repeat;
    height: 60px;
}
</style>

Again, if you put your .gif file in a different folder, make sure you change the path to it in the styles.

Creating our Twitter JavaScript file

First of all, we need to create a local copy of the Twitter code that will translate and format the JSON data. Go to your Internet browser of choice and enter http://twitter.com/javascripts/blogger.js. Depending on your browser, you will be shown the file in plain text or prompted to download it. Either way, save a copy of it into your project folder and call it twitter.js.

Open up your twitter.js file and you should see two functions, twitterCallback2 and relative_time. The twitterCallback2 function will translate the JSON data that we will request with jQuery and output it HTML and the relative_time function will format the time.

Lets start to modify the original code. Look for the follow line in the twitterCallback2 function:

 statusHTML.push('<li><span>'+status+'</span> <a style="font-size:85%" href="http://twitter.com/'+username+'/statuses/'+twitters[i].id+'">'+relative_time(twitters[i].created_at)+'</a></li>');

and replace it with this line:

 statusHTML.push('<p>“'+status+'” – <small>'+relative_time(twitters[i].created_at)+'</small></p>');

The original code will output a list item tag (<li>), which seems a little pointless as we are only going to display one tweet. So we have replaced it with <p> tags and reformatted the HTML a little bit.

Next, delete the following line at the end of the twitterCallback2 function:

document.getElementById('latest_tweet').innerHTML = statusHTML.join('');

and in its place type:

$('.loading').fadeOut(750, function() {
    $('#latest_tweet').append($(statusHTML.join('')).hide().fadeIn(750));
});

This jQuery code will fade out the placeholder <div> which contains the loading image and then fade in our latest tweet in it’s place.

Finally, at the very end of the twitter.js file, type the following (make sure you change the username variable to the Twitter account who’s latest tweet you are going to display):

$(document).ready(function() {
    var username = 'carronmedia';
    $.getScript('http://twitter.com/statuses/user_timeline/' + username + '.json?callback=twitterCallback2&count=1');
});

This uses the jQuery getScript method to load the Twitter API script that will return our tweet. To break this down a little bit, the twitter API will accept a few different arguments to be appended to the end of the file which we are loading. The first argument we require is called callback. This refers to the name of the function that we want to load the returned JSON data into. In our case, the callback argument is equal to the name of the first function in our twitter.js file. The second argument, count, simply tells the Twitter API how many tweets to return. In our case, this is set to 1.

Conclusion

UPDATE: May 2010 – There is now a new updated blog article that follows on from this article. Once you have finished reading this, please read part 2.

Twitter is a fabulous marketing tool and can really help you communicate with your end users on your site. Having the ability to automatically display your latest tweet really helps visitors relate to you as a person. It is also a handy little way of showing that your site is active and there is a real human being behind it.

Have you extended this code further? Do you think that there are other uses for this technique? Perhaps you have written your own jQuery plugin with it. Please comment below and let us know, we would love to hear if you have found this useful in any way.

Thanks!

Resources

• Twitter
• Twitter API Wiki
• ajaxload.info

Ever since we launched Carron Media in March, there have been a few little bits of our site which we a) were not happy with or b) didn’t get around too in the first place. The main part of the site that required updating was the contact form. Although the WordPress plugin we used has been around for ages and is used by millions of bloggers, it didn’t give us the flexibility we were looking for. So now we have hand coded our own forms and along with a new standard contact form, we have launched a new online get a quote form.

The second element that was in need of an update was the footer of each page. We believe the new style footer not only looks better, but is easier to use and provides a lot more information and it gives us somewhere to include our latest updates on Twitter.

We would love to here any feedback you may have about any aspect of the new features or of Carron Media as a whole, so please comment below. Also, you can follow us on Twitter.

Thanks!

The aim of this tutorial is to show you how you can modify the standard Google tracking code using the power of jQuery to get extra information from your Google Analytics reports. With jQuery, we can get Google Analytics track your file downloads and clicks to external sites without having to trawl through your code and write any extra mark up.

We are also going to use a new feature of Google Analytics which are known as ‘Events’. This should give you a good base for you to build your own code and extend the power of Google Analytics even more.

Getting started

If you haven’t already, head over to the Google Analytics site and sign up for a free account. You will need to setup a Website Profile, which should be pretty self explanatory.

When you have your unique tracking code, either from your new Google account or from your current websites tracking code, take a note of the UA number, for example: UA-1234567-1. This is your unique identifier which tells Google what website to track and we will need it later on. If you already have the tracking code installed on your website, remove it now. Otherwise you could end up duplicating your stats!

Google Analytics Events

Before Google released the new pageTracker._trackEvent() function, we would use the normal pageTracker._trackPageview() function. To make your external links and file downloads stand out from your normal page visits, you can pass this function a modified url. For example, say we wanted to track the download of a PDF called myfile.pdf. We would add a pretend folder in front of the file name. This folder may not exist on your site, it’s there so you can easily spot downloads in your Google Analytics reports.

We could call this function like so:

pageTracker._trackPageview('/downloads/myfile.pdf')

You may wish to use this method instead of the newer functions, it’s up to you. However, I would recommend that you take a look into the new functions as it allows you to track much more.

For more information about tracking events read, the Google Analytics Event Tracker Guide. You will see how flexible the new method is and you can expand on this tutorial to track other events on your website.

Viewing you new events in Google Analytics

At present, the new event tracking function is still in beta on the Google Analytics site and not all accounts have access to view them by default. However, this is not a problem as you can add it in manually. When you are logged into your Analytics, type the following url into your browser: https://www.google.com/analytics/reporting/events. This will take you to events page. Once there, click on the “Add to Dashboard” button above the report and this will add the Events Tracking Overview section to your dashboard.

Integrating jQuery

There are a couple options available to you when you load the jQuery code; you can download a copy from the jQuery site and call it locally, or as we will do, call it directly from the Google code library. For more information why this is the better way to load jQuery, read 3 reasons why you should let Google host jQuery for you.

In the <head></head> section of your HTML, copy and paste the following code.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

This load the minimised version of jQuery 1.3.2, which is the current verison at the time of writing, you may wish to check to see if there is a newer version available. For more information about jQuery, take a look at the jQuery Documentation.

Writing the custom tracking code

Still in the <head></head>, directly beneath the code we have just inserted, enter the following:

<script type="text/javascript">
$(document).ready(function(){

    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
    $.getScript(gaJsHost + "google-analytics.com/ga.js", function(){

        try {
            var pageTracker = _gat._getTracker("UA-xxxxxxx-x");
            pageTracker._trackPageview();
        } catch(err) {}

        var filetypes = /\.(zip|exe|pdf|doc*|xls*|ppt*|mp3)$/i;

Instead of loading the Google Javascript directly in the mark up, we are using the jQuery $(document).ready function to load the code as soon as the DOM is ready, which means that our code is ready before any of the page content gets loaded. Therefore we can target elements, such as links, when they are loaded by the browser.

Next, we include the standard Google tracking code to register that the current page has been visited. The difference here is that we are using another jQuery function, $.getScript, to load the Google JavaScript file and then create a function to run once the file is loaded. Make sure you replace the UA-xxxxxxx-x with your own unique UA number. We then set a variable called filetypes which holds a regular expression to find any links with popular file extensions, you can add or remove any file extensions you wish.

Outbound links

Now we get to the part where we add the code which will actually start tracking the additional links. We will start with all of the external links on the page.

Add the following code to your script:

        $('a').each(function(){
            var href = $(this).attr('href');

            if ((href.match(/^https?\:/i)) && (!href.match(document.domain))){
                $(this).click(function() {
                    var extLink = href.replace(/^https?\:\/\//i, '');
                    pageTracker._trackEvent('External', 'Click', extLink);
                });
            }

The $('a').each function will target each <a> tag in turn and execute the code within the function itself against that tag. The first part of this function is to set a variable, href, which will hold the value of the href attribute of each <a> tag.

Our first if statement performs two checks. It is making use of the .match function to check to see if the value of our href variable either starts with http: or https: (using a simple regular expression) and that it does not contain the current domain of the website (i.e. it is external).

If this if statement is returned true, we then add a click event to the current <a> tag the our script is currently looking at. When this click event is triggered, we use another regular expression to strip the http:// or https:// from the link path. Finally, we use Google’s pageTracker._trackEvent function to send the event details to our Google Analytics account. The first option for the function it to set the link category, I have used ‘External’. The next option is the to set the action, this has been set to ‘Click’. The last option is to sent the link label. This is set to the url of the external link.

Mailto: links

The next type of link we are going to target are any email address links that may be on the current page. As you know, the email address is preceeded with mailto:, so we can easily pick them out with jQuery.

Directly after the last if statement, add the following code to your script:

            else if (href.match(/^mailto\:/i)){
                $(this).click(function() {
                    var mailLink = href.replace(/^mailto\:/i, '');
                    pageTracker._trackEvent('Email', 'Click', mailLink);
                });
            }

This works in exactly the same way as the external link if statement. We use a regular expression to find any email links, clean the link up by removing the preceeding mailto: and then fire off the Google tracking event.

File downloads

The last type of links we are going to track are file downloads. Again, using a regular expression, we will check each link and match ita againsts the filetypes variable we created earlier.

Add the following code to your script under the last statement:

            else if (href.match(filetypes)){
                $(this).click(function() {
                    var extension = (/[.]/.exec(href)) ? /[^.]+$/.exec(href) : undefined;
                    var filePath = href.replace(/^https?\:\/\/(www.)mydomain\.com\//i, '');
                    pageTracker._trackEvent('Download', 'Click - ' + extension, filePath);
                });
            }
        });
    });
});
</script>

Again, the process is the same, but this time we are going to extract the file extension into a variable called extension using yet another regular expression. If the link is an absolute link (i.e. it has the full http://www.mydomain.com/ in the file path), we removed the protocol and domain name as we don’t really need this in our Google Analytics reports as we already know that the link is local to our site. Make sure you replace mydomain.com with your own domain name.

Here is the code in full (with the gaps removed so it fits on the page better):

<script type="text/javascript">
$(document).ready(function(){

    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
    $.getScript(gaJsHost + "google-analytics.com/ga.js", function(){

        try {
            var pageTracker = _gat._getTracker("UA-xxxxxxx-x");
            pageTracker._trackPageview();
        } catch(err) {}

        var filetypes = /\.(zip|exe|pdf|doc*|xls*|ppt*|mp3)$/i;

        $('a').each(function(){
            var href = $(this).attr('href');

            if ((href.match(/^https?\:/i)) && (!href.match(document.domain))){
                $(this).click(function() {
                    var extLink = href.replace(/^https?\:\/\//i, '');
                    pageTracker._trackEvent('External', 'Click', extLink);
                });
            }
            else if (href.match(/^mailto\:/i)){
                $(this).click(function() {
                    var mailLink = href.replace(/^mailto\:/i, '');
                    pageTracker._trackEvent('Email', 'Click', mailLink);
                });
            }
            else if (href.match(filetypes)){
                $(this).click(function() {
                    var extension = (/[.]/.exec(href)) ? /[^.]+$/.exec(href) : undefined;
                    var filePath = href.replace(/^https?\:\/\/(www.)mydomain\.com\//i, '');
                    pageTracker._trackEvent('Download', 'Click - ' + extension, filePath);
                });
            }
        });
    });
});
</script>

Conclusion

With the power of jQuery and the new Google ‘Events’, it is clear that you can take your website statistics further and produce more meaningful reports. This will help you gain a better understanding of how your website is being used and what your users and looking for, which can only be better for all concerned.

You can download the full code below, make sure you add in your own UA number and domain name.

Have you extended this code further? Have you found any other uses for the new Google ‘Events’? Perhaps you have written your own jQuery plugin with it. Please comment below and let us know, we would love to hear if you have found this useful in any way.

Thanks!

Resources

• jQuery
• jQuery Documentation
• Google Analytics
• Google Analytics Event Tracker Guide
• 3 reasons why you should let Google host jQuery for you

I’m going to list a few of the more important tags here with some examples of their use. Hopefully this article will provide you with some guidance to why we should use them.

1. <address>

As the name suggests, the <address> tag is used to display contact details of the author of a web page. This means that you can standardised the format of either yours or your users contact details to make them easily identifiable.

The important thing to note is that the <address> tag is not limited to just a postal address, but you can include any contact details, such as a name, email, phone number, URL, etc.

For example:

<address>
    Written by: Ian Harris<br />
    Email: <a href="mailto:info@example.com">info@example.com</a><br />
    Phone: 01234 567 890
</address>

Although the <address>tag should be used where possible, that is a better alternative in the form of microformats. Take a look at the hCard Microformats wiki page for more information.

2. <abbr> & <acronym>

The <abbr> and <acronym> are two very similar tags that are used to provide the user with additional information about an abbreviated phrase. The <abbr> tag is used to define terms such as CMS (Content Management System). The <acronym> tag defines an abbreviated term as if it can be spoken as a word, for example Radar (Radio Detection and Ranging). These tags are incredibly useful because when the user hovers their mouse over the abbreviated phrase, the full defined description is displayed as a tool tip.

Here is the code for these two examples:

<abbr title="Content Management System">CMS</abbr>

<acronym title="Radio Detection and Ranging">Radar</acronym>

Hover over the following to see them in action: CMS and Radar

It is common practice to style these tags with a dotted bottom border so that users can identify that these tags have additional information attached to them:

abbr, acronym {
    cursor: help;
    border-bottom: 1px dotted #000;
}

Another good reason for using these tags is that they are used by screen readers and search engines to draw extra information from your content. This helps you to create accessible and search engine friendly content, which of course is what most of us are trying to achieve.

3. <cite>

The <cite> tag is used to indicate a citation and allows you to reference the source of information. This tag is probably most commonly used in conjunction with the <q> and <blockquote> tags as it allows you to specify the source of the quote.

As with the <abbr> and <acronym> tags, you can add the titleattribute to display some extra information when the user hovers their mouse of it.

For example:

<p><q>O Romeo, Romeo, wherefore art thou Romeo?<q> - <cite title="Romeo And Juliet Act 2, scene 2, 33–49">William Shakespeare</cite></p>

O Romeo, Romeo, wherefore art thou Romeo? – William Shakespeare

It’s worth pointing out that the <q> tag has only just been supported by Internet Explorer in version 8.

4. <del> & <ins>

The <del> and <ins> stand for deletion and insertion respectively. It’s quite common these days for an author to show the end user where content has been edited after it’s initial publication, especially when the content can be updated by more that one person. The <del>tag will add a strike-through to it’s contents, where as the <ins> will add an underline.

<p>My favourite type of music is <del>rock</del> <ins>reggae</ins>.</p>

This is displayed as: My favourite type of music is rock reggae.

5. <dl>, <dt> & <dd>

You are no doubt aware of the <ul> and <ol> tags and their uses, but there is another list called a definition list which looks like <dl>. In the traditional sense, this type of list should be used if you create a list of definition terms with associated descriptions. However, W3C list specification seems to indicate that you can use the <dl> tag to list any terms where there is a direct relationship between them.

The <dl> tag has two child elements which are <dt> and <dd> which stand for definition term and definition definition. There can be multiple <dd> tags associated with each <dt>.

For example:

<dl>
    <dt>HTML</dt>
        <dd>Hypertext Markup Language</dd>
</dl>
<dl>
    <dt>The FA Cup Final</dt>
        <dd>When: 30th May, 2009 3pm</dd>
        <dd>Where: Wembley Stadium</dd>
</dl>

This is displayed as:

HTML

Hypertext Markup Language

The FA Cup Final

When: 30th May, 2009 3pm

Where: Wembley Stadium

6. <sub> & <sup>

The final two tags in this list are subscript, <sub> and superscript, <sup>. The same results can be achieve using CSS, but whats the point when you can use these two built in HTML tags.

There usage can be seen in the following examples:

<p>The chemical formula for water is H<sub>2</sub>O.</p>

The chemical formula for water is H₂O.

<p>Today is the 12<sup>th</sup> April.</p>

Today is the 12^th April.

Conclusion

In reality, you may rarely use some of the tags listed above. However, you should definitely keep them in mind and make sure you use them correctly when the need arises. The key to writing semantic code is to use the correct HTML tags for the correct application.

Semantically written code will help you product search engine friendly and accessible content, which after all, is what we should all be doing.

Resources

• Wikipedia article about HTML
• hCard Microformats wiki
• W3C list specification