我应该将 Google Analytics JS 放在 <head> 还是 <body> 的末尾？
Posted
技术标签:
【中文标题】我应该将 Google Analytics JS 放在 <head> 还是 <body> 的末尾？【英文标题】：Should I put the Google Analytics JS in the <head> or at the end of <body>? 【发布时间】：2011-03-11 13:20:20 【问题描述】：Google 给了我一段 javascript，并告诉我将其包含在 <head> 中。
我可以把它放在<body> 的末尾吗，否则会产生一些副作用吗？
【问题讨论】：
【参考方案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（分析）媒体资源。
【讨论】：
这不能回答问题。问题是问不按你说的做会有什么副作用。以上是关于我应该将 Google Analytics JS 放在 <head> 还是 <body> 的末尾？的主要内容，如果未能解决你的问题，请参考以下文章
将 Energize.js 点击绑定到 Google Analytics PhoneGap Build 插件
在 Google Analytics 中使用 Hashtag # 新的 analytics.js 跟踪代码
如何使用 ga.js 而不是 analytics.js 设置 Google Analytics 用户 ID