0

好吧，这很奇怪。我已将 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>

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

更新

我有一个常见的 webpack 包，称为common.js. 根据网络选项卡，谷歌标签管理器脚本似乎强制它被第二次下载。真的很奇怪。

在此处输入图像描述

4

1 回答 1

1

我终于能够弄清楚这个问题。我有一个正在加载谷歌广告转换跟踪代码的部分：

<!-- 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 编译和加载的，这导致了一些奇怪的竞争条件或某种争用。仍然不确定为什么这会是一个问题，但它修复了它。

于 2015-02-06T02:56:12.987 回答