Nesting events inside hitCallback functions using Google Universal Analytics

Here’s a quick example of how to fire Google Universal Analytics events sequentially by nesting them inside each fired events hitCallback function.

The scenario

Let’s assume for some reason that you need to send three separate pieces of data to Google Analytics. Along the way, you wish to keep the user informed of how this is going in the form of a progress bar.

var progress = 0;

ga('send', 'event', {
    'eventCategory' : 'Form Submission',
    'eventAction'   : 'Completed',
    'eventLabel'    : 'http://www.thepageoftheform.com',
    'eventValue'    : 1,
    'hitCallback'   : function () {

        // We have sent the first packet of data. Now let's update the progress bar.
        progress = progress + 33;

        ga('send', 'event', {
            'eventCategory' : 'User Type',
            'eventAction'   : 'Staff',
            'eventLabel'    : 'Female',
            'eventValue'    : 1,
            'hitCallback'   : function () {

                // Second packet successfully sent.
                progress = progress + 33;

                ga('send', 'event', {
                    'eventCategory' : 'Interest',
                    'eventAction'   : 'Science Fiction',
                    'eventLabel'    : 'Star Trek, Star Wars',
                    'hitCallback'   : function () {

                        // This packet of data sent
                        progress = 100;

                        // Now lets trigger the final action
                        alert('Thanks for signing up.');

                    }
                });
            }
        });
    }
});

Further consideration

This is a very basic example shown above. You’ll no doubt need to take into account a couple of other considerations, especially if your web application hinges on the hitCallback executing, as this might not always be the case, as outlined in this post.