Automating tracking of outgoing links with Google Analytics

Google Analytics (GA) is a handy tool for generating access statistics for your website. One drawback of GA is that it does not automatically registers clicks to outgoing links on your website. But the information which links have been clicked can be very interesting, e.g., for determining whether the user has downloaded a file on your website or to which site the user has navigated when leaving your page.

Fortunately GA allows for tracking a click on a link manually by attaching to each link that should be tracked a onclick JavaScript action which calls the function urchinTracker(arg). GA stores the argument "arg" that is supplied to this function.

Hence, for tracking outgoing links there are two possiblities: a) add a JavaScript onclick action to all links, or b) generate the onclick action automatically with some JavaScript magic, like will explain in the following recipe:

  • Download the JQuery libary from http://www.jquery.org. The following examples assume, that the library is installed under the relative path "js/jquery.js".

  • Add the following JavaScript code to the header of your HTML page:


    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
    
    $(document).ready(function() {
      $("a.track").click(function() {
        var prefix = "link/"
        var msg = $(this).attr("href");
        re = /^(\w+):\/\//;
        tracking_url = msg.replace(re,"$1/");
        urchinTracker(prefix + tracking_url);
      });
    });
    </script>

  • Add a class="track" attribute to each link (<a> element) that shall be tracked, for example: <a href="http://www.test.org/lib/paper1.pdf" class="track">PDF<a>. Since links can be assigned an arbitrary number of class attribute this method can be applied universally.

  • The required onclick action is dynamically generated using JQuery. The use of JQuery ensures that this method works with all major web browsers. The onclick action that calls Google Analytic's link tracker is only added for elements that have a class="track" attribute. These elements are selected by the XPath expression a.track.

  • The argument for the link tracker is generated from href attribute of the URL. The URL is reformatted, such that it looks like a path. Additionally, the URLs are prefixed with a path component that specifies the protocol. For example http://www.test.org/lib/paper1.pdf is transformed to the "path" link/http/www.test.org/lib/paper1.pdf.

Now everything should be setup fine and you will be able to track clicks to your outgoing links in Google Analytics.

While this method is a significant improvement over the default behavior of Google Analytics, it is still not perfect. Tracking the download of document only works if the user is loading the document directly in the browser by clicking on the link. If the user instead uses the "Save as.." action of the context menu or just copies the URL and downloads the file otherwise, the download will not be registered. One solution would be the use of download wrappers, as they are used by sourceforge and others, but I find these wrappers annoying. If you have an idea how to improve the proposed method without using wrapper pages, please let me know in the comments.

Written October 22nd, 2007