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