Wait for dataLayer.push() with Google Tag Manager
Asked Answered
V

4

7

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.

Vipul answered 27/5, 2013 at 8:26 Comment(1)
will navigator.sendbeacon helps?Trierarch
U
4

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.

Unwitnessed answered 5/11, 2015 at 8:15 Comment(0)
D
3

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).

Dilator answered 15/5, 2014 at 13:13 Comment(5)
datalayer.push does not send data to Google? How do you get new data otherwise?Vipul
Everything that is configured in the Tag Manager is wrapped in a javascript object and injected into the page. Datalayer.push adds key/value pairs to the dataLayer object. The datalayer object is then evaluated by the GTM javascript code. It is the contained GTM code that may send info to Google Analytics (if you have a GA tag configured), not the dataLayer. The dataLayer is just (non-persistent) key/value storage, it does not send anything.Dilator
And what's the trigger to let GTM know it must send the data?Vipul
What I mean is explained here: developers.google.com/tag-manager/devguide at "Using the Data Layer with HTML Event Handlers". Maybe I didn't understand it correctly...Vipul
If you want to trigger a tag via the dataLayer you have to include a value for "event" (e.g. dataLayer.push({'event': 'myevent'}) ) and set up a rule/trigger in the Tag Manager that listens for this custom event ( {{event}} eq "myevent" in the old version of GTM, custom event trigger "Event name to match" equals "myevent" in the new version).Dilator
L
1

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).

Lan answered 24/9, 2023 at 12:36 Comment(1)
C
0

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

Corkage answered 17/9, 2022 at 14:42 Comment(0)

© 2022 - 2025 — McMap. All rights reserved.