Google Analytics: How to set up event tracking for link clicks

In Google Analytics, you can use the event Tracking feature to track your custom events. However, if you are tracking a link click, then simply writing this will likely result in a number of missed events:

<a href="http://www.example.com" onclick="_trackEvent(‘link‘, ‘click‘, this.href)">Visit example.com</a>

This is because every time a custom event is triggered, the browser sends a request to Google's server to send the data. However, clicking the link will go directly to the next page, and if a request is not completed at this point, the browser will discard the request and jump directly to it. As a result, events cannot be logged.

Workaround workaround for classic tracking code (ga.js)

Since the event is not recorded because the jump is too fast, we can setTimeout set a relatively small delay through the function to give the browser enough time to send data to Google's server. Usually set to 500ms or 1000ms is sufficient, and the user will not be aware of.

We can wrap the statement of the triggering event into a custom function:

var trackOutboundLink = function(url) { _trackEvent(‘link‘, ‘click‘, url); setTimeout("document.location=‘" + url + "‘", 500);}

This is also written in HTML:

<a href="http://www.example.com" onclick="trackOutboundLink(this.href);return false;">Visit example.com</a>

Where the return false statement prevents the default behavior (click a and Jump) occurs, the actual jump by ourselves to complete.

Universal Analytics (analytics.js) solutions Google suggests methods

If you've already upgraded to Universal Analytics, Google gives the official advice in this case. In the new version of the tracking code, the function that sets the event contains a callback that is triggered after the successful setup is complete. So we can write the code of the manual jump to the callback function, so that you do not have to explicitly set timeout, and the browser can also "as soon as possible" jump.

Also declare a wrapper function:

var trackoutboundlink = function  (url) {ga ( Span class= "S1" > ' send '  ' event '  ' outbound ' Span class= "P",  ' click ' url{  ' hitcallback ' : function  () { Span class= "NB" >document. Location = url} });                /span>                

This time, it is used hitCallback , and its corresponding function will be called after the event information has been successfully sent. Similarly, the HTML code reads:

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

(The above two examples of code from the official Google document, link to the above)

And you can do better.

The tutorial can be finished here, but there is one more thing to note. The above workaround is perfectly fine in most cases, except in the case where the browser fails to send the event data to the Google server properly. For example, if Google's server suddenly "Can't access" (You know), or the load analytics.js fails, then hitCallback it will never be called. In this case, the link becomes point and useless.

There is no problem with accessing Google, and this is a natural situation that doesn't have to be considered. However, in order to provide maximum protection, you can manually add a defensive measure:

VarTrackoutboundlink=function(Url){VarRedirecttriggered=False;Ga(' Send ',' Event ',' Outbound ',' Click ',Url,{' Hitcallback ':function () {redirecttriggered = true< Span class= "P"; document. Location = url;} ); settimeout (function () { if  (! Redirecttriggered) {document. Location = url;} }, 1500}        

That is, trackOutboundLink after entering, set the expiration time of 1500ms, if the time has not been jump, on the manual jump, to ensure that visitors can access the normal.

Original link: https://www.renfei.org/blog/google-analytics-event-tracking-for-links.html

Google Analytics: How to set up event tracking for link clicks