Grow your CSS skills. Land your dream job.

Track Outgoing Clicks in Google Analytics with jQuery

Published by Chris Coyier

Ian Pitts sent me this trick a while back and I'm just getting around to publishing it. Thank Ian!

Google Analytics (intro video here) is powerful stuff, but one notable lacking feature is data on outgoing clicks. If you are using jQuery, plop this code on your page and you'll be tracking outgoing clicks in no time.

<script type="text/javascript">
  // <![CDATA[
    $(document).ready(function() {
      $("a[@href^='http://']:not(.noAutoLink)").addClass("offSite").attr('target', '_blank').bind('click keypress', function(event) {

        var code=event.charCode || event.keyCode;

        if(!code || (code && code == 13)) {
          if(pageTracker){
            var fixedLink = this.href;
            fixedLink = fixedLink.replace(/https?:\/\/(.*)/,"$1");
            fixedLink = '/outgoing/' + fixedLink;
            pageTracker._trackPageview(fixedLink);
          };
					
        };
    });
  // ]]>
</script>

Plain(ish) English:

  1. Target all href's with http:// (Assuming that your internal links use relative file paths like they should)
  2. Except those with a class of .noAutoLink (Optional, but useful to specifically exclude links when you want to)
  3. It then adds a class of "offsite" (Also optional, but could be used as a CSS hook to show a sort of "external link" icon, especially if you plan to use target="_blank")
  4. Then it ads a target of _blank (Not XHTML compliant, but since it's being added by script as needed, it doesn't harm validation)
  5. Then it binds to both click and keypress events... so those using the keyboard instead of a mouse also get the action
  6. The if(pageTracker) part is what detects GA's objects
  7. Then it does some regular expression magic to massage the href into something that can be tracked in GA
  8. A fake link is built that will appear within a fictitious /outgoing/ directory
  9. And lastly, GA is told to record a pageview for this new fake resource

Once you've been running this for a while (probably a few days, since Google Analytics isn't very real-time), you can go into Content > Content Drilldown and find your /outgoing/ directory. Click that to check out your most popular outgoing links!

UPDATE:
Ian posted an update/improvement to this code on his blog. The new code doen't just look for "http://" to determine if it is an outgoing link, but compares the hostnames to the current site. That way if you internally link with a full URL, it won't be mistaken for an external link.

Comments

  1. Great article! I actually just posted this same technique as a proof of concept last week at .eduGuru, the article is Tracking outgoing clicks with Google Analytics. Glad to see a true production ready javascript being published.

    You guys do great work! Keep it up!

  2. Permalink to comment#

    Nice article Chris. This certainly helps me in tracking my GA results even better. Thanks for sharing the tip. i have Tweeted this one.

    Keep doing the good job :)

  3. Preetty sweet. I’m definitely gonna have to add this when i can get some time. thanks for the heads up

  4. Kevin
    Permalink to comment#

    I’ve got to be doing something wrong! The links aren’t opening in a new window (which is how I can tell something’s wrong – though I plan to take that bit out once I know it’s working). I’m getting this error:

    Error: missing } after function body
    Source File: http://……
    Line: 69, Column: 8
    Source Code: // ]]>

    (here’s where it’s living: http://artmeetscommerce.net/clients.php?page=mindgame)

    Is it the code? Or is it me (or the use of some other jQuery stuff that’s conflicting)?

  5. Permalink to comment#

    I’m really excited to try this – I modified Google’s JS that activates the tracker to use an external jQuery script, so it’ll be cake to toss this in after initialization.

    Thanks!

  6. I wrote a jQuery plugin a while back that automatically adds Google Analytics tracking for outgoing links, plus downloads, and mailto’s:

    http://devblog.jasonhuck.com/2007/11/19/google-analytics-integration-with-jquery/

    Although it uses the older tracking script from Google, someone else has since updated it to work with the newer script:

    http://dvdsmpsn.wordpress.com/2008/06/18/jgoogleanalytics-google-analytics-integration-for-jquery/

    jason

  7. Permalink to comment#

    Nice stuff, I need to learn more jQuery…

  8. Permalink to comment#

    Hey everyone… I’m glad you like the technique. I’ve updated this code snipped on our newly released site since I discussed it with Chris. I’m posting a blog post on my site as we speak and will comment here again when it’s finished. The new script actually compares the link’s domain to the current page domain and automatically adds the action… not just keying off of the existence of “http://” in the link. This helps for some CMS tools that generate fully qualified URLs programmatically.

  9. Permalink to comment#

    Alright… I’ve posted the updated code on my blog. Check it out there if you’re interested. Thanks again Chris!

  10. Great article, thanks fro sharing!

  11. Permalink to comment#

    It was very interesting to esteem about it

  12. Permalink to comment#

    Great script, Chris. Though personally I’ll retain myself from adding _blank to every outgoing link. The user should decide for themselves if they want a new window or not.

    But using WordPress’ Stat plugin tracks outgoing links too, right? Would this be something Google dislikes, meaning they could remove your GA account? Anyone know?

  13. Permalink to comment#

    Koew, yep… in this instance for the site I was building, popping the links up in a new browser window was the desired action. For other sites with more technical target users, I wouldn’t do that. In any case, you can just leave the chained .attr off the end of that portion of the script.

    As for Google disliking this technique… it’s actually something they suggest doing within their API documentation. That, combined with the new Event tracking features should assure everyone that this technique is safe to use.

  14. Permalink to comment#

    I wrote something similar (and much cleaner) a while back.
    It does rely on rel=”external” (which you should use anyway), but wouldn’t be hard to change the selector.

    http://www.aestheticallyloyal.com/docs/js/track-outgoing.js

  15. Permalink to comment#

    Kolber… while that is cleaner it wouldn’t work in the situation I was in when I wrote it. I needed to be able to accommodate links coming dynamically out of a CMS. Some links were local while others were off-site. Setting all as rel=”external” would not work as local links would be tracked incorrectly in GA.

  16. Highly recommend you use event tracking instead of _trackPageview() if your GA profile allows it. This will keep the outgoing clicks from counting toward your pageviews, giving you more accurate pageview numbers.

  17. Permalink to comment#

    Good stuff. Just a heads up for WordPress users that the plugin Ultimate Google Analytics also tracks outgoing links as part of its functionality. I wonder how different the actual code implementation is?

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".