CODEWITHSUNDEEP
javascriptgoogle-analytics
George Armhold
George Armhold

Reputation: 31064

Google Analytics: delay needed for tracking link clicks?

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.

Upvotes: 6

Views: 5766

Answers (5)

Chris Peters
Chris Peters

Reputation: 18090

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

Upvotes: 2

bellamy
bellamy

Reputation: 49

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.

Upvotes: 1

Eugene Fidelin
Eugene Fidelin

Reputation: 2319

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

Upvotes: 0

James Lawruk
James Lawruk

Reputation: 31345

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

Upvotes: 0

MisterPhilip
MisterPhilip

Reputation: 2452

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.

Upvotes: 6

Related Questions