gtm.js 加载时网页闪烁

Question

当 gtm.js 加载异步时，我们的网页出现问题。在我们网站 "flickers" 发生的那一刻，您会感觉网站被加载了 2 次。我已经评论了 GTM 的脚本并且没有 "flickering" 了。我曾尝试将脚本调用放在 <body> 标记之后以及关闭 <body> 标记之前的底部，但同样的事情发生了。我在某处读到这是 async 的缺点？这是真的吗？我该如何解决？有人有相同的 experiences/problems 吗？

我使用的片段：

<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
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-XXXXXX');</script>

提前致谢。

Answer 1

这本身并不是 GTM 或异步代码的问题（并且您不应将脚本放在页面底部，因为它有其自身的问题份额，即使它似乎在乍一看；还要注意不要将 GTM 包裹在任何其他 HTML 标签中。

但是，如果您的 GTM 容器包含导致页面重绘的标签，即几乎任何改变页面布局或插入可见内容的标签，则可能会出现问题 HTML（这就是为什么 Google 警告那些类型的标签）。

如果您的页面中有任何自定义 HTML 标签，您应该禁用它们并重试（从 GTM 标签模板创建的标签不应影响页面布局）。

gtm.js 加载时网页闪烁

Flickering of webpage when gtm.js loads

html

javascript

asynchronous

loading

google-tag-manager