Tracking downloads in Google Analytics with jQuery

Google Analytics (and other similar services) aren’t 100% reliable, but they give a valuable insight into what the visitors to your site are up to. One thing they won’t do is track clicks on download links, unless you specify an onClick action for each link.

But here jQuery comes to the rescue – just a few lines of code will have all links to whatever filetypes you need tracked in Google Analytics as Events. Another common use of the same technique (with a few minor changes to the code) is to track clicks on outgoing links.

Before the code – while this is actually a fairly standard piece of jQuery, all credit for the exact code I am showing here belongs to Steph Gray (aka @lesteph) who put it into action on the Department of Health website.

There’s not much to it – first you need to set up your filter function to identify and classify the links on the page:

function gaTrackDownloadableFiles() {
     var links = $('a');
     for(var i = 0; i < links.length; i++) {
          if (links[i].href.indexOf('.pdf') != "-1") {
               $(links[i]).attr("onclick","javascript: _gaq.push(['_trackEvent', 'Downloads', 'PDF', '"+links[i].href+"']);");
          } else if (links[i].href.indexOf('.csv') != "-1") {
               $(links[i]).attr("onclick","javascript: _gaq.push(['_trackEvent', 'Downloads', 'CSV', '"+links[i].href+"']);");
          } else if (links[i].href.indexOf('.doc') != "-1") {
               $(links[i]).attr("onclick","javascript: _gaq.push(['_trackEvent', 'Downloads', 'DOC', '"+links[i].href+"']);");
          } else if (links[i].href.indexOf('.ppt') != "-1") {
               $(links[i]).attr("onclick","javascript: _gaq.push(['_trackEvent', 'Downloads', 'PPT', '"+links[i].href+"']);");
          } else if (links[i].href.indexOf('.rtf') != "-1") {
               $(links[i]).attr("onclick","javascript: _gaq.push(['_trackEvent', 'Downloads', 'RTF', '"+links[i].href+"']);");
          } else if (links[i].href.indexOf('.xls') != "-1") {
               $(links[i]).attr("onclick","javascript: _gaq.push(['_trackEvent', 'Downloads', 'XLS', '"+links[i].href+"']);");
          }
     }
return true;
}

It's pretty straightforward - grab the links, loop over grouping them by the last part of the URL (extension), and add the appropriate Google Analytics onCLick event to any matches. It will record both the filetype and exact file downloaded.
Then, making sure that jQuery and Google Analytics are already loaded, just call it with:

if (_gaq) { gaTrackDownloadableFiles(); }

This does a quick check to see if Google Analytics is loaded then runs the function to do the magic.

Hopefully it is obvious how to customise it for more/less/different filetypes. Each else if statement specifies a file extension and how it should be recorded in Google Analytics.

Now downloads for specified file types will be tracked with no modification of the links - particularly useful when non-coders will be creating content.

Category:

Tags:

Leave a Reply

Your email address will not be published. Required fields are marked *