Question

我想跟踪是否通过GTM使用Google Analytics事件跟踪显示吐司（或任何“弹出元素”）。是否显示toast是由jQuery代码定义的，并基于cookie信息，如此

function ShowToast(Msg){
    $('#toast-msg').html(Msg);
    $('#toast').animate({ left: '-10px' });
}

通过

调用

<script type="text/javascript">
    $(function() {
        ShowToast("SOME HTML");
    });
</script>

这是我到目前为止使用自定义变量

在GTM中获得的

function(){
    if(document.querySelector("#toast #toast-msg").length > 0){
        return true;
    }
}

触发器监听此变量为真，以及通常的Universal Analytics事件标记。我们的想法是简单地检查是否显示了toast-msg，这在预览模式下工作正常。

现在问题：标签正在侦听gtm.js（网页浏览），但是只有在gtm.js准备就绪后，来自toast的jQuery代码才会加载。因此，当跟踪代码准备好开始并且没有记录事件时，有时候还没有显示toast。

有没有办法使用GTM和Javascript / JQuery来确保在解决GTM变量/触发器/标签之前加载所有JQuery？还是一种完全不同的方法？

Answer 1

确保您已通过包含以下代码行在文档的<head>中初始化了dataLayer：<script>window.dataLayer = window.dataLayer || [];</script>
将此代码添加到您的jQuery toasts（或您想要跟踪的任何其他内容）dataLayer.push({'event': 'event_name'});
使用您在上面选择的Custom Event在GTM中创建event_name触发器。
使用上述触发器

Answer 2

一种方法是在加载弹出窗口时将事件推送到dataLayer。另一种方法是你可以激活你的代码和gtm.dom或gtm.load（当页面完全加载时）

Answer 3

使用dataLayer时，正如其他人所建议的那样，我也发现我的代码使用了两个改动：

更改错误的代码：document.querySelector("#toast #toast-msg").innerHTML.length > 0我忘记了innerHTML属性
为了确保jQuery已加载，我将触发器类型更改为gtm.dom，从而可靠地触发了事件。