CODEWITHSUNDEEP
google-analyticsgoogle-tag-manager
zapico
zapico

Reputation: 2396

Wait for dataLayer.push() with Google Tag Manager

I have to send a google tag manager event when a user press a button in a web. On fact, this button is inside an iframe and after that click, this iframe is closed and another one comes up...

I'm setting this event data on the click event from javascript and then I call dataLayer.push to send that info to google analytics.

I can see this request from firebug but it gets cancelled before it arrives to google as soon as the iframe closes...

Is there any way to wait for this call before closing my iframe? Is there any other way to "push" this data?

Thanks in advance.

Upvotes: 7

Views: 12960

Answers (4)

Xavi Montero
Xavi Montero

Reputation: 10684

I am in a similar situation. I have 2 containers but even worse I receive 4 callbacks!!

Although I did not find any formal information about the following, I guessed that the callback would probably receive some parameter, so I added one to see if Google was so kind to send us some info back, and yes! and I explored it.

The received parameter in the callback Was a string, representing the ID of the tracker (I get a couple of GTM-xxx codes, plus a couple of G-xxx codes):

This is the data I push fom Javascript:

function sendDataToTrackers()
{
    const selectedOffer = getOfferStoredInTheButton();
    const formData = getStructuredFormData( true );
    
    const event = {
        "event": "htr-form-submitted",
        "form": "otoño-2023-desde-aeropuerto",
        "data": {
            "selectedOffer" : selectedOffer,
            "formData": formData
        },
        'eventCallback' : function( tracker ) {
            console.log( 'All events for tracker ' + tracker + ' fired.' );
        }
    }
    
    dataLayer.push( event );
}

And this is what I get:

Console log of the callbacks

Wondering

The G-xxx are GA4 codes injected by the GTMs.

And now what?

It seems that eventCallback is called not at the end of the GTM container but also at the end of SOME injected code that we don't control, so I am not really clear on how to control those GA4 callbacks that come in.

The magic of GTM was to decouple code from what's injected.

But, nevertheless, as we control "at least" the GTMs, we could track those callbacks, check if they are GTM-xxx, then count (or manage in a map, list, whatever.)

Something like this in the global space:

let pendingCallbacks = [
    'GTM-1111',
    'GTM-2222'
];

and then in the callback start removing the received callbacks and when the array is empty we know all the GTMs have called us back.

(Whether if that is useful or not, provided there are unexpected callbacks calling us, opens a side-question).

Upvotes: 2

Kuzma
Kuzma

Reputation: 711

You could check this full tutorial regarding cookie banner + Consent Mode. The only difference, is that they use a third party cookie banner

Upvotes: 0

user1239646
user1239646

Reputation: 121

Found here http://www.simoahava.com/gtm-tips/hitcallback-eventcallback/ the event 'eventCallback'. I didn't tested it yet but hope it will work, and as I can see gtm.js contains this event.

Upvotes: 4

Eike Pierstorff
Eike Pierstorff

Reputation: 32760

To make this question more useful for current readers: by now you would create an event listener tag in Google Tag Manager and check the "wait for tags that depend on this event" checkbox (event listener tags did not exist in GTM when this was asked).

(And of course the technical background is a bit different that stated in the question - for one thing datalayer.push does not send data to Google Analytics).

Upvotes: 3

Related Questions