Tracking file downloads with Google Analytics

With regular web pages, using Google Analytics requires placing javascript code in the page that runs upon page load. Unfortunately, this will not work for resources that do not run javascript (e.g., pdf files). Google’s advice is to, 1) ensure that the main Google Analytics code is in the web page prior to the links, and 2) add a javascript action to each link you wish to track that includes a string identifying that resource for tracking:

1. <a href="http://www.example.com/files/map.pdf" onClick="javascript: pageTracker._trackPageview('/downloads/map');" >

That’s a maintenance nightmare, having to remember to manually add that to every link. It also may slow down web page performance if you have many links. Since this site already uses YUI, I can use event delegation to dynamically catch any clicks that require manual tracking. With this code, a single handler is inserted at the document level that will see and respond to every click on an a element.

1. (function() {
2. var onAClick = function (e) {
3. var localurl = 'http://www.mywebsite.com';
4. if (this.href.search(/(asp|tml|htm|aspx|php|pl|cgi|jsp|\/)$/)==-1) {
5. if (this.href.substring(0,5)!='http:' && this.href.substring(0,6)!='https:') {
6. try {pageTracker._trackPageview(this.href);} catch(err){}
7. }
8. else if (this.href.substring(0,localurl.length)==localurl) {
9. try {pageTracker._trackPageview(this.href.substring(localurl.length));} catch(err){}
10. }
11. }
12. };
13. YAHOO.util.Event.delegate(document, "click", onAClick, "a");
14. })();

The code is wrapped in an anonymous function that is executed immediately (lines 1 and 14). This avoids polluting the namespace with your variables. Lines 2–12 define the onclick event handler. Since the handler will be seeing all clicks on a elements, you need to include code to 1) decide whether the click needs to be manually tracked, and 2) identify the url to use for tracking. Line 3 contains the URL for your site (without the ending /), and should be altered to match your web site’s address. Line 4 checks to see if the page ends in a web page extension (or directory delimiter). I assume that regular web pages will have the usual Google Analytics tracker, and thus will not need manual tracking. If it is not a regular web page, the search fails, returning -1. In that case, line 5 checks to see if this is a local reference. If it is a local reference, the href parameter value for the a element is used for tracking. Line 8 checks to see if it is a full web address that happens to point to the site, in which case it removes the web server address and just passes the file path to the click tracker.

Lines 6 and 9 are wrapped in try - catch blocks, as a failure in the Google tracker will not alter the page’s function. The try - catch blocks thus hide the errors from the end-user. You probably want to remove those blocks while debugging the code.

Line 13 does the magic bit: it attaches the onAclick function to the web page at the document level. Events “bubble” up the document hierarchy, so all clicks will be examined by this function, as all elements on the page are descendents of the document element. There is no need to attach event handlers to the individual a elements. See the YUI documentation for more information on how event delegation works.

This code needs to occur after the Google Analytics tracking code. This code might not work if you are sloppy and do not include the protocol prefixes (http: or https:) at the head of your external URLs.

The only other change needed on the page is to ensure that you load the four required YUI 2 modules: Dom collection, Event utility, Event delegation and Selector utility. A simple solution to a complex problem

This software is licensed under the CC-GNU GPL.