Don't let analytics affect usability

Most sites that let users post content are interested in tracking outgoing links. However, the two most common ways of doing this break the standard behavior of the status bar.

The questionable ways

Twitter runs all users' links through their URL shortener, t.co. This produces a meaningless jumble of letters in the status bar. Twitter recognizes the problem and their solution is to put the page's actual URL in the link's title attribute. Fair enough. You get used to that pretty quickly of course, but the point is this: you shouldn't have to learn the behavior of any particular site.

Medium uses another common method. They also modify outgoing links, but use a redirect path instead of a shortener. If you look closesly, you can make out where the link will take you, but it's a URL encoded mess:

https://medium.com/r/?url=https%3A%2F%2Fwww.google.com.au%2Furl%3Fsa%3Dt%26rc

The right way

Do a Google search. Hover over one of the result links and look at your status bar. It shows the URL of the page. So far so good. Now right click the link (or left click and drag, just don't navigate to the URL). Now the href attribute of that anchor has been replaced with Google's redirection URL. Google accomplishes this with an inline onmousedown event handler that rewrites the href before the click event fires. Such event handlers aren't what you would call "best practice" but they get the job done.

An alternative to inline events

To make this solution a little more semantic, you can do something like the following:

var extLinks = document.querySelectorAll('a[href^="http://"]:not([href*="domain.com"])');

[].forEach.call(extLinks, function(el){
    el.addEventListener('mousedown', function(){
        console.log('Rewriting URL!');
    });
});

Discuss on reddit.