logo标签列表

你可以安全地将Google Tag Manager代码放置在<head>部分的多高位置？

javascripthtmlgoogle-tag-managerhtml5boilerplate
16

谷歌标签管理器指导开发者:

将此代码 [THE TRACKING CODE] 置于页面的 <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>
2个回答
19
谷歌建议将其尽可能放在页面的顶部，主要是为了提高跟踪的准确性。页面中代码片段越靠上，加载速度就越快。将代码片段放置在页面较低位置可能会错过那些在代码加载前离开您的页面的用户的跟踪。这也可能导致错误地将从您的主页导航到加载代码之前的页面的站点访问者报告为直接访问者。
对于谷歌的A/B测试工具Optimize而言，代码片段快速加载非常重要，可以确保Optimize尽快加载正确版本的页面。
然而，还有其他因素需要考虑，如此处所述：什么是head元素中最佳实践？。例如：

...因此，HTML5规定，用于指定字符集的任何meta标签（包括<meta http-equiv="Content-type" content="text/html; charset=...">或简单的<meta charset=...>）必须在文件的前1024个字节内才能生效。因此，如果您要在文档中包含字符编码信息，则应在文件早期放置该标记，甚至可能在元素之前。</p> </blockquote> 因此，尽管您<strong>可以</strong>在打开的<code>head</code>标签后立即放置跟踪代码片段，但您可能希望考虑将其放置在最重要的<code>meta</code>标签之后。这些标签通常加载速度很快，不会延迟跟踪代码的加载。</p> <p>但是，由于上述原因，确实需要注意在<code>head</code>中放置跟踪代码的位置。因此，如果您将加载许多脚本、样式表等，则应将标记管理器代码放置得更高，而不仅仅是放在末尾。</p> <pre class="guess-HTML"><code><!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"> </code></pre>

1

Google标签管理器不依赖于任何插件，并在原始JavaScript中运行。为了防止冲突，应该将其放置在<head>标记的尽可能高的位置。

考虑到它是自包含的并且没有冲突，因此完全可以将其放置在<head>之后，在任何<meta>标记之前。 Google的搜索算法将读取整个DOM以尝试查找您的<meta>标记，因此它们不需要成为<head>部分中的第一要素。

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

除此之外，不要忘记无脚本等效，它允许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>

希望这有所帮助！ :)
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接