Random file, Zip and PDF tracking using jQuery & Google Analytics

comments

I use Google Analytics a lot day to day to help my clients better understand their visitors. As Google Analytics is a remotely hosted statistics solution that uses JavaScript it doesn’t track files downloaded like a regular log file analyser would. So today we’re going to talk about how we can track those file downloads so that you can gain better metrics on documents hosted by your site.

GoogleAnalytics Screen shotTracking users downloading your files can be a great way to tell if users are using your site as you intended. As an example, If you have a business site that hosts PDF files and zip files for customers to download you probably want to know if, and how many times these documents are being downloaded to gain a better understanding on how successful your site’s flow is.

The official Google Analytics developer documentation says that you can fire a page view event manually like below:

onclick="pageTracker._trackPageview('/my_filename.extension')“

However, adding an onclick event to every download link in your website in some instances could be downright painful.

jQuery + Mindless tasks = Happy Ninja

As many of you already know by now jQuery is a serious force to be reckoned with in the JavaScript world. It is both elegant and extremely powerful and in our current case – its a life saver.

File types we’d like to track that JavaScript tracking doesn’t capture:

doc, docx,  eps, xls, xlsx, jpg, png, svg, pdf, zip, txt, ppt, vsd, vxd, js, css, rar, exe, wma, mov, avi, wmv, mp3

Now the list above could be longer, it might want to include something special for your implementation, I’ll leave the addition of new file types up to you.

Lets make it happen

So your first step before continuing should be to mosey on over to the jQuery site and download the latest version. Once downloaded link to it in between your <head> tags like so:

 

<script type ="text/javascript" src="/Js/jquery-1.3.2.min.js"></script>

 

What we want is a simple bit of code that detects all the links on a page and checks to see if:

  1. It is a local link to something on your site
  2. It is to a file type that matches our list above

Wrap that up in some anonymous methods and we have the following:

 

<script type="text/javascript">
$(document).ready(function() {
    // grab each link on the page
    $('a').each(function() {
    
        // extract the link address from the link
        var strLink = $(this).attr("href");
    
        // check if its a link to one of our list
        if (IsLocalTrackableLink(strLink)) {
        
            // add an onclick method to it
            $(this).click(function() {
            
                // run the google page view function
                pageTracker._trackPageview(strLink);
            });
        } 
    });
});

function IsLocalTrackableLink(linkUrl) {
    // check that a link is not null, local, 
    // and contains our file extensions
    if (linkUrl != null && 
        linkUrl.indexOf("http://") < 0 && 
        linkUrl.match(/\.(?:doc|xls|pdf|zip|rar|exe|mp3)($|\&|\?)/)) {
        return true;
    }
    return false;
}
</script>

 

Now you’ll notice that the above has been modified to only include a short list of files. I did this simply to make sure they would all fit on the page properly, and you should have no problem adding more using the same format or |extension|.