我应该把Google Analytics JS放在<head>标签里还是放在<body>标签的末尾？

Question

我应该把Google Analytics JS放在<head>标签里还是放在<body>标签的末尾？

google-analytics

141

谷歌给我一段JavaScript代码，并告诉我将其包含在<head>中。

如果我将它放置在<body>的末尾，是否会产生副作用？

- user34537

8个回答

15

2022年更新

通用帮助页面现在指出：“在要测量的每个页面的开头<head>标签后复制并粘贴全局站点标记。” 因此，他们现在希望它出现在几乎所有其他内容之前。这可能是由于跟踪脚本的更改。

2020年更新

Google目前建议使用三个不同的位置，这很让人沮丧。我还没有直接从Google那里找到任何技术上的理由。

对于静态网站，通用帮助页面告诉我们将代码片段放置在“关闭</head>标记之前”。
对于（由服务器生成文档的）动态网站，相同的网站说将其放置在“打开<body>标记后立即”。
然而，开发人员网站仍然要求我们将其放置在所有网站的“<head>标记靠近顶部并在任何其他脚本或CSS标记之前”。

这些位置存在相当大的差异，对于特定用户而言最佳选择可能取决于是否需要收集部分页面加载。可能需要进行一些测试。

- isherwood

6

您可以将其放置在页面上任何位置，并且无论它在或中都可以运行。但是根据谷歌支持（来自直接在您的网站上添加跟踪代码）建议在标记中放置它，紧接着结束标签之前粘贴它。 以下段落来自一篇很好的文章，解释了为什么要将代码放在标记中:

只有在加载该代码后才记录页面浏览量。因此，加载代码的时间越早，记录页面浏览量的时间就越早。假设您有一个大博客页面，加载速度比较慢，需要10到20秒才能加载完所有内容。如果您的Google代码直到页面结束才开始加载，那么它会受阻，就像旧的非异步代码曾经阻塞其他代码行一样。现在，它正在阻塞跟踪代码。如果访问者访问了您的网站，然后在跟踪代码触发页面浏览事件之前离开，则您将失去该访问者。他们现在成为了网站上任意页面的新直接访问者。这可能会导致您网站上各种数据不准确。

- Subodh Ghulaxe

6

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

- casablanca

3

为什么要检测那些只在页面部分加载后毫秒级离开的用户？ - João Pimentel Ferreira

2

@JoãoPimentelFerreira 因为这是有价值的信息，你可能想要测量观看量的百分比。 - jangorecki

5

关于页面加载速度的2021年修改

在2021年之前，答案非常明显：一般来说，当页面加载时尽早运行Google Analytics可以收集到最可靠的数据。但需要考虑两件事情：

许多GA的2021年实现使用Google Tag Manager，它也会加载其他有时很重的脚本。几年前并非如此。
Google引入了核心Web性能指标和移动优先索引，并且在SEO方面具有重要意义，这意味着放置代码时不仅需要考虑Google Analytics的准确性，还需要考虑页面加载时间。

在一些情况下，当您在脚本较重的网站上使用GTM放置GA时，容易影响页面加载时间和Core Web Vitals。您可以在许多受欢迎的网站上在Google PageSpeed Insights中看到这种影响-在2021年之前，这几乎没有关系。现在，更改GTM（以及其中的GA）的位置可能会对PageSpeed Insights结果产生重大影响。请参见PageSpeed Insights中“删除阻止呈现JavaScript”的建议中有多少包含GTM和GA标签。

因此，总之，在2021年甚至存在将GA代码放置在body的末尾的情况。您必须特别小心在使用GTM和其他脚本进行实现时作出决定。

- Mateusz Kozłowski

1

在 </head> 结束标签之前，您不会遇到任何问题来验证您的网站在 Webmaster 工具中。

- Sezhers

-1

将以下代码（称为“JavaScript跟踪片段”）添加到您网站的模板中是使用analytics.js的最简单方法。

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

<!-- 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。

- Mile Mijatović

让我们仔细看一下，因为称它为“命令队列”实在是过于高估了它。这个压缩丑化的代码接受一些参数，用它们来解包一些东西，并获取一个绑定的Array.push函数的句柄。ga“函数”完全是那个绑定的push。因此，可以优化掉立即调用：不要构造一个空数组（[]）如果没有找到，而是用每个ga调用的“arguments”数组填充它：[['create', 'UA-XXX', 'auto'], ['send', 'pageview']]... - amcgregor

“顶部标签”的意思是什么？ - isherwood

-3

应该始终将代码添加到 <head> 标签的顶部和任何其他脚本或 CSS 标签之前，字符串 'UA-XXXXX-Y' 应替换为您希望跟踪的 Google Analytics 属性的属性 ID（也称为“跟踪 ID”）。

- Payal Daryani

3

这并没有回答问题。问题是在问，如果不按你说的去做，会有什么副作用。 - Peter Hall

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Chris Arguin · Accepted Answer

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

在支持处理部分加载页面之前，他们曾经告诉你将其放在页面底部。

直接来自 Google：

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

请参阅 Google Analytics 帮助：将跟踪代码直接添加到您的网站上