Google Analytics Async Event Tracking with event handlers in jquery

Question

On all my site pages I have the google analytics async code setup as follows just before the closing head tag....

<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXX-X']);
_gaq.push(['_trackPageview']);

(function() {
    var ga = document.createElement('script');
    ga.type = 'text/javascript';
    ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(ga, s);
})();</script>

Then on my checkout pages I am trying to use event tracking to report the time the user spent on the various pages as the value for google analytics events.

I am doing this by making use of the jQuery.ready function to record the 'start' time and add event handlers to the submit buttons that take the user to the next step in the checkout. This code is in a external file, common.js and is as follows...

        $(document).ready(function() {
        recordStartTime();
        if ($("#checkoutPage1").length) 
        {   
            if ($("#customerDetailsForm").length) 
            {   
            // Time spent
                $('.customerDetailsSubmitButton').click(function() {
                time = durationWholeSeconds();
                _gaq.push(['_trackEvent', 'Checkout', 'Timing', 'CustomerDetailsPage', time]);
                return true;
                });
            }
        }

I have similar sections of code for the other steps in jQuery.ready, #checkoutPage1, #checkoutPage2, #checkoutPage3 etc.

When I test this code on my browser (Chrome) all works as expected and using the ga.debug plugin I can see the _trackEvent parameters being sent to google analytics.

My problem seems to be that this does not always seem to work in the wild. On my live site I see intermittent events coming through. Given I know pretty accurately how many 'sales' I have the events that should be expected in GA do not match. Often some of the latter events in the checkout steps report without the earlier ones being recorded.

My question is basically can I use the jQuery.ready function to add the event handlers and the tracking code where needed? Is there another issue I am not spotting?

Eduardo Eduardo · Accepted Answer · 2012-08-26T21:43:06

You can use jQuery.ready, but you have to keep in mind that sometimes jQuery.ready will not fire. Sometimes users will navigate away before the DOM is ready.

You didn't post your functions recordStartTime and durationWholeSeconds. If they raise an exception on a browser for some reason than that session won't fire events. Maybe you should make sure they are shielded by try catch blocks to fire the Event even if they fail.

I would also advise you to use $('.customerDetailsSubmitButton').mousedown instead of click. mousedown fires first and here timing is essential. If the browser redirects before the Event goes through there's a chance it will be canceled and never reach GA. In our tests using mousedown we see almost twice the hits than using click.

Google Analytics Async Event Tracking with event handlers in jquery

1 Answers