仅在 gtm 脚本完全加载到页面后才使用 dataLayer.push 触发自定义事件

Question

我有一个使用 Google 跟踪代码管理器的网页。在加载过程中的某个时刻，页面从 API 获取数据，并通过函数“gtmPush”将其中一些数据推送到 dataLayer。在 Google 标签管理器容器中配置自定义事件标签以触发此推送事件。

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);
}

但是，这种方法仅有时有效，因为在执行此代码时 GTM 并不总是准备就绪。我正在尝试弄清楚如何在推动活动之前监听 GTM 是否准备就绪，但没有任何运气。

检查 dataLayer 对象和 gtmLoad 标志是否存在，让我可以绕过立即推送事件的尝试，但我不确定如何在 GTM 加载时设置适当的事件侦听器。我看到的一种解决方案是将 gtmLoad 事件与 eventCallback 一起推送到 dataLayer：

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

} 
    

这会触发多次（准确地说，总是 3 次），而不是按预期只触发一次。这不一定是标签管理器助手的问题，正如在单独的帖子中所建议的那样，因为如果不通过 TMA 运行，我会看到来自 gtmPush 的 console.log 语句 3 次。

我还尝试将函数回调添加到 window.load 作为 dataLayer 方法的替代方案，

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

但标签再次触发不一致。

有没有具体的方法来监听GTM完成它的设置？或者，有什么方法可以在 GTM 容器中配置标签来处理这个问题吗？

Answer 1

您无需等待 GTM 容器加载即可推送数据层。

只需使用这样的代码

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

这样。即使您在 GTM 加载之前推送信息。 GTM仍然可以获取信息并触发标签或获取您想要的数据。

也就是说，这是一个

view_item

事件。 看到

view_item

数据层位于

page_view

之前并不奇怪。 所有的跟踪仍然没问题。