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.
The next few articles will cover smarter:
Website Optimiser tagging
All three together
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
Take a look at the ms_ga.js source. The section that we are interested in is:
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.
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:
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:
GET /ga.js HTTP/1.1
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.0; en-GB; rv:22.214.171.124) Gecko/20090824 Firefox/3.5.3 GTB5 (.NET CLR 3.5.30729)
If-Modified-Since: Tue, 13 Oct 2009 18:39:01 GMT
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
Cache-Control: max-age=604800, public
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:
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 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:
Second, we reported the pageview using /skeleton/tracking and ua-1:
Third, we reported the pageview using /skeleton/tracking and UA-7862117-1:
Fourth, we reported the pageview using /ms_page_tracking and 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!