谷歌标签管理器 - 底部脚本的情况如何处理？

Question

在我们的网站上，我们在页脚闭合 body 标签之前使用脚本标记来引入第三方服务，例如 Lotame、Peer39 和 Google Analytics，以避免阻塞页面渲染。我们尽可能将脚本设置为延迟或异步加载，但是有些服务无法与异步加载一起使用，必须作为普通标记留下。我们还向其他分析服务发送有关每个页面内容的大量数据，这意味着我们选择将其包含在页脚中。

我们现在正在考虑使用 Google Tag Manager 代替我们包含外部脚本。为了实施 GTM，Google 建议您放置他们的代码块。

<!-- Google Tag Manager -->
<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>
<!-- End Google Tag Manager -->

将GTM代码放在body标签之后，这将是GTM开始请求标签的位置。我理解这个位置是推荐的，以避免IE6和IE7出现问题。

GTM没有提供任何指定脚本加载顺序的方式。我担心如果遵循这个建议，会将一些同步脚本文件的请求从页脚移动到页眉，而它们在页脚是安全的，不会影响主要内容。

我是否担心过度了？创建第二个GTM容器来管理页脚脚本似乎太过复杂。如果我不支持IE7，将GTM代码块放在页脚是否有意义，考虑到我当前的一些脚本在页眉中？

- And Finally

---

只是针对GTM的放置进行评论：如果您将GTM放置在页面下方，那么存在更大的可能性，即如果用户在GTM有机会加载之前触发这些交互，则应跟踪的交互可能会被忽略。此外，如果用户进入网站，然后在GTM加载之前迅速导航到另一页，则您可能会完全错过页面视图。 - nyuen

好的，谢谢nyuen，我明白了。 - And Finally

如果用户点击得太快，导致GTM无法捕捉到交互，则我宁愿提供给用户更快的体验，也许会错过一些营销数据。 - Evert Albers

Answer 1

如果你的第三方服务必须是同步的，最好将它们排除在Google Tag Manager之外（参考来源：Google Tag Manager不支持哪些标签？）；这很好。通常，在网站测试工具中会出现这种情况，其中您实际上需要在页面呈现之前加载内容，否则您会看到闪烁。

此外，GTM确实提供了一个优先级规划，让您可以设置标签何时触发 - 参见我可以如何优化标签的触发顺序。

简而言之，将所有异步标签放入GTM中，将同步标签留在外面。

- Blexy

---

非常感谢您，Blexy，这回答了我的问题！ - And Finally

Answer 2

你也可以在DOM加载完成或页面完全加载时触发GTM标签，这个条件非常接近于将标签放置在</body>标签之前。

在第一种情况下创建一个新的触发器Page View > DOM Ready，在第二种情况下创建Page View > Window Loaded。

- Francesco

Answer 3

为了改善阻塞问题，你还可以尝试使用partytown。它可以将你的分析脚本从主线程移动到一个工作线程中。

- Ben McCann