Tracking Outbound Links and Downloads with Silverstripe and Google Analytics

I've been wanting to track downloads and outbound links (i.e., links to other websites) on this website for a while. Today (31 August 2011), I have finally managed to implement it. As it turned out, it wasn't hard at all ... once you know how, that is. The method described below is based on Neal Grosskopf's tracking outbound links using jQuery blog post. I simply adapted and extended it to handle downloads too.

NOTE: The method below does not use the Silverstripe Google Analytics module. The tracking code is put directly into the template. If you are using that module, then you will probably need to adapt it to your needs.

Adding Outbound Link and Download Tracking

This method requires jQuery, so the first thing to do is to make sure that jQuery is loaded for all pages. To do this, open your mysite/Page.php file, and add the following to the init() function:

    Requirements::javascript(THIRDPARTY_DIR . "/jquery/jquery.js");

The result should look something like this:

    function init() {
        parent::init();
        
        Requirements::themedCSS("layout");
        Requirements::themedCSS("typography");
        Requirements::themedCSS("form");
        Requirements::javascript(THIRDPARTY_DIR . "/jquery/jquery.js");
    }

Next, the Google Analytics code in your page template needs to be updated to add tracking events to all of the hyper-links that either go to external websites, or to download files. With Silverstripe, these two cases are fairly easy to detect. External links start with "http://" or "https://" and downloads tend to be kept in the assets folder. The additional code looks like this:

    (function($) {
      $(document).ready(function(){
        $("a[href^='http://']").click(function(){
          pageTracker._trackEvent("links", "external", $(this).attr("href"), 0);
        });
        $("a[href^='https://']").click(function(){
          pageTracker._trackEvent("links", "external-secure", $(this).attr("href"), 0);
        });
        $("a[href^='assets/']").click(function(){
          pageTracker._trackEvent("assets", "download", $(this).attr("href"), 0);
        });
      });
    })(jQuery);

This code executes as soon as the page is loaded. It scans through the page and adds click events to all links that start with "http://", "https://", or "assets/" that call Google Analytics' trackEvent() function.

The tracking code usually gets put just before the closing page's </body> tag in Page.ss. However, since I have multiple page types, I put this into a page footer template file. The full Google Analytics code is as follows:

  <script type="text/javascript">
    var gaJsHost = (("https:" == document.location.protocol) ? 
        "https://ssl." : "http://www.");
    document.write(unescape("%3Cscript src='" + gaJsHost +
        "google-analytics.com/ga.js' 
        type='text/javascript'%3E%3C/script%3E"));
  </script>
  <script type="text/javascript">
    var pageTracker = _gat._getTracker("XX-XXXXXXXX-X");
    pageTracker._initData();
    pageTracker._trackPageview();
    (function($) {
      $(document).ready(function(){
        $("a[href^='http://']").click(function(){
          pageTracker._trackEvent("links", "external", $(this).attr("href"), 0);
        });
        $("a[href^='https://']").click(function(){
          pageTracker._trackEvent("links", "external-secure", $(this).attr("href"), 0);
        });
        $("a[href^='assets/']").click(function(){
          pageTracker._trackEvent("assets", "download", $(this).attr("href"), 0);
        });
      });
    })(jQuery);
  </script>

NOTE: XX-XXXXXXXX-X should be replaced with the website's Google Analytics key.

Viewing the Clicks in Google Analytics

Once the changes outlined above have been implemented, events should start showing up in the website's Google Analytics account within 24 hours. They can be found in the Contents -> Event Tracking section.

A snapshot of this website's outbound link and download events in Google Analytics (evening 31 August 2011).

As is shown in the screenshot above, the new tracking code divides the events into outbound-links (i.e., "external"), and downloads. Outbound links to secure sites are also separate ("external-secure").

Limitations and Uses

This method will not be able to track everything. For starters, Google Analytics uses Javascript, and so cannot track traffic when Javascript is disabled, but this is a general Google Analytics problem. Secondly, it won't track links opened in a new window. It will only count downloads made by clicking on links in pages; direct links to downloads from outside websites will not be detected. Since the event is only triggered when someone clicks on a download link, it will not be able to tell you how many downloads are completed. For absolute accuracy with downloads, nothing beats a download counter built-into the web server.

Despite these limitations, adding the tracking data to Google Analytics is useful. To begin with, it helps to have all of the data in one place. Google also provides many methods of digging through/mining the information. For example, you could find out where most people downloading a particular file are coming from. Or, if you were running an advertising campaign for a download, you could measure how successful that campaign is by comparing the number of people clicking on the advertisement to the number of downloads. Such information could help you better cater your website's content to what its visitors need/want.

Got questions? Comments? Post them in the Silverstripe forum.