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 remends adding a 100ms delay for clicks on "outbound links", in order for the tracking code to plete before loading the link target. Is this because the _gaq.push(['_trackEvent', category , action]) code is asynchronous, and needs time to plete 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.

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 remends adding a 100ms delay for clicks on "outbound links", in order for the tracking code to plete before loading the link target. Is this because the _gaq.push(['_trackEvent', category , action]) code is asynchronous, and needs time to plete 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.

• javascript
• google-analytics

5 Answers 5

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 pleted.

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.

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);

Don't delay clicks. Even the 250ms delay wont guarantee a successful tracking. If the target url is inside your domain, just store the tracking info on the local.storage and check on every page if there's something on the storage and trigger the ga event for the clicked button on page load instead. You should also validate if there's local.storage available on the client, and if not you can then use, in those cases, the click delay.

Here is the Jquery to create the delay:

$("a").click(function (e) {        
    e.preventDefault(); //cancel the link click
    var url = $(this).attr('href');//get the destination url of the link        
    _gaq.push(['_trackEvent', 'Links', 'Clicked', 'Buy']); //do your tracking
    //go to the original destination url after a delay
    setTimeout(function () { window.location.href = url; }, 250); 
});

Yes, delay is needed to make sure GA request is finished before page is reloaded.

Here is the Vanilla JS code to implement the tracking and delay:

document.getElementById('ID').addEventListener('click', function(event) {
    event.preventDefault();
    _gaq.push([ '_trackEvent', 'category', 'action', 'label' ]);
    setTimeout( function() {
        document.location = event.target.href;
    }, 200);
});