Fresh & New(er)

discussion of issues around digital media and museums by Seb Chan

Fresh & New(er) header image 2

Fixing document download and link tracking with the Google Analytics asynchronous tracking code

July 14th, 2011 by Seb Chan

If you’ve been using the gatag.js from Good Web Practices in conjunction with your Google Analytics code for the past few years you may have noticed that it stopped working when you updated to the newer, better asynchronous Google Analytics tracking code.

What was nice about the gatag.js code was that it was quick and easy to implement and tracked downloads of PDFs and other file types as well as traffic following any outgoing links. For cultural institutions which are full of such PDFs and external links, tracking these as distinct ‘EVENTS’ in Google Analytics was very useful for understanding user behaviour on your site.

There’s not been a clean and simple fix for this problem and until I saw Stephen Akins’ solution using jQuery I thought we’d have to go back to other methods.

Our developer, Carlos Arroyo, made some minor modifications to Stephen’s code so that the way in which downloads and external links appeared in the reports would stay the same as those used by gatag.js allowing for historical comparisons.

First remove your references to gatag.js then place this after your Google Analytics asynchronous tracking code. (If you already load jQuery on your site then you probably want to check the version and you can omit the first section.)

(And of course you use this at your own risk!)

<script type="text/javascript">
		if(typeof jQuery != 'function'){
		var script = '<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>';
		document.write(script);	
	}

</script>


<script type="text/javascript">

	$(document).ready(function(){
		
		$('a').mouseup(function(){
  			href = $(this).attr('href');
  			href_lower = href.toLowerCase(); 
  			if(href_lower.substr(-3) == "pdf" || href_lower.substr(-3) == "xls" || href_lower.substr(-3) == "doc" ||
  			   href_lower.substr(-3) == "mp3" || href_lower.substr(-3) == "mp4" || href_lower.substr(-3) == "flv" ||
  			   href_lower.substr(-3) == "txt" || href_lower.substr(-3) == "csv" || href_lower.substr(-3) == "zip") {
   				_gaq.push(['_trackEvent', 'Downloads', href_lower.substr(-3), href]);
  			} 
  			if(href_lower.substr(0, 4) == "http") {
   				var domain = document.domain.replace("www.",'');
  				if(href_lower.indexOf(domain) == -1){
				href = href.replace("http://",'');
				href = href.replace("https://",'');
 					_gaq.push(['_trackEvent', 'Outbound Traffic', href]);
   				}
  			}
 		});
	});
</script>

Tags: 7 Comments

  • Chris Bell

    well deserved recogniion for a very talented developer. can i keep him?

  • Thanks for sharing, now I don’t even have to google for it! :)

  • GerryQ

    Thanks for sharing this — when I last looked a few months ago, there was a real dearth of auto-tagging scripts which support the new asynchronous GA. The one we ended up using was this one from Blast Advanced Media:
    http://www.blastam.com/blog/index.php/2011/04/how-to-track-downloads-in-google-analytics/

  • Can anyone confirm they tried out this version of the script and it works?

    • Yeah it still works (well too!). We implemented it on our Drupal7 site at Cooper Hewitt.

  • Neil Blevins

    So I can’t get this to work anymore, every time I add the code above under my Google Analytics asynchronous tracking code, and then view my webpage, I get my webpage plus the line…

    “‘;
    document.write(script);
    }”

    At the bottom, so looks like the code isn;t running properly. ANyone able to get this to run now? Thanks for any help.

    • Check your code and also check your version of jQuery – you may already be loading it early in your page. We’ve got it still running successfully as above on cooperhewitt.org