我应该将 Google Analytics JS 放在 <head> 还是 <body> 的末尾？答案

【问题标题】：Should I put the Google Analytics JS in the <head> or at the end of <body>?我应该将 Google Analytics JS 放在 <head> 还是 <body> 的末尾？
【发布时间】：2011-03-11 13:20:20
【问题描述】：

Google 给了我一段 javascript，并告诉我将其包含在 <head> 中。

我可以把它放在<body> 的末尾吗，否则会产生一些副作用吗？

【问题讨论】：

标签： google-analytics

【解决方案1】：

将其放在<head> 部分的末尾有助于确保即使用户不让页面完成加载，也能跟踪您的指标。

他们曾经告诉您将其放在页面底部，然后再添加对处理页面部分加载的支持。

直接来自 Google：

的主要优点之一异步sn -p就是你可以将其放置在 HTML 的顶部文档。这增加了跟踪信标的可能性将在用户离开前发送这页纸。习惯放置 <head> 部分中的 JavaScript 代码，我们建议将 sn-p 在该部分的底部以获得最佳性能。

请参阅 Google Analytics 帮助：Add the tracking code directly to your site

【讨论】：

那么我把它放在底部就可以了吗？我宁愿通过将所有内容放在底部（并将 css 放在顶部以进行正确渲染）来快速加载页面 - 编辑 - 将 js 放在那里。
是的，这样做没问题；我实际上有一个组合，但由于上述原因，我大多将其放在首位。
为什么这是一个优势？在我看来，我不想计算部分页面加载，因为这些用户基本上是在说他们一开始就犯了一个错误。即使他们确实想在那里，我也不想让他们多等一毫秒才能看到我的内容。
部分页面加载对网站所有者来说也可能意味着他们需要修复的问题。想象一下有人走进你的商店，却发现外面误导了他们进入。你会想去纠正你的广告来解决这个问题。
对此的一个小更新：而不是在<head> 的末尾，链接到的页面现在显示“在每个页面的开始标记之后添加标记。 "

【解决方案2】：

2021 年更新

general help page 现在声明“在您要测量的每个页面上的开始 <head> 标记之后复制并粘贴全局站点标记”。所以他们现在想要它在几乎所有其他东西之前。这可能是由于跟踪脚本的更改造成的。

2020 年更新

Google 目前建议三个不同的位置，这令人沮丧。我没有直接从 Google 找到任何技术理由。

对于 static 网站，general help page 告诉我们将代码 sn-p 放置在“结束 </head> 标记之前”。
对于动态站点（带有由服务器生成的文档），同一个站点说要“紧跟在打开的<body> 标记之后”。
然而，developer site 仍然让我们将它放在“靠近 <head> 标记的顶部，并且在所有网站的任何其他脚本或 CSS 标记之前”。

这些位置大相径庭，对于特定用户而言，最适合的位置可能取决于是否需要收集部分页面加载。可能需要进行一些测试。

【讨论】：

【解决方案3】：

你可以把它放在你想要的任何地方。我总是将跟踪代码放在页面末尾，我从来没有遇到过任何问题。

【讨论】：

您为什么要检测部分加载您的页面并在几毫秒内离开的用户？
@JoãoPimentelFerreira 因为它也是有价值的信息，所以您可能想要衡量观看次数的百分比是多少

【解决方案4】：

您可以将它放在页面上的任何位置，并且可以在页面上的任何位置运行，无论是头部还是正文。但根据 Google 支持 (Add the tracking code directly to your site) 建议将其放在 head 标签中，将其粘贴在结束 </head> 标签之前。

good article 的以下段落解释了为什么将代码放在 head 标签中

仅在加载该代码后才会记录页面浏览量。所以越早加载代码，页面浏览量就越早被记录。让我们假设你有一个很大的博客页面，而且它的加载速度很慢，甚至加载所有内容需要 10 到 20 秒。如果您的 Google 代码没有开始到页面末尾，它可以被阻止，就像旧的一样用于保存其他代码行的非异步代码。除了现在它保留了跟踪代码。如果您网站的访问者点击页面，然后在跟踪代码触发浏览量之前离开它，那么你就会失去那个访客。他们现在成为一个新的直接访问他们登陆的网站的任何页面。这可以使各种您网站上的数据不正确。

【讨论】：

【解决方案5】：

2021 年新增页面加载速度

在 2021 年之前，答案非常直接。一般而言，Google Analytics 在页面加载时尽早运行时会收集最可靠的数据。但有两点需要考虑：

2021 年的许多 GA 实施都使用 Google 跟踪代码管理器，它还会加载其他有时很繁重的脚本。几年前情况并非如此。
Google 引入 Core Web Vitals 和移动优先索引以及它们对 SEO 的重要性意味着 Google Analytics 的准确性不再是放置代码时唯一需要考虑的事情。另一个是页面加载时间。

在某些情况下，当您将 GA 与 GTM 放置在脚本繁重的网站上时，很容易影响页面的加载时间和实施时的 Core Web Vitals。您可以在许多热门网站上的 Google PageSpeed Insights 中看到这种影响——在 2021 年之前，这几乎无关紧要。现在，改变 GTM（和 GA）的位置可以对 PageSpeed Insights 结果产生很大的影响。在 PageSpeed Insights 中查看“移除阻止渲染的 javascript”建议包含 GTM 和 GA 标记的频率。

因此，总而言之，在 2021 年，您甚至会希望将 GA 代码放在正文的末尾。您必须格外小心您的决定，尤其是在使用 GTM 和其他脚本实施时。

【讨论】：

【解决方案6】：

在头部，就在结束 </ head> 标记之前，您在网站管理员工具中验证您的网站不会有任何问题。

【讨论】：

【解决方案7】：

将以下代码（称为“JavaScript tracking sn-p”）添加到您网站的模板是开始使用 analytics.js 的最简单方法。

代码应该添加到标签顶部附近，并且在任何其他脚本或CSS标签之前，字符串'UA-XXXXX-Y'应该替换为属性ID（也称为“跟踪ID”）您希望跟踪的 Google Analytics（分析）媒体资源。

<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

上面的代码主要做了四件事：

创建一个开始从https://www.google-analytics.com/analytics.js异步下载analytics.js JavaScript库的元素
初始化一个全局 ga 函数（称为 ga() 命令队列），让您可以安排在 analytics.js 库加载并准备就绪后运行的命令。
向 ga() 命令队列添加一个命令，为通过“UA-XXXXX-Y”参数指定的属性创建一个新的跟踪器对象。
向 ga() 命令队列添加另一个命令，以将当前页面的综合浏览量发送到 Google Analytics。

【讨论】：

让我们仔细看看，因为称它为“命令队列”已经让位了，太过分了。压缩后的丑化代码接受一些参数，用于解包一些东西，并获取绑定Array.push 函数的句柄。 ga“函数”完全是绑定push。因此，立即调用可以被优化掉：如果没有找到 ([])，而不是构造一个空数组，而是使用每个 ga 调用的“参数”数组填充它：[['create', 'UA-XXX', 'auto'], ['send', 'pageview']] ...
“标签顶部”是什么意思？

【解决方案8】：

应始终将您的代码添加到标签顶部附近以及任何其他脚本或 CSS 标签之前，并且字符串 'UA-XXXXX-Y' 应替换为属性 ID（也称为“跟踪 ID”）您希望跟踪的 Google Analytics（分析）媒体资源。

【讨论】：

这不能回答问题。问题是问不按你说的做会有什么副作用。