Best practice: How to track outbound links?

Question

How do you track outbound links for your web site, since the request is logged on the destination server, not yours?

Soaring

Answer 1

You can add a quick JQuery script to the page that will track external links and can either redirect them to a file on your server that will track the link and then forward to it, or add an ajax request that will submit on click for external links, and track them that way.

See:

• http://www.prodevtips.com/2008/08/19/tracking-clicks-with-jquery-and-google-analytics/
• https://web.archive.org/web/20090214024330/http://www.justskins.com/development/how-to-track-clicks-on-outgoing-links/132

Zillion

I like this approach - the site will work perfectly normally if the visitor does not have JavaScript, and you get the bonus of tracking if he does. Also Eric makes a good point below that if you want to guarantee that all clickthroughs are tracked, then using JavaScript is not an option. – Intromit

Answer 2

Method #1: target="_blank", onclick and Google Analytics Events

Format your outgoing links with the following attributes:

<a href="http://www.example.com" target="_blank" onclick="trackOutgoing(this);">outgoing</a>

Define a javascript tracking function (requires google analytics to be loaded already):

function trackOutgoing(el) {
  ga('send', 'event', {eventCategory: 'outbound',
                       eventAction: 'send',
                       eventLabel: el.getAttribute('href'),
                       eventValue: 1});
};

Pros:

1. Does NOT interfere with normal link behavior
2. Does NOT require redirecting to another url

Cons:

1. The onclick is not guaranteed to execute (user or browser could terminate the main window)

Method #2: Redirecting with Javascript and Google Analytics Callbacks

Format your outgoing links with the following attributes:

<a href="http://www.example.com" onclick="trackOutgoingAndRedirect(this); return false;">outgoing</a>

Define a javascript tracking function (requires google analytics to be loaded already):

function trackOutgoingAndRedirect(el) {
  var url = el.getAttribute('href');
  ga('send', 'event', {eventCategory: 'outbound',
                       eventAction: 'send',
                       eventLabel: url,
                       eventValue: 1,
                       hitCallback: function() { document.location = url; }});
}

Pros:

1. Does not require target="_blank"
2. Higher chance of your event being registered with Google Analytics (compared to Method #1)

Cons:

1. Overrides the default behavior of links with return false;
2. Cannot open outgoing links in a new window

Method #3: Using a Redirect URL

Format your outgoing links with the following attributes:

<a href="/redirect?url=http://www.example.com">outgoing</a>

On your site you will need to implement a redirect script which is beyond the scope of this answer.

Your redirect script would most likely track the outgoing link and then redirect to the provided url.

Pros:

1. No Javascript required
2. Does NOT require Google Analytics
3. Does NOT interfere with the normal link behavior

Cons:

1. Harder to trigger Google Analytics Events
2. Links do not link to their original URL. Which may have negative SEO implications.

Tacita

Answer 3

Add an onclick or onmousedown handler to the anchor tag. You can see many sites doing this, such as Google.

Sketchbook

Answer 4

I don't like the redirect as described by Eric Tuttleman, as you unfortunately lose the 'search engine friendliness' of the link.

I handle this on a site I own by adding an onClick to my outgoing links, which fires a function which sends the link URL and a timestamp to my database. I then wrote a backend which retrieves the data, and lets me view it by such categories as 'Most clicked / 24h', 'Most clicked / 1w' etc.

I hope this helps.

Relique

That's a good point about sites losing search engine features. I'm not sure if it's true though. If you absolutely must track all links, then doing something like the redirect that I describe will catch all situations that I can think of. Javascript can be lost in some situations. – Standby

Answer 5

On one system I've worked on, we ended up storing redirects in a database table and creating a redirect page that takes an id as an input. On our content pages, we link to the redirect page with an unique id from this table. Once the redirect page looks up the url via the id from the table, it then sends the client a redirect response, sending them to the ending page.

This does give us logging of external links, and as an added bonus, it makes mass changes to external urls a bit easier in some cases.

Standby

Answer 6

Some newer options that work without any hacks as explained in https://css-tricks.com/send-an-http-request-on-page-exit/ are Fetch with the keepalive-flag or navigator.sendBeacon.

keepalive is not yet (Aug. 2022) supported by Firefox (Can I Use), but navigator.sendBeacon works in all modern browsers (Can I Use).

// normal fetch, not guaranteed to work
someLink.addEventListener('click', function(event){
    fetch('http://www.testing.local/?origin=classic-fetch');
});

// fetch + keep alive (not working in Firefox as of 103, Aug. 2022)
someLink.addEventListener('click', function(event){
    fetch('http://www.testing.local/?origin=fetch-keep-alive', {
        keepalive: true
    });
});

// navigator.sendBeacon (all modern browsers)
someLink.addEventListener('click', function(event){
    navigator.sendBeacon('http://www.testing.local/?origin=beacon');
});

Bash