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

【问题标题】：How high in the <head> section can you safely put the Google Tag Manager code?您可以将 Google 跟踪代码管理器代码安全地放在 <head> 部分的多高？
【发布时间】：2018-02-14 07:56:15
【问题描述】：

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

将此代码 [THE TRACKING CODE] 粘贴为 high 到页面的 <head> 尽可能：

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

我的问题是，该代码可以正确放置多高？正确的意思是，能够在超过 95% 的浏览器上运行而不会出现问题/警告/错误，和/或根据 HTML 最佳实践。

它可以在打开的<head> 标签之后吗？只要它在某个地方的<head> 部分，它真的很重要吗？

作为参考/示例，下面是 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>

【问题讨论】：

标签： javascript html google-tag-manager html5boilerplate

【解决方案1】：

Google 跟踪代码管理器不依赖于任何插件，并且以原始 JavaScript 运行。为了防止冲突，在<head>标签中应该尽量放在high。

考虑到它是独立的并且没有任何冲突，将它正确放在<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>

希望这会有所帮助！ :)

【讨论】：

【解决方案2】：

Google 建议将其设置得尽可能高的原因主要是为了提高跟踪的准确性。 sn-p 在页面中的位置越高，加载速度越快。将 sn-p 放在页面下方，可能会错过跟踪在代码加载之前离开页面的用户。它还可能导致错误地报告在代码加载为用户导航到的页面的直接访问者之前离开您的主页的网站访问者。

Google 的 A/B 测试工具 Optimize 也很重要。让 sn-p 加载更快可确保 Optimize 将尽快加载正确版本的页面。

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

...由于这个原因，HTML5 specifies 任何用于指定字符集的元标记（<meta http-equiv="Content-type" content="text/html; charset=..."> 或简单的 <meta charset=...>）必须在文件的前 1024 个字节内，以便生效。因此，如果您要在文档中包含字符编码信息，则应将标记放在文件的开头，甚至可能位于 <title> 元素之前。

因此，尽管您可以将跟踪代码 sn-p 紧跟在开头的 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">

【讨论】：