logo标签列表

谷歌标签管理器延迟window.load吗？

javascriptjqueryajaxgoogle-tag-manager
14

我有一个页面，在加载时会触发一次ajax调用

$(window).load(function() {
  updateDeliverySlots();
});

我还在页面的body部分放置了Google Tag Manager的JavaScript代码（我知道现在的建议是将其放在head部分，但我们还没有更新代码，也不认为这是问题的根源）。

<body>
        <!-- Google Tag Manager -->
<noscript>
    <iframe src="//www.googletagmanager.com/ns.html?id=XXXX" height="0" width="0" style="display:none;visibility:hidden">
    </iframe>
</noscript>
<script>
    (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});
    var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';
    j.async=true;
j.src='//www.googletagmanager.com/gtm.jsid='+i+dl;f.parentNode.insertBefore(j,f);
})
(window,document,'script','dataLayer','XXXX');
</script>
<!-- End Google Tag Manager -->
....
</body>

我有一个问题，与GTM标签中包含的脚本所做的调用之一有关。此脚本发送请求到第三方。如果由于某种原因（例如服务器宕机）请求无法连接，则我的updateDeliverySlots()函数（以及其中的ajax调用）直到请求超时（60秒）才会被执行。我还发现页面仍在“加载”（根据浏览器图标）。

是否有什么是我在GTM实现中做错了？ 我的理解是，在Google标签的背面触发的所有内容都应该是异步的，并且不会对页面的“准备就绪”产生影响。

2个回答
8

同步脚本必须在处理到达它们时获取并运行，async scripts异步脚本可以在处理到达它们后的任何时间运行。

由于时序控制在服务器/页面之外，因此异步脚本可能会：

  • 在文档完成前添加同步资源，其时序会延迟加载事件
  • 在页面处理后添加同步资源，不影响加载事件
  • 添加一个不应显著影响页面的异步资源（除非它又向页面添加了同步资源）

您可以选择几个选项来解决GTM中的这个问题：

  1. 修复自定义脚本以使用异步资源
  2. 将触发器更改为 页面视图 -> 窗口加载完成
  3. 如果可用，用谷歌提供的标签替换脚本，因为它们应该只使用异步资源构建

  4. 在GTM中阻止自定义脚本（这也会防止相关跟踪）

  5. 将您的GTM代码片段上的async更改为 defer。

I.e:

  <!-- Google Tag Manager -->
  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.defer=true;j.src=
  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','GTM-XXXXX');</script>
  <!-- End Google Tag Manager -->

由于这将把整个GTM过程移动到页面完全解析之后，它将破坏“Google Optimizer”标签和早期页面跟踪。
2

我曾经遇到同样的问题，GTM会延迟其他脚本的执行。通过使用jquery $(window).load加载它，解决了这个问题：

<script>function loadgtm(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
};$(window).load(function(){loadgtm(window,document,'script','dataLayer','GTMID');});</script>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接