Does Google Analytics event tracking on links slow down the user experience?

Question

I am considering attaching onclick events to internal links on my site to do some Google Analytics event tracking. But I am concerned about performance. My understanding is that the workflow will change:

1. User clicks on hyperlink
2. A call is made to Google Analytics to send event tracking data
3. Browser waits for response from GA server
4. Browser follows the link and opens the new page.

I am concerned about the delay introduced by steps 2 and 3. So the questions are:

1. Is my understanding of the flow correct?
2. What's the typical delay (in milliseconds) that the call to GA event tracking introduces?

Answer 1

Event tracking works by making an image request from the Google servers. A problem is that following a link to a new URL stops any pending/in-progress requests.If the browser is opening a link to a new URL in the same window before the tracking request has been made, you can loose analytics data.

So step 3 isn't a wait, but a delay that has to be added in to allow the tracking image request to complete (or at least start). 100-150 milliseconds is long enough for the request, but short enough not to be noticed by users.

I use some variation of the following event tracking code (jQuery code):

$('.someClassForTracking').click(function(e){
  _gaq.push(['_trackEvent', category, action, ...]);
  if (this.target != '_blank') {
    e.preventDefault();
    var url = this.href;
    setTimeout(function(){location.href = url}, 150);
  }
});

Answer 2

You can use the hitCallback mechanism, which is documented for analytics.js but is also available for ga.js.

This was addressed on another question: Track event in google analytics upon clicking form submit

Answer 3

You need to add 'hitCallback' which fires once the tracking is done at GA's end. Don't worry about timeouts, as this event will fire if GA takes long time to get back with a response - in short it handles event timeouts.

<script>
/**
* Function that tracks a click on an outbound link in Google Analytics.
* This function takes a valid URL string as an argument, and uses that URL string
* as the event label.
*/
var trackOutboundLink = function(url) {
   ga('send', 'event', 'outbound', 'click', url, {'hitCallback':
     function () {
     document.location = url;
     }
   });
}
</script>

You'll also need to add (or modify) the onclick attribute to your links. Use this example as a model for your own links:

<a href="http://www.example.com" onclick=”trackOutboundLink(‘http://www.example.com’); return false;">Check out example.com</a>

Taken from here: https://support.google.com/analytics/answer/1136920?hl=en

Answer 4

I have implemented GA before, both internally and externally and not seen a noticeable difference in performance. Additionally, I believe the latest method of tracking link clicks allows for the tracking to be done asynchronously.

Collections- Google Developers Guide

Adding tracking in this manner will allow the user to follow the link action while the tracking is done asynchronously.

onclick="_gaq.push(['_trackEvent', 'myLink', 'clicked'])"