Google Universal Analytics - track multiple events on a single link click

Question

Google suggests this to track outbound links:

ga('send', 'event', 'outbound', 'click', url, {
    'hitCallback': function () {
        document.location = url;
    }
});

It uses "hitCallback" to redirect the user to page once the event has been successfully tracked.

What is the syntax for tracking multiple events per click?

I'd prefer not to write code like this:

ga('send', 'event', 'outbound', 'click', url, {
    'hitCallback': function () {

        ga('send', 'event', 'foo', 'click', url, {
            'hitCallback': function () {

                ga('send', 'event', 'bar', 'click', url, {
                    'hitCallback': function () {
                        document.location = url;
                    }
                });
            }
        });
    }
});

Any solution needs to support IE7+ and have no library dependencies.

Google suggest using the hitCallback to ensure that the hit is sent before page navigates away. So are your links opening in a tab or within the same tab? You could try to use the "useBeacon" flag (or I think it's now called "transport") instead of hitCallback. It does the same thing in essence: https://developers.google.com/analytics/devguides/collection/analyticsjs/field-reference#useBeacon — nyuen, Jun 04 '15 at 16:32
The links will be open in the same tab. I did look at the beacon feature but is uses [Navigator.sendBeacon()](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon) which doesn't have much support. This need to work in IE7+ — Stephen S, Jun 04 '15 at 16:41
Have you tried sending the events on mousedown? This way you may not need the hitCallback as the events would be sent before the user's click is completed. — nyuen, Jun 04 '15 at 17:23
This is exactly the type of thing you'd use promises for, but if you don't want to have any library dependencies, then you'll have to write all that code yourself. — Philip Walton, Jun 04 '15 at 22:11
It's not that I don't want to use a library, the current constraints make it difficult. I thought Universal Analytics might have had a syntax to submit multiple events like the previous version: http://stackoverflow.com/questions/9572402/can-i-track-multiple-google-analytics-events-at-once — Stephen S, Jun 05 '15 at 00:37

score 0 · Answer 1 · answered Jun 05 '15 at 13:50

You should try this:

ga('send', 'event', 'outbound', 'click', url, {transport: 'beacon'});
ga('send', 'event', 'foo', 'click', url, {transport: 'beacon'});
ga('send', 'event', 'bar', 'click', url, {
    transport: 'beacon',
    hitCallback: function () {
        document.location = url;
    }
});

Transport parameter is fallbacked by classic pixel tracking, so IE7 should survive this.

If there is sendBeacon/transport used, you are independent on callbacks river, so the last ga call is enought.

score 0 · Accepted Answer · answered Jun 07 '15 at 11:48

0

I think there are two potential approaches:

Rely on the assumption that GA processes events sequentially and only use a hit callback for the last event.
Use a single hit callback that counts the number of invocations and only changes document.location when the last expected call is received.

answered Jun 07 '15 at 11:48

Andreas Veithen

8,868
3
25
28

As there doesn't seem to be any method for sending multiple events per action, and making assumptions is never a good idea, it really only leaves your second approach or nested callbacks as options. While neither are ideal, I've implemented the event count as it's a better fit given my constraints. – Stephen S Jun 09 '15 at 19:58

Google Universal Analytics - track multiple events on a single link click

2 Answers2