How do you know that your tracking beacon i.e. your event, virtual pageview, social interaction, is making it into Universal Analytics? You can look at real-time reports, and/or use a tool like HTTPFox (Firefox) or Google Analytics Debugger (Chrome) to monitor the request. In this blog post, I want to show you what the errors look like when a request doesn’t have enough time to make it to Universal Analytics and how we can GUARANTEE the request makes it to Universal Analytics every time.

The Issue

Once upon a time, I would see the request getting sent with NS_BINDING_ABORTED:

hitcallback - invalid

The fact that the request was red was a huge and literal “red flag”, however, I would see the query parameters coming through within Universal Analytics real-time events, so I thought nothing of it:

hitcallback - query parameters

It wasn’t until we started dual-tagging sites using Google Tag Manager, that I began to notice discrepancies between some Google Analytics events and Universal Analytics events. Nobody likes discrepancies, so I set out on a conquest to figure out why there was a difference in data. Low and behold, the issue was that the request wasn’t given enough time to send before the next page was loaded. I later found out that this is often referred to a race condition.

“A race condition or race hazard is the behavior of an electronic or software system where the output is dependent on the sequence or timing of other uncontrollable events. It becomes a bug when events do not happen in the order the programmer intended. The term originates with the idea of two signals racing each other to influence the output first. – Wikipedia

For example, the request we were sending to Universal Analytics was racing against the hyperlink request.  Sometimes the event made it to Universal Analytics and sometimes it didn’t.

So, how do we prevent this?

Well, Universal Analytics has an awesome, built-in function in Universal Analytics called hitCallback.

What is hitCallback?

Well, in the words of Google’s documentation “…hitCallback is a function that will execute as soon as analytics.js has completed sending data.” In other words, the hitCallback function says: “Hey, I see that you clicked a link. That’s great. I’ll send it to Universal Analytics, and when I hear back from Universal Analytics saying that the request has been successfully accepted, I’ll take you to whatever it is that you’re wanting to see”.It’s important to note that this is all happening within fractions of second, like 1/10 of a second or less. It’s fast and your visitor will never know that they just waited an additional 300ms for a page to load.

When should you use hitCallback?

Use hitCallback when you’re debugging or QAing your implementation. I find that I have to use it when I’m tracking navigation links, outbound links, or on form submits.

How do you use hitCallback?

Universal Analytics has made it very easy to implement the hitCallback function. I’ll show you how to use the hitCallback function on an inline link.

hitCallback with an inline Link

Let’s say you have an outbound link with event tracking that goes off of your site to http://cool.com. It might look like this:

<a href='http://cool.com/' onclick="ga('send','event','outbound','click', this.href);">Cool</a>

You’ve realized that when people are clicking this link, the event is sometimes making it into Universal Analytics. Because you stickler for clean and accurate data, you’d like to guarantee that event is always propagating within Universal Analytics. We are going to guarantee that by using hitCallback. That code would look like this:

<a href='http://cool.com/' onclick="var href = this.href; ga('send','event','outbound','click', this.href, {'hitCallback': function(){document.location = href;}}); return false;">Cool</a>

Let’s walk through the onclick event and see what has changed:

var href = this.href; //create a variable and set it equal to the href in the anchor tag. This is necessary to allow the hitCallback function to access the link. If you were to simply set the document.location equal to this.href, it will come back undefined because the thisis out of scope.

ga('send','event','outbound','click', this.href, //no changes here except for the comma

{'hitCallback': function(){document.location = href;}}); //this is the hitCallback function that we’re passing as an optional parameter. Note that you’ll need to include the entire function in curly brackets. We’re also doing a second thing here: setting document.location our href variable, which is really this.href i.e. http://cool.com.

return false; //and finally, the onclick should be returned false to prevent the default action i.e. requesting http://cool.com, before we can fire off our Universal Analytics event tag.

Conclusion

Using hitCallback will ensure that your tracking beacons are making it into Universal Analytics before your visitors navigate to another page or submit a form. Always use tools like HTTPFox (Firefox) or Google Analytics Debugger (Chrome) to monitor your requests, and be sure to view your data coming in using Real-time reports.