0

1

Intermediate

Tracking File Downloads/External Links/Mailto's with Google Analytics & jQuery

I was getting hassled about not having a way to track the downloading of PDFs etc. form our website, & as this isn't automatically provided by GA I needed a solution that wasn't going to be a headache. This lead me to search for another method, and as a consequence I wrote this little ditty.

By Julian Taverner

Tracking File Downloads/External Links/Mailto's with Google Analytics & jQuery

Why?

I was getting hassled about not having a way to track the downloading of PDFs etc form our website, & as this isn't automatically provided by GA I needed a solution that wasn't going to be a headache.

I found numerous scripts that had provided this functionality but each one appeared to be deficient in some way or another. So I mashed together several pieces of others code along with some better practices to create this script {not to say that this one is perfect ;-)}.

Most, no, all other scripts attempted to attach events to the <a> tag, this however is fraught with problems, as many user agents will execute the link before any javascript. This lead me to search for another method (asked Kris), and as a consequence I wrote this little ditty.

The best method is to swap out those links that GA can't track and replace them with <span> tags, a sort of pseudo link. This way you can guarantee that the Javascript attached to a link will actually execute before the user goes off on their merry way.

How?

First up, insert your GA (newer version) & jQuery code (ver 1.4+) into the page as you would normally (into the head of the HTML - into the Design template). It's really is not a good idea for maintenance reasons to mess with this (as some do).

Secondly, add two pieces of jQuery code (encapsulated by script tags of course) into the design template just before the close of the body tag.

The first part handles the various link types to give GA the right Event notifications, these are called when a user clicks on one of the new pseudo links:

function handleLink(linkType,linkValue){
   
 switch(linkType) { 
 
 case "email":
  _gaq.push(['_trackEvent', 'Email-link', 'launch', linkValue]);
  break;
 
 case "external":
  _gaq.push(['_trackEvent', 'External-link', 'exit', linkValue]);
  break;
 
 case "file":
  var fileName = linkValue.substr((linkValue.lastIndexOf("/") + 1));
  _gaq.push(['_trackEvent', 'File-download', 'download', fileName]);
  break;

 default:
   //		we'll be in trouble if we get here;
 }
   
 window.location.href = (linkValue);
}

As each one of these is fired, GA is notified of the event (with the appropriate params) & the user is then sent on their way to the desired destination. With the File-download type I chose to just send GA the file name & not the full path.

The second part, is to run through and replace all links that GA can't track for you with <span> tags with attached click events.

$(document).ready(function(){

$('a')
   .each(function(){ 
   
     var theHref = $(this).attr('href');
   
     if (theHref.match(/^mailto:/i)) {
       $(this).replaceWith('<span class="mailtoLink" onclick="handleLink(\'email\',\'' + this.href + '\')">' + $(this).html() + '</span>');
     }
   
     if ((theHref.match(/^http/i)) && (! theHref.match(document.domain))) {
       $(this).replaceWith('<span class="externalLink" onclick="handleLink(\'external\',\'' + this.href + '\')">' + $(this).html() + '</span>');
     }
   
     if ( theHref.match(/\.(doc|docx|pdf|xls|ppt|zip|txt|vsd|vxd|js|css|rar|exe|wma|mov|avi|wmv|mp3)$/i) ) {
       $(this).replaceWith('<span class="fileLink" onclick="handleLink(\'file\',\'' + this.href + '\')">' + $(this).html() + '</span>');
     }
   
   });

});

Using jQuery's ready function, this waits until the the DOM has loaded and then executes, which will not impair those users/user agents that don't support Javascript. But this part must come after the first part.

And Then?

Of course don't forget to stylise these pseudo links so they look like the other links:

span.fileLink, span.externalLink, span.mailtoLink {
 text-decoration: underline;
 cursor: pointer;
 color: #3333AA;
}

Then you're done! Well except going to Google Analytics & looking under the Event Tracking of the Content section. Just remember that GA doesn't update the data in real time ;-)

This is now running on a new site I have just wacked up.

Tutorial Feedback

There are currently no comments. Post one, you will be first!

Add Your Feedback

You must be logged in to leave a comment. You can sign-up for free!