如何让 GTM 标签等待一些 jQuery 被加载？

Question

我想通过 GTM 使用 Google Analytics 事件跟踪来跟踪 toast（或任何 "popup element"）是否显示。 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（网页浏览），但是 toast 中的 jQuery 代码可能仅在 gtm.js 准备就绪后加载。因此，有时当跟踪代码准备好触发并且事件未被记录时，toast 尚未显示。

有没有办法使用 GTM 和 Javascript / JQuery 来确保在解析 GTM variables/triggers/tags 之前加载所有 JQuery？还是完全不同的方法？

Answer 1

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

Answer 2

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

Answer 3

虽然按照其他人的建议使用 dataLayer 有效，但我还发现我的代码使用两个更改也有效：

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

How to make GTM Tags wait for some jQuery to be loaded?