Google 标签管理器在 XHR 就绪状态已更改时挂起

Question

好吧，这很奇怪。我已将 Google 标签管理器脚本添加到页面底部并发布了容器，但我已删除所有标签（以防其中一个标签是罪魁祸首）。我的代码片段如下所示：

    <!-- Google Tag Manager -->
    <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-5T8FJJ"
    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.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-5T8FJJ');</script>
    <!-- End Google Tag Manager -->

似乎发生的情况是标签助手代码中的某些内容挂起并导致页面在几秒钟内没有响应。

您可以在此屏幕截图中看到 onreadystatechange 花费了将近 3200 毫秒。

关于更多上下文，我正在使用 node/react/webpack 进行服务器端渲染。这是我在服务器上呈现的页面模板：

<!DOCTYPE html>
<html>
  <head>
    <meta charSet="utf-8" />
    <meta httpEquiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title><%= title %></title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="csrf" content=<%= csrf %> />
    <link rel="stylesheet" href="<%= styleUrl %>" />
  </head>
  <body>

    <script type="text/javascript">
      window.data = <%= data %>;
    </script>

    <div id="react-target">
    <%= html %>
    </div>

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
    <script type="text/javascript" src="<%= commonsUrl %>"></script>
    <script type="text/javascript" src="<%= scriptUrl %>"></script>

    <!-- Google Tag Manager -->
    <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-5T8FJJ"
    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.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-5T8FJJ');</script>
    <!-- End Google Tag Manager -->

  </body>
</html>

这是我第一次尝试使用 google 标签管理器，所以我不确定我的配置是否有问题。感谢帮助。

更新

我有一个名为 common.js 的通用 webpack 包。根据网络选项卡，似乎 google 标签管理器脚本强制它进行第二次下载。真奇怪。

Answer 1

我终于弄清楚了这个问题。我有一个部分正在加载 google adwords 转换跟踪代码：

<!-- Google Code for Registration Conversion Page -->
<script type="text/javascript">
  /* <![CDATA[ */
  var google_conversion_id = xxx;
  var google_conversion_language = "en";
  var google_conversion_format = "3";
  var google_conversion_color = "xxx";
  var google_conversion_label = "xxx";
  var google_remarketing_only = false;
  /* ]]> */
</script>
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js"></script>
<noscript>
  <div style="display:inline;">
  <img height="1" width="1" style="border-style:none;" alt="" src="//www.googleadservices.com/pagead/conversion/xxx/?label=rX1nCMeesFkQ29ac1wM&amp;guid=ON&amp;script=0"/>
  </div>
</noscript>

这是由 webpack 编译和加载的，这导致了一些奇怪的竞争条件或某种争用。仍然不确定为什么这会成为问题，但它已解决。

Google 标签管理器在 XHR 就绪状态已更改时挂起

Google Tag Manager hangs on XHR Ready State Changed

node.js

google-analytics

reactjs

google-tag-manager

webpack