6

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.

Community
  • 1
  • 1
George Armhold
  • 30,824
  • 50
  • 153
  • 232

5 Answers5

6

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.

MisterPhilip
  • 2,452
  • 16
  • 16
  • Is there a source for this ? I have never heard that links to other pages inside the same website need a delay (although like the original poster I don't know why that would be the case), and as far as I can tell tracking onsite links works just fine without a delay. – Eike Pierstorff Jan 31 '13 at 13:22
  • @EikePierstorff My suspicion at this point is that it was a poor choice of words on Google's part. I do wish they could clarify this in the documentation. – George Armhold Jan 31 '13 at 13:57
  • @EikePierstorff - Unfortunately, the only source I have for you is my experience in the field. We haven't done any formal testing and released results, but at our analytics agency we've found that you'll still need that slight delay between any pages. This is mainly for users on slower connections attempting to reach the 3rd party server (Google Analytics). – MisterPhilip Jan 31 '13 at 20:09
  • @CaffeineComa - I agree that it is a poor choice of wording. However, even adding a 100ms delay to the next page is negligible to the user's experience. You could also get around adding a delay by adding a URL parameter to the URLs you want to track (e.g. `linkLoc=header`) and then firing an event or custom variable on the next page. This, however, would attribute the link to the current page without custom reporting. – MisterPhilip Jan 31 '13 at 20:11
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);
Chris Peters
  • 17,918
  • 6
  • 49
  • 65
1

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.

bellamy
  • 49
  • 4
0

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); 
});
James Lawruk
  • 30,112
  • 19
  • 130
  • 137
  • This jQuery variant is also affected by the UX issue on the vanilla JS version. http://stackoverflow.com/questions/14611899/google-analytics-delay-needed-for-tracking-link-clicks#comment66513907_34855022 – patridge Sep 20 '16 at 19:56
0

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);
});
Eugene Fidelin
  • 2,049
  • 23
  • 22
  • 1
    Just as a warning, if you take this approach. You break the user's ability to open the link they just clicked in a new tab when trying to ctrl+/cmd+/middle-click the link. They can still right-click and open in a new tab, which wouldn't even fire a click event (preventing the GA push as well). – patridge Sep 20 '16 at 19:55