Do you use Google Analytics (GA) for tracking visitors to your website? Yes? Then read on. If you don’t currently use GA on your website then this post isn’t going to be relevant for you. But I would then ask, you are using something to track your site’s users aren’t you?
Note: Throughout this post I just talk about GA, but this script can be used with Urchin too. Also, be warned that this post is aimed at web developers with a technical background.
What is event tracking?
Event tracking is a feature of GA that allows you to collect data about things your site visitors do, in addition to just tracking page views. The data you collect is also completely separate from your pageviews so you don’t artificially inflate your data.
| Site feature | The event tracking data will tell you… | The data won’t tell you |
|---|---|---|
| Links to downloadable files | What was downloaded and how many times over the time period | If the user actually opened the document after they downloaded it, or if they then forwarded it on to someone else |
| Links to email addresses | How many times the link was clicked | If the user went on to send the email |
| Links to external websites | How many times the link was clicked | If the user then clicked their back button and came back to your site (that will show up in the referrers report instead) |
You can also use event tracking for monitoring events and actions on embedded multimedia (play, stop, mute, etc.). If you’ve got a dynamic website or web application — perhaps something that uses AJAX to fetch or update data as part of a user’s interaction — you can apply event tracking to all sorts of parameters.
What’s the catch?
Well there’s no single catch. There’s actually two.
The first catch is that Google will only track 500 events per user, per session. So don’t go crazy, especially with custom events. For instance, don’t create a custom tracker that fires an event for every second an embedded video is playing; maybe the play, stop, pause functions are all you really need to record.
The second catch: installing the standard Google Analytics tracking code, the snippet that goes in the head section of your HTML page, is not enough. Triggers need to be added separately to each item on a page you want tracked. On a small site, or in cases where you want to track only one or two things, you might consider adding the tracking code by hand. It’s actually pretty simple: you just specify a category and action, and an optional label.
As an example: a link from your website to this post might look something like this:
<a href="http://digital.govt.nz" 'external-links', 'click', 'The awesome http://digital.govt.nz website']);">Read Nathan’s blog post on the digital.govt.nz site</a>
The example above would work as follows:
- A user reads a page on your website that mentions this post as a place to get free code.
- The user thinks the post sounds awesome so they click on the external-link and get taken to the Web Toolkit site.
- Your GA account records the external-link category and the click event, but instead of using the URL from the page, GA will use the label, if you provided one. Labels can be useful if you need to provide a plain English description of what event is taking place. Just make sure it’s unique to this event or your data will be aggregated in the GA report.
No tedious manual edits are required, otherwise known as “free code!”
GA doesn’t work unless the user’s browser can run the JavaScript that collects the data and pushes it to your GA account, so it’s possible to use JavaScript to automatically add the event tracking for any downloadable file, email address link, or external website link on every page of your site. Some companies want to charge for their versions of the event tracking script, but we’re giving it away for free!
| If your site… | Then use this version… |
|---|---|
| Already uses jQuery | ga-urchin-event-track-jquery.js or ga-urchin-event-track-jquery-min.js |
| Does not use jQuery | ga-urchin-event-track.js or ga-urchin-event-track-min.js |
Customising the code
Depending on the needs of your specific site, you may need to tweak the code a little bit and configure it to your specific needs. It doesn’t matter which version of the code you use. The instructions below are the same for each version. If you do customise the code, I strongly encourage you to minify it after you’ve tested it. Doing so can cut the size of the file in half and therefore won’t make your pages any slower to load.
You can minify your JavaScript after customising the script by using online tools like http://www.minifyjavascript.com/.
Choosing file extensions to track
By default, the tracking script will track a wide variety of file types. Update the following line in the code with the file extension of any additional files you want tracked automatically.
var fileExtensions = "7z|aac|arc|arj|asf|asx|avi|bin|bmp|css|csv|doc|docm|docx|exe|gif|gz|gzip|hqx|jar|jpeg|jpg|js|mp2|mp3|mp4|mpeg|mpg|mov|movie|msi|msp|nzb|odb|odf|odg|odp|ods|odt|pdf|phps|png|ppt|pptx|qt|qtm|ra|ram|rar|rss|rtf|sea|sit|tar|tgz|torrent|txt|wav|wma|wmv|wpd|xls|xlsm|xlsx|xml|z|zip";
File path filter
Change this part of the code if your CMS produces unwieldy URLs for documents, or like some CMS tools I’ve used that shall remain nameless, change the URL of a document every time a new version is loaded. The file path filter can help you clean up the mess and push aggregated data to GA to make your reporting a bit easier.
The filter uses a regular expression, and a tool like http://www.rexv.org/index.php?lang=en can help you construct the pattern to use for your site. Regular expressions can be a bit tricky, so you might want to find a friendly geek in your IT department to give you a hand.
Once you’ve worked out what filter you want to use change this line and put the filter pattern inside the double quotes on this line:
var pathFilter = "";
Tracked URL filter
This is another regular expression filter that’s useful if your GA reports include data for a number of subdomains. You can use this filter to stop GA recording external links when a user moves from one subdomain to another. The data will still be in your combined report anyway.
Again, working out the filter here could be tricky, and you might need to find that friendly geek and bribe them with a coffee. Adding the filter, though, is easy: just insert it inside the double quotes on this line of the code:
var trackedFilter = "";
Danger! Danger! Danger!
That get your attention? Good. This is important. Do not, I emphasise, do not modify anything else in the tracking script. If you do, chances are something will break. All of the things you can modify are in the first section of the file.
No warranty, express or implied
We’re already using this code on a number of sites managed here at Internal Affairs, and we’re progressively rolling it out to the other sites the Department has (will take a while, we have a lot of websites…)
The code works, and I’m confident it will work on your site too, but that’s not an excuse for you not to test it first. There are some limitations with this code, too. For example, you might want to setup different filters for different parts of your site—the code doesn’t currently support this: both the path and tracked URL filters are global to the whole site. If you’re a bit of a geek and want to help us extend the functionality of this script, get in touch.
Also, please let us know if you find a problem with the scripts we’ve provided here.
