fire custom event using dataLayer.push only after gtm script has fully loaded on page

Question

I have a webpage using Google Tag Manager. At some point during loading, the page fetches data from an API, and pushes some of that data to the dataLayer via a function, "gtmPush". A custom event tag is configured in the google tag manager container to trigger on this push event.

const ecommerceEvents = [<"array of valid ecommerce event strings">];

function gtmPush(eventname, params) {
    
    console.log("Firing GA4 event: " + eventname);
    let eventdata = {};
    
    // clear ecommerce object if it's an ecommerce event
    if (ecommerceEvents.indexOf(eventname) !== -1) {
        dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
        eventdata.ecommerce = params.meta;
    } else {
        eventdata = params.meta;
    }
        
    eventdata.event = eventname;
    dataLayer.push(eventdata);
}

This approach only works sometimes however, as the GTM isn't always ready by the time this code executes. I'm trying to figure out how to listen for GTM being ready before pushing the event, but have not had any luck.

Checking for the existence of the dataLayer object and the gtmLoad flag let's me bypass attempting to push the event immediately, but I'm not sure how to set up an appropriate event listener for when the GTM loads. One solution I saw was to push the gtmLoad event to the dataLayer along with an eventCallback:

function checkGtmStatus(eventname, params) {
    
    // Is GTM ready?
    if (window.google_tag_manager.dataLayer && "gtmLoad" in window.google_tag_manager.dataLayer &&     window.google_tag_manager.dataLayer.gtmLoad) {
        gtmPush(eventname, params);
    return;
    }

    // Not ready yet, wait for gtmLoad event to fire
    dataLayer.push({ 
        "event": "gtmLoad",
        "eventCallback": gtmPush(eventname, params)
    }

} 
    

This instead fires multiple times (always 3 times, to be precise) instead of just once as intended. This isn't necessarily an issue with the Tag Manager Assistant as was suggested in separate posts, because without running via TMA, I see the console.log statement from gtmPush 3 times.

I also tried adding the function callback to window.load as an alternative to the dataLayer approach,

window.addEventListener('load', function() {
    gtmPush(eventname, params);
});

but again the tag fires inconsistently.

Is there a specific way to listen for the GTM finishing it's setup? Alternatively, is there some way I can configure a tag in the GTM container to handle this?

Answer 1

You don't need to wait the GTM container load for pushing datalayer.

Just use code like this

window.dataLayer = window.dataLayer || [];
window.dataLayer.push(...something you need) 

In this way. Even you push the information before GTM load. The GTM still can get the information and trigger the tag or getting the data you want.

That's said it is a view_item event. It's not weird to see the view_item datalayer is before page_view. And all the tracking are still fine.