Supercharge Report Accuracy of Google Analytics Custom Tracking with Hitcallback

I learned early on in my analytics career that 100% accuracy is not attainable in this business. And while we deal with incomplete and messy data all the time, we always look for ways to improve the quality of data we collect and apply best practices to give marketers more confidence in their analytics reports and optimization efforts.

There could be several reasons your Google Analytics code is not working properly. For example, we sometimes get stuck in a situation where you run into a race condition and you want to be certain that your Google Analytics tracking beacon is sent to servers, especially if you’re tracking an outbound link or form where the thank you page resides on a 3rd party domain, but in a lot of cases, the browser will redirect away from the page before your Google Analytics data can even be registered.

Traditionally, the solution that we’ve seen (and have used ourselves) is to use the JavaScript function setTimeout to create a delay that allows the GA tracking enough time to execute. This is not an ideal solution for several reasons.

Much better is hitCallback. hitCallback is the magical solution you need ensure that the JavaScript executes before the browser leaves the page. In this (technical) post, I’ll share the technique to help you capture key data elements that you might be missing today (and thus improving the quality of your reports).

What the heck is “hitCallback”?

“Callback” is a piece of executable code that is passed as an argument to another function.
So hitCallback is a JavaScript function that is passed as an argument to another Google Analytics method.

ga('send', 'pageview', {'page': '/my-new-page', 'hitCallback': function() {CALLBACK CODE GOES HERE;}});

In the above example, the code is pushing pageview to Google Analytics servers. Once done, it’ll execute whatever code you have in the area bolded. So for example, you can replace the above bolded text with actions like form submission code, etc. to ensure that first your pageview data is sent to GA 100%, ONLY THEN will the form be submitted and redirect the visitor to a thank you page.

Nested Callbacks

You can also utilize hitCallback to control the order of executing your code.
The below example illustrates how to control the order of Google Analytics data beacon transfer to servers. We’ve also added alerts so you can see when each step is executed:

ga('send', 'pageview', {'page': '/vp/page.html, 'hitCallback': function()
       alert('Pageview data has been sent to GA. Anything else?');
       ga('send', 'event', 'Form', 'Submit', { 'hitCallback' : function ()
           alert('Event data has been sent to GA. Anything else?');
           alert('now submitting the form');
           javascript:document.paymentForm.submit();
       }});

• In the first line we send a virtual pageview and define a callback function where an alert is executed.
• Then we fire another callback method inside the first callback where we send an event to Google Analytics.
• Finally we submit the payment form which redirects the user away from the current page.

Is hitCallback for Universal Analytics only?

No! hitCallback can be used for both Universal and traditional Async version of Google Analytics as follows:

_gaq.push(['_set','hitCallback',function() {
    javascript:document.paymentForm.submit(); // Submit underlying form
}]);
_gaq.push(['_trackEvent', 'Form', 'Submit']);

In this example the event will be pushed to GA, and only then will the form will be submitted.

Pinterest: Example of the benefits of hitCallback

Let’s say you have a pinterest button on your website page, and you had planned to track it as both social and an event in Google Analytics. You tagged the button by adding _trackEvent and _trackSocial methods to the onclick of the pinterest button.

onclick="_gaq.push(['_trackEvent', 'Social', 'Pinterest', thislink]);
_gaq.push(['_trackSocial', 'pinterest', 'pin', thislink, document.URL]);"

You expected to see data in your Google Analytics reports but for some reason, you can’t find it. What happened?

The browser redirected your visitors to the pinterest.com before executing trackEvent and trackSocial methods. So both methods were aborted and nothing was sent to the Google Analytics servers.

hitCallback solves your problem:

onclick="var thislink = this.href; _gaq.push(['_set','hitCallback',function() { window.location = thislink; }]); _gaq.push(['_trackEvent', 'Social', 'Pinterest', thislink]); _gaq.push(['_trackSocial', 'pinterest', 'pin', thislink, document.URL]); return false;"

This is how the code works:
It stops the “pin it” anchor from auto-redirect by adding “return false;” to the onclick of the anchor.
window.location is the callback method that will redirect after sending data packets to Google Analytics Servers.

Conclusion

You could be getting form submissions or pins, but not measuring your data accurately. How do you know where to optimize? But now, you can ensure everything is tracked properly and executed in the correct order, so your reports are precise.

Other scenarios you have and you’d like to share? We love to hear your feedback