为什么 Google 标签管理器并不总是像在 Google 演示商店中那样实施？

Question

有一些关于 Google 跟踪代码管理器代码段的问题。如果我正在查看 Google Demo Shop 网站，GTM 实现是这样的：

<head>
    <script async="" src="//www.googletagmanager.com/gtm.js?id=GTM-XXXXX"></script>
            ... some stuff ...
    <noscript> &lt;iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXX" height="0" width="0" style="display:none;visibility:hidden"&gt;&lt;/iframe&gt; 
    </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-5Q5LZH');
    </script>
</head>

所以基本上一切都在 header 中。所以第一个问题，这一行是什么：

<script async="" src="//www.googletagmanager.com/gtm.js?id=GTM-XXXXX"></script>

第二个问题，我看过下面的代码：

<noscript> &lt;iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXX" height="0" width="0" style="display:none;visibility:hidden"&gt;&lt;/iframe&gt; 
</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-5Q5LZH');
</script>

可以在 body 标签打开后立即实施...我已经看到很多了。

这些不同类型的实现之间是否存在一些真正的区别？ Google Tag Assistant 似乎没有任何区别。谢谢！

Answer 1

最初 Google 跟踪代码管理器建议 GTM 代码段位于 <body>，但它最近更新了建议，将其放在<head>.

这很可能是由于两个原因。

1) 显然有人担心 GTM 库修改文档对象模型的方式可能会导致 IE7 或更早版本的冲突。

2) <noscript>中的<iframe>为内嵌内容，而不是HTML，文档<head>中不允许[=27] =]

最近 Google 更新了其指南和文档以显示拆分实现，在 <script> 中 <head> 和<body>.

中的 <noscript><iframe>

这是有道理的，因为没有理由 JavaScript 库需要在 <body> 中。与所有跟踪一样，尽早加载依赖项是理想的，以确保您的跟踪在用户与网站交互之前可用。但是由于原因2，<noscript><iframe>还是建议放在<body>.

所以，回答你的问题：

1) Google Demo Store 上的实现不正确，整个代码不应该放在<head>.

2) Tag Assistant 中的 <script async="" src="//www.googletagmanager.com/gtm.js?id=GTM-XXXXX"></script> 不是实际代码，而是 Tag Management 扩展如何解释代码。

3) <body> 实现是之前推荐的实现，这就是为什么你经常看到它的原因。

4) 展望未来，在设置 Google 跟踪代码管理器容器时，我建议采用 Google 建议的实施方式，尽管放置在 <head> 和 [=10] 之间=].这意味着 GTM 将尽早加载，并在需要时使用 iframe 备份。

5) Tag Assistant 仅根据在扩展中手动设置的规则检查代码。明显的警告是扩展需要保持最新。这方面的一个例子是，最近 GTM 容器 ID 从 6 个字符变成了 7 个字符，但是扩展没有更新，导致很多人在 Tag Assistant 中收到错误，指出他们的容器 ID 不正确。

为什么 Google 标签管理器并不总是像在 Google 演示商店中那样实施？

Why Google Tag Manager is not always implemented as it is in the Google Demo Shop?

google-tag-manager