如何使GTM标签等待一些jQuery加载

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

本文关键字：jQuery 加载 等待 何使 GTM 标签      更新时间：2023-09-26

我想跟踪如果toast(或任何"弹出式元素")通过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 (pageview)，但是toast中的jQuery代码可能只有在gtm.js准备好之后才会加载。因此，有时当跟踪代码准备触发并且事件未被记录时，toast尚未显示。

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

    确保你已经在你的文档的<head>中初始化了dataLayer，包括这行代码:<script>window.dataLayer = window.dataLayer || [];</script>
  1. 将此代码添加到您的jQuery toasts(或任何其他你想要跟踪)dataLayer.push({'event': 'event_name'});
  2. 在GTM中用上面选择的event_name创建一个Custom Event触发器。
  3. 用上面的触发器创建一个event类型的GA标签

一种方法是在弹出窗口加载时将事件推送给dataLayer。另一种方法是您可以启动您的代码和gtm。Dom或gtm。加载(当页面完全加载时)

查看相关文章获取更多详细信息http://marketlytics.com/analytics-faq/control-gtm-tags-to-wait

虽然使用dataLayer工作，正如其他人建议的那样，我还发现我的代码使用两个更改工作:

  • 更改错误代码:document.querySelector("#toast #toast-msg").innerHTML.length > 0我忘记了innerHTML属性
    • 为了确保jQuery已经加载，我将触发器类型更改为gtm。
相关文章：