Google Analytics gtag.js ready callback

Question

I try to update my Google Analytics implementation from analytics.js to the new gtag.js.

In the old implementation I am using the ready callback function.

ga(function() {
    console.log('Google analytics is ready'); 
});

How can I implement a ready callback in the new gtag.js? I can't find any information in Google's documentation.

Cardinalate

Can you expand on what you are trying to do? What do you use the callback for exactly? – Lacy

Answer 1

The command event supports the parameter event_callback, a function called when processing has completed. So, compared to the old analytics.js, you need to send an event to trigger the callback.

For example, you can use the page_view event; however, to avoid duplicates, you must disable the automatic page_view event by setting send_page_view to false.

gtag('config', GA_TRACKING_ID, {
  'send_page_view': false
});
gtag('event', 'page_view', {
  'event_callback': function() {
    console.log('Google Analytics is ready'); 
  }
});

Klee

This is a great answer, the only thing that's missing is a reference to the documentation. Here: developers.google.com/gtagjs/reference/event – Iridis

Couldn't we just set like this to get the ready callback? gtag('config', GA_TRACKING_ID, { event_callback: alert('Ready'), }) – Plantaineater

Actually 'event_callback' property doesn't seem to be in the docs – Grata

Just to note, gtag('config', GA_TRACKING_ID, { event_callback: alert('Ready'), }) doesn't work because the config command doesn't call the event_callback - only the event command does that - see developers.google.com/tag-platform/gtagjs/reference/parameters "event_callback | function | function() { form.submit(); } | JavaScript callback function called when processing of an event command has completed.```... – Fresco

Docs for event_ballback are here: developers.google.com/tag-platform/gtagjs/reference/parameters An important note: event_ballback is being fired before the actual server request is completed. So it can not be used as a reliable source of information about wether event was successfully submitted to GA servers or not. – Pacifism

@MaximMazurok are there any other more reliable alternative to monitor wether event was successful or not? – Crosscurrent

@Crosscurrent I guess you could use Service Worker to detect failed requests to GA and maybe retry them, or communicate that back to your main app... But you might have trouble with attribution, like you will know that some event failed, but wouldn't necessarily know which one. IIRC there's no good easy way to accomplish this. I ended up treating these events as optional, and may have added a timeout before navigation. But if you need to send them before navigation - better send them from BE and redirect user or something. – Pacifism

Answer 2

A simpler (but probably less reliable) solution is to use the onload attribute of the <script> tag:

<script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"
  onload="console.log('Google analytics is ready');">
</script>

Klee

Answer 3

You should be mindfull that under many scenarios the event_callback would not be called:

• gtag.js script has not loaded (network issue or blocked)
• a call delivering the event has not succeded (network issue or blocked)

If you nedd a strong guarantee of the event being fired (ie you wat to go to the app page after logging the "login" event) you'd need to redefine the gtag function:

function gtag() {
    if (arguments[2] instanceof Object && arguments[2]["event_callback"] instanceof Function) { // We have a callback to call
        var cb = arguments[2]["event_callback"]
        var tid = window.setTimeout(cb, 200) // call soon just in case the event fails to deliver
        arguments[2]["event_callback"] = function() {
            window.clearTimeout(tid) // no need to call on our own
            cb() // go
        }
    }
    window.dataLayer.push(arguments);
}

Tamikatamiko