google analytics send event callback function

Question

I'm trying to send event go google analytics after user is registered and before he's redirected. I'm using Google Tag Manager and univerasl js.

First, I was trying to use dataLayer object, as described here: developers.google

That's what my function looked like:

//Registering new user via ajax
$.ajax('/register/', {
    success: function() {

        //Pushing event to dataLayer
        dataLayer.push({
                'Category': 'Registration Process',
                'event': 'Registration Submit Btn'
            });

        //Logging in new user and redirecting the page with a timeout
        setTimeout(function(){
            loginAction();
        }, 500)
    }
})

The trouble is that I was receiving just about 25% of all events, all others are lost. I don't know if and when event is actually sent to Google after adding object to dataLayer and I think 75% of events were not send at all.

Now I'm trying to implement another approach:

//Registering new user via ajax
$.ajax('/register/', {
    success: function() {

        //Sending event through ga('send')
        parent.ga('send', 'event', 'Registration Process', 'Registration Submit Btn');

        //Logging in new user and redirecting the page with a timeout
        setTimeout(function(){
            loginAction();
        }, 500)
    }
})

But ga('send') does not have any callback function again!

How do i get sure that event was actually sent to google, using dataLayer or ga('send')?

Answer 1

From Google Analytic doc https://developers.google.com/analytics/devguides/collection/analyticsjs/field-reference#hitCallbackNews

// Alerts the user when a hit is sent.
ga('send', 'pageview', {
  'hitCallback': function() {
    alert('hit sent');
  }
});

You can edit the hitCallback function for yours.

OR

// Use a timeout to ensure the execution of critical application code.
ga('send', 'pageview', {'hitCallback': criticalCode});
setTimeout(criticalCode, 2000);

// Only run the critical code once.
var alreadyCalled = false;
function criticalCode() {
  if (alreadyCalled) return;
  alreadyCalled = true;

  // Run critical code here...
}

Here you can define your function (criticalCode) in the above example that can ensure the data sent to Google Analytic and then work with your code.

For much understanding api of analytic, fyr: https://developers.google.com/analytics/devguides/collection/analyticsjs/command-queue-reference

Answer 2

Finally got it. It's pretty complicated and not described in docs. In my case I use Google Tag Manager, so there some workarounds I had to make to get successfully fire an event and get callback.

First, we have to get ClientId, which is required with any event sent to Google servers. Actually it's kept in cookies, but Google does not recommend to take it directly from there.

Here is how Google recommends to get it, but this will not work if you are using Google Tag Manager.

 ga(function(tracker) {
       var clientId = tracker.get('clientId');
 });

Instead, you have to get ClientId from getAll method.

 var clientId = ga.getAll()[0].get('clientId');

After, you have to create new tracker

    ga('create', 'UA-XXX-YYY', {
        'clientId': clientId
    });

And after that we can send an event:

 ga('send', 'event', {
   'eventCategory': 'YOUR Category Name', //required
   'eventAction': 'YOUR Action name', //required
   'eventLabel': 'YOUR Label',
   'eventValue': 1,
   'hitCallback': function() {
       console.log('Sent!!');
      //callback function
    },
   'hitCallbackFail' : function () {
      console.log("Unable to send Google Analytics data");
      //callback function
   }
});

Answer 3

From the docs: https://developers.google.com/analytics/devguides/collection/analyticsjs/advanced#hitCallback

ga('send', 'pageview', {
  'page': '/my-new-page',
  'hitCallback': function() {
  alert('analytics.js done sending data');
}
});

In this example, the field name object configures both the page parameter, as well as setting the hitCallback. Once the tracker has completed sending data, an alert box will be shown to the user.

You can use hitCallback for events, page views etc..