您可以安全地将 Google 跟踪代码管理器代码放在 <head> 部分的多高位置？

Question

Google 跟踪代码管理器指示开发人员：

Paste this code [THE TRACKING CODE] as high in the <head> of the page as possible:

 <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= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-XXXXXXX');</script> 

我的问题是，该代码可以适当放置多高？正确的意思是，根据 HTML 最佳实践，能够在没有 issues/warnings/errors、and/or 的 >95% 的浏览器上运行。

它可以紧跟在开始 <head> 标签之后吗？只要它在 <head> 部分某处就真的很重要吗？

对于 reference/example，下面是 HTML 样板。样板文件中跟踪代码的最佳位置是什么？

<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="manifest" href="site.webmanifest">
        <link rel="apple-touch-icon" href="icon.png">
        <!-- Place favicon.ico in the root directory -->

        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
        <!--[if lte IE 9]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
        <![endif]-->

        <!-- Add your site or application content here -->
        <p>Hello world! This is HTML5 Boilerplate.</p>
        <script src="js/vendor/modernizr-{{MODERNIZR_VERSION}}.min.js"></script>
        <script src="https://code.jquery.com/jquery-{{JQUERY_VERSION}}.min.js" integrity="{{JQUERY_SRI_HASH}}" crossorigin="anonymous"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-{{JQUERY_VERSION}}.min.js"><\/script>')</script>
        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>

        <!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
        <script>
            window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;
            ga('create','UA-XXXXX-Y','auto');ga('send','pageview')
        </script>
        <script src="https://www.google-analytics.com/analytics.js" async defer></script>
    </body>
</html>

Answer 1

Google 标签管理器不依赖于任何插件，运行是原始 JavaScript。为了防止冲突，在<head>标签里尽量放high。

考虑到它是独立的并且没有任何冲突，将它 right 放在 <head> 之后，任何 <meta> 标签之前是完全安全的. Google 的搜索算法将读取整个 DOM 以尝试找到您的 <meta> 标签，因此它们不需要是<head> 部分的第一件事。

在您上面的示例中，我建议将您的 Google 跟踪代码管理器代码放在 <head> 和 <meta charset="utf-8"> 之间（这是我通常将其放在自己网站上的位置）。

除此之外，不要忘记 noscript equivalent，它允许 Google 标签管理器在 JavaScript 在页面上被禁用的情况下运行 .这应该直接放在您的 <body> 标签之后：

<noscript>
  <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>

希望对您有所帮助！ :)

Answer 2

之所以Google建议把它放在尽可能高的位置，主要是为了提高跟踪的准确性。片段在页面中的位置越高，加载速度越快。将代码段放在页面的较低位置，可能会错过跟踪在加载代码之前离开页面的用户。它还可能导致错误地报告在代码加载之前离开主页的网站访问者作为用户导航到的页面的直接访问者。

对于 Google 的 A/B 测试工具 Optimize 也很重要。加快代码段加载速度可确保 Optimize 尽快加载正确版本的页面。

但是，您可能还需要考虑其他因素，如下所述：What are best practices to order elements in <head>?。例如：

...For this reason, HTML5 specifies that any meta tag which is used to specify the character set (either <meta http-equiv="Content-type" content="text/html; charset=..."> or simply <meta charset=...>) must be within the first 1024 bytes of the file in order to take effect. So, if you are going to include character encoding information within your document, you should put the tag early in the file, possibly even before the <title> element.

因此，尽管您可以将跟踪代码段紧跟在开始 head 标记之后，但您可能需要考虑将其放在最重要的 meta 标签。这些标签通常不会花很长时间加载，也不会拖延您的跟踪代码。

但是，是的，出于上述原因，您在 head 中放置跟踪代码的位置确实很重要。因此，如果您要加载许多脚本、样式表等，请将您的标签管理器代码放在更高的位置，而不是将其放在最后。

<!doctype html>
<html class="no-js" lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Tracking Code -->

    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">

您可以安全地将 Google 跟踪代码管理器代码放在 <head> 部分的多高位置？

How high in the <head> section can you safely put the Google Tag Manager code?

javascript

html

google-tag-manager

html5boilerplate