Google Analytics: delay needed for tracking link clicks?

Question

We're trying to track various click events on our pages to see how users are navigating our site.

It's possible to arrive at given page via different links (e.g. via a link in the top of the originating page vs one in the footer). For this reason it's not sufficient to merely track that the destination page loaded; we need to tag and track the click events.

The Google Analytics documentation recommends adding a 100ms delay for clicks on "outbound links", in order for the tracking code to complete before loading the link target. Is this because the _gaq.push(['_trackEvent', category , action]) code is asynchronous, and needs time to complete before the page is unloaded?

If so, wouldn't this also be required for "on site" links? I fail to see how this is different from a link to a new page on the same site; in both cases the current page is unloaded.

Edit: I've since discovered Google's hitCallback mechanism for firing your page load events via callback. This obviates the need to use a delay.

Answer 1

Any tracking that is needing to be done just before a new page should include a slight ( < 200ms) delay. Offsite, onsite, form submit, etc. This allows the request to the analytics servers to be completed.

As far as internal link tracking, have you looked at the In-Page Analytics report & Enhanced Link Attribute plugin? It could help you out a bit without needing to do extra coding.

Answer 2

Google Analytics provides a hitCallback hook for such cases.

However, there are some cases where the event won't fire, so it's a good idea to also add a fallback redirect using a delay.

// Pretend that all of this preceding code
// is within a link's click handler.
var _this = this;
var eventHit;

ga('send', 'event', 'Outbound Links', 'click', _this.href, {
  hitCallback: function () {
    eventHit = true;
    document.location = _this.href;
  }
});

// Set delayed fallback to your liking. This example is 1 second.
setTimeout(function () {
  if (!eventHit) {
    document.location = _this.href;
  }
}, 1000);