Appending Google Analytics query string to outbound links in SharePoint 2010

Question

I am looking to append Google Analytics query strings to outbound links but SharePoint 2010 strips it out when you save the page. Is there a way to add those or do I have to use javascript to append it via the onclick? I think what I'd really like to do is customize each link. Thanks!

Answer 1

I've just implemented this on an external web site using jQuery and _gaq.push(). Fairly easy to implement and quite handy to use fiddler and/or console to se what output you get. You'll get tracking of PDF download as a bonus!

Example project

There are a number of ways how to implement this, but there are a few prerequisites. In order to get this to work you need to assign the _gaq variable in JavaScript, preferrably in your masterpage:

<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-<your-GA-account-no>']);
  _gaq.push(['_setDomainName','<your-domain>']);
  _gaq.push(['_setSiteSpeedSampleRate', 100]); // means 100%. Set 10 for 10% of traffic
  (function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>

Implement jQuery

Here is some jQuery you can add to your pages that will allow you to track when people click on these links. You will have to add the Google Analytics Asynchronous Tracking code (found here: http://code.google.com/apis/analytics/docs/tracking/asyncTracking.html) and add jQuery to your page (see here: http://docs.jquery.com/How_jQuery_Works) to use this code:

$(document).ready(function(){

 $('a').click(function(){

  href = ($(this).attr('href') == undefined) ? ('') : ($(this).attr('href'));
  href_lower = href.toLowerCase();

  if(href_lower.substr(-3) == "pdf" || href_lower.substr(-3) == 
     "xls" || href_lower.substr(-3) == "doc") {
   _gaq.push(['_trackEvent', 'document', 'download', 
             href_lower.substr(-3), $(this).text()]);
   _gaq.push(['_trackPageview', href]);
  }

  if(href_lower.substr(0, 4).toLowerCase() == "http") {
   _gaq.push(['_trackEvent', 'external_link', 'open', 'href', $(this).text()]);
   _gaq.push(['_trackPageview', href]);
  }

  if ($(this).attr('target') != undefined && $(this).attr('target').toLowerCase() != 
     '_blank' && href_lower.substr(0,10) != "javascript") {
   setTimeout(function() { location.href = href; }, 200);
   return false;
  }

 });

});

Reference: Link Tracking using jQuery and the Google Analytics Asynchronous Tracking Code

Using Fiddler

There's a splendid video which explains huw to track what your site sends to google, called Debugging Google Analytics Code with Fiddler. See it when you want to know what you track (and send to Goolge).

Using Console

If you want to check the output you can do this not only by fiddler, but also using console.log(). You'd have to write an extra line of code to see it in console, but its very handy:

console.log('_gaq.push([\'_trackEvent\', ' + '\'' + customer + '\', \'Downloads\', \'' + documentName + '\']');
_gaq.push(['_trackEvent', customer, 'Downloads', documentName]);

Access console output by hitting F 12 (in Chrome and Internet Explorer). Remember to comment out the consol.log line before deploy.