Welcome to Part 3 of Tracking Clicks with Google Analytics! Last time I discussed the process and theory behind tracking visitor click data in GA. This technique is primarily used to track non-HTML files and outbound links. In this post we’ll discuss a quicker, easier way to implement the click tracking. Please make sure you’ve read Part 2 before reading this post.
Overview
Whenever we need to track clicks we use the following JavaScript code. This code automatically adds the urchinTracker function to appropriate part of your HTML at the appropriate time. With this script there is no need to change the HTML in your pages. You simple add this script to all the pages on your site and it does all the work for you.
You’re probably wondering how this all woks. I’m not going to get into the nuts and bolts, but this uses the DOM or Document Object Model. Using the DOM in the code gives us the ability to modify the HTML in real time.
About the Script
This script will only track clicks on anchor tags. It will not track clicks on images or other HTML elements.
If the anchor tag points to a different domain then urchinTracker() is executed before the visitor leaves the site and a pageview named ‘/outbound/<url>’ is created in Google Analytics. The <url> part is replaced with the value from the HREF attribute in the anchor tag.
If the anchor tag points to a non-HTML file then the scrip creates a pageview named ‘<path>’ where <path> is the value in the HREF attribute of the link.
Here’s an example of the script in action. The link below will take you to a test page where you can click on links to other domains and files Rather than send the data to GA, the script has been modified to display a message (note: a new window or tab will open in you browser).
And here is the source code for the above page:
Installing the Script
Installing this script is simple. Copy and paste the code from the test page and place it in your web page. I place it before the closing BODY tag. After the script has been installed you can configure it to work with your site. Also, make sure that the Google Analytics tracking code is installed on the page.
Customizing the Script
There are a few customizations you can make to the code.
First, there is a variable named debug. When it is set to 1 the script will display a pop up window when a link is clicked. Set debug to 0 to disable the pop up. By default, debug is set to 1 (on).
Next, you can define the types of non-HTML files that this script will track. Find the variable named fileTypes. The value should look like this:
(".doc",".xls",".exe",".zip",".pdf")
To track additional file types just add the extension to the list. Make sure you match the text-formatting of the existing list.
Finally, you can change the way external links appear in the GA reports. By default, all external links will be preceded by ‘/outbound/’. If you would like them to appear differently change the extIdentifier variable.
Summary
There are lots of scripts like this. This is just our version. I hope it gives you some idea of what is possible and inspires you to create one of your own or modify ours. Just remember that this script will create additional data in your GA profiles. You many need to add a filter to deal with the extra data.
Please feel free to use and modify this script. The only thing we ask is you share the changes with others.
I’ve been looking for a free script like this for a long time!
I’ve read your blog for at least a few months and it is definitely one of the more useful blogs.
Thanks so much!
Hi, your script is very helpful for me to track all the links. However, I have one question.
For mailto, it doesn’t seem to track them properly. I turned on the debug mode but the alert just shows the page which is calling the mailto link. Is it possible to show which particular mailto that people are clicking on?
Thanks
Hi Andrew,
Thanks for the feedback. The script is a bit old, and does not handle mailto: links. It probably should, I just haven’t updated it. We have a more advanced script that we use internally, but I can’t give that one away. :)
Feel free to tinker with the code!
Thanks for reading.
Justin
Hi Justin,
Will this script work for site overlay functionality on GA?
Also with a slightly related question. We have many pages which have the same exact links on a single page, but site overlay rolls them up as 1 number. Is it possible to track the separately? I’ve tried just adding a query string to the end of the url, but that prevents it from tracking completely. I did this in conjunction with a modification to the profile’s info on the “Exclude URL Query Parameters”.
I’m just using a test query sting link like so:
http://usnews.rankingsandreviews.com/cars-trucks/2007-Dodge-Magnum/?A
http://usnews.rankingsandreviews.com/cars-trucks/2007-Dodge-Magnum/?B
Then i put in the field “A”.
Any suggestions?
Thanks Much,
Bryan
Hi Bryan,
No, the script will not work with site overlay. The reason is that the URLs create by urchinTracker are virtual, they do not exist on your site.
As to your second question, using an additional query string parameter to differentiate each URL on a page is correct. However, if you exclude that parameter using the profile settings then it will be completely stripeed from GA.
When GA goes to build the site overlay report it takes the values in the request uri field, adds then to the website URL as defined in the profile settings, and then requests that page from your site. If the URL does not match an URL for your site, then the report will break.
Thanks for the comment and I hope that helps,
Justin
Hi Justin,
Have you tested this with Firefox? As installed on my site the tracking seems to work only for IE and Safari, not Firefox or Netscape. The only change I’ve made is to put the script in an external file rather than in the body of the page.
Thank you
John
Hey John,
It should work for FireFox, I have not experienced any issues with FF. Maybe there is a problem with the new version of FF.
Justin
This looks like a nice script, though I’m using Google Analytics’s new ga.js script instead of urchin. I know that at some point in the future we’re supposed to get outbound link tracking with ga.js, but since this hasn’t happened yet, I was hoping to use your script as a simple solution in the interim.
The current method for tracking ga.js outbound links is pretty much the same as tracking outbound links with urchin. The both use the the onlick property, but where urchin’s call is: javascript:urchinTracker(‘/clicks/images/foo.jpg’);
ga.js’s call is:
pageTracker._trackPageview(‘/clicks/images/foo.jpg’);
So, I if I were to modify your script to work with ga.js, am I correct to assume that I would just need to change all the instances of urchinTracker() with pageTracker._trackPageview()?
From what I can tell, this should work, but I just wanted to get some input from you about this before I break something.
Thank you!
I maybe be missing something but where is a Javascript that we need to add to our site to get this to work?
Hi Andy,
You’re correct. If you’re using the new tracking code then you need to replace urchinTracker with trackPageview. I’ll be working on a new version of the script soon and it will support the new tracking code.
Thanks for reading,
Justin
Hey Justin
GREAT BLOG, congratulations
I would like track the outbound links and I’m trying alternatives. Now, I have placed as test the next code ( in the link page )
LINK
and I don’t find the tag OUTBOUNDREGISTER/VERSION in the USERS / DEFINED USER in G.A. and neither I find it on CONTENT.
What you think I ‘m doing as error ?
I’m using this GA code:
_uacct = “UA-xxxxxx-1”;
urchinTracker();
PLEASE, you are an expert about it, can U help me?
have a nice day, David
David,
You need to do one of two things to track clicks on links. Your first option is to a manually add the urchinTracker() function to the link, as I explained in part 2 of this series. Or, your second option, is to include this script on your page, as I describe in this post.
Based on your code above I can’t really tell which method you want to use. But I did notice that the link you create contains no code, so I’m assuming you want to use the method described in this post. In this case make sure you you’ve included the DOM script.
Hope that helps,
Justin
Hope that help.
THANKS JUSTIN !!!
in the second code option, ¿ every link placed on that page will be tracked ?, if I have there an adsense, for example, it will be include in a PDF tracking ? are there any code in the link code to specyfic each link ?.
David,
The code will only track links to certain types of files. The default list is:
.doc
.xls
.exe
.zip
.pdf
You can alter the code to include more, or less, file types. It will not track AdSense links.
Thanks for the question,
Justin
Hi,
I would like to know why the tracking status is still “Tracking Not installed” but yet I have data receiving in the report.
What should I do or check to get the tracking status updated?
Basically, I am using urchin codes in my webpages.
Please kindly advice.
Thank you.
Jeaner
Hi Jeaner,
I’ve seen this message lag behind the actual tracking for a site. Sometimes you can try clicking the ‘check status’ link to change the warning message.
Thanks for the question,
Justin
I noticed that it no longer says urchin tracker but:
pageTracker._trackPageview();
Will the following still work with out issue?
pageTracker._trackPageview(‘SKIBUM’);
Hi Bob,
Google has changed the tracking code and urchinTracker no longer exists. I have not had a chance to update this code to reflect that change but am trying to get it done. It’s not as simple as changing urchinTracker to pageTracker. There are a few other things that need to happen.
I’ll try to get it done soon.
Justin
Hi Justin, everyone:
Justin, thanks for the free script. It’s very useful. If anyone else is like me, and doesn’t feel comfortable playing around with scripts yourself, there is an updated script for js on Brian Clifton’s site (linked from Justin’s blog roll on the right). I searched for “link tracker,” and I think it was the second entry.
Justin, would these types of scripts track outbound links and content like pdfs that are generated on the page through a search function? Or is that type of content not in the DOM?
Thanks again,
Ursula
Hi Ursula,
The best answer I can give you is it depends. If the search results page is properly formatted HTML then a DOM script should be able to track the PDFs. However, if the search results page is some type of crazy AJAX then maybe not.
Hope that helps,
Justin
Thanks, Justin. I’m now waiting for your update of this script – Brian’s was acting buggy when I tried to implement, and I’m not fluent in code enough to fool with it.
Thanks again.
Justin,
Add me to the list of people hoping to get a current version of this script for the new ga release of Analytics code.
Thanks,
Mark
The test page link returns a 404 page. Anywhere I else we can grab this script?
Hi Justin,
Great post!
I was wondering if you’ve had time up update the code?
Duong
Hi Justin,
Thank you so much for putting this together. It’s very informative and helpful!
When I click to the test page link, it displays your 404 URL. I’m not sure if the currently URL was the intended one, but I can’t seem to find the code referenced above. Would you be able to paste that code as a reply here? I’d love to be able to record all IMG clicks with a jQuery gallery I am using.
Ryan
Hi,
I have been reading Google for 3 days now. I am trying to find out how I can track clicks on links that go to another website (affiliate marketing). I am still scratching my head I am more confused than ever. It would be good if there was an example of how to take the code that an affiliate gives and change it to add the onclick instructions so that data is passed to Google Analytics. I have a copy of a link code below. Would you be able to change it to give me an example?
I would really appreciate your help.
Hi Gail,
It all depends on the code that you were given. The code you pasted did not come through, comments don’t allow JavaScript. But my suggestion is to test the code on a dev version of your site as much as possible. You want to make sure that the GA modification does not break the outbound link. There’s nothing like destroying the visitor’s experience.
Hope that helps,
Justin
Hi Justin, Thanks so much for this blog and your book. I wanted to see if you have an update on the automatic outbound links reporting in GA is that released yet? Or should we still be looking at adding the tracking code to the outbound links?
Thanks,
-Doug
Hi Doug,
I know that outbound link tracking is coming, but don’t know when. It wasa announced in 2007, so let’s hope we see it soon. I would say implement your own tracking.
Thanks for the comment,
Justin
I finally got around to fixing that 404 error! Sorry everyone!