Google Analytics: easier page tracking

Overview
Google Analytics is great. It's free and super powerful but... there is always a but!

Sometimes the tracking tags can be tough to understand. They can be tricky to implement if your CMS doesn't directly support them. Debugging can be 'gnarly'. Mix in Google Website Optimiser tests and you might end up biting of more than you can chew.

Moneyspyder has written two small skeletal javascript libraries that you can copy and use to make Google Analytics page tracking, transaction tracking and Website Optimiser implementation a bit easier.

We're trying to lower the bar to entry. We're not saying YOU MUST DO IT THIS WAY but we think this is one good way to start doing simple tracking and testing and we want to share some techniques with you. We're not saying the existing Google code is wrong or bad but if you want slightly cleaner pages and to get some extra value by abstracting out javascript code then this might be useful and it might even make managing your site easier.

The next few articles will cover smarter:

Page Tracking
Transaction Tracking
Website Optimiser tagging
All three together

Caveat
Feel free to take a copy of the scripts used in this article. Don't link to them - they will change over time and your tracking might break. Moneyspyder accepts no responsibility for harm to or loss of data if these scripts are used 'as is' or linked directly from the Moneyspyder server. You have been warned - so now let's inspire!

Simple smarter page tracking

Take a look at our first page - Page tracking example

Spectacular it is not...at least at face value. View the source to see the interesting bits.

1. In the

head

section you will notice a javascript include

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

Take a look at the ms_ga.js source. The section that we are interested in is:

ms_ga_pagetrack(['ua-1','UA-7862117-1'],'/skeleton/tracking');

ms_ga_pagetrack(['ua-1']);

2. In the html, notice we are making two calls to ms_ga_pagetrack
The parameters that are expected are:

• An array of one or more strings - 'UA-XXXXXXX-X'


• An optional string to use as the page URI

The first parameter as an array enables you to track pageviews in multiple accounts without having to repeat the tracking code. The Google tracking method

pageTracker._trackPageview();

can take a parameter to replace the tracked page url.

Simple.

Additionally, if the Google ga.js javascript (notice the first two lines in ms_ga.js?) changes, you only change the ms_ga.js file and all your site pages remain untouched. This extra 'abstraction' layer has been helpful to Moneyspyder in the past.

Debugging
Debugging Google Analytics page tracking can be a lengthy and frustrating process:

• Try a tracking script


• Hit a page (along with everyone else who uses your site


• See if the page view appears in the GA reports


• Fail? Sigh...Rinse and repeat

We prefer to do this in real time. Yup, results while you wait. Go and get the Live HTTP Headers Firefox plugin. Start it up (Tools menu in FireFox). Go to the 'Config' tab and click the 'filter URLs with regexp' checkbox. Then put this string in the corresponding text box:

google-analytics.com

So now the only values you will see in the HTTP headers output will be related to Google Analytics.

Reload http://moneyspyder.co.uk/ms_page_tracking.html. The HTTP Headers output will contain 4 sections of similar format. The first section is the page including ga.js from Google:

http://www.google-analytics.com/ga.js

GET /ga.js HTTP/1.1
Host: www.google-analytics.com
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.0; en-GB; rv:1.9.1.3) Gecko/20090824 Firefox/3.5.3 GTB5 (.NET CLR 3.5.30729)
Accept: */*
Accept-Language: en-gb,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive
Referer: http://moneyspyder.co.uk/ms_page_tracking.html
If-Modified-Since: Tue, 13 Oct 2009 18:39:01 GMT
Cache-Control: max-age=0

HTTP/1.x 304 Not Modified
Last-Modified: Tue, 13 Oct 2009 18:39:01 GMT
Date: Mon, 26 Oct 2009 12:14:29 GMT
Vary: Accept-Encoding
Cache-Control: max-age=604800, public
Server: Golfe
X-XSS-Protection: 0
----------------------------------------------------------

This output tells me first of all, the nature of the request being made - we're asking for ga.js from Google. There is some http header info about the browser I am using, an HTTP response code and not a lot else of anything of interest.
The next section gets more interesting:

  http://www.google-analytics.com/__utm.gif?

This request won't appear in the HTML source of the page. This is the output from _trackPageview. The data appended to this gif request is how Google Analytics gets the data into Google Analytics. Some interesting values here:

utmp=%2Fskeleton%2Ftracking
utmac=ua-1

utmp is the page path - remember we set this using the url parameter in our own method call? This is where you see the page path that is being sent to GA. utmac is the GA account being used for reporting. We set two accounts to be used - 'ua-1' and 'UA-7862117-1'.

So, the first request we saw in the HTTP Headers output was the request for ga.js:
http://www.google-analytics.com/ga.js

Second, we reported the pageview using /skeleton/tracking and ua-1:
utmp=%2Fskeleton%2Ftracking&utmac=ua-1
ms_ga_pagetrack(['ua-1','UA-7862117-1'],'/skeleton/tracking');

Third, we reported the pageview using /skeleton/tracking and UA-7862117-1:
utmp=%2Fskeleton%2Ftracking&utmac=UA-7862117-1
ms_ga_pagetrack(['ua-1','UA-7862117-1'],'/skeleton/tracking');

Fourth, we reported the pageview using /ms_page_tracking and ua-1:
utmp=%2Fms_page_tracking.html&utmac=ua-1
ms_ga_pagetrack(['ua-1']);

There are quite a few name value pairs appended to the utm.gif. More than should be discussed right now. We'll use this same debugging technique for transactions and website optimiser tracking and tagging.

Next, we'll do some testing!