Question

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

将此代码[跟踪代码]粘贴为页面<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>

Answer 1

Google建议将其尽可能高的原因主要是为了提高跟踪准确性。代码段中的页面越高，加载的速度就越快。将代码段放在页面下方，可能会错过跟踪在加载页面之前离开页面的用户，或者可能会错误地报告在加载代码之前单击主页上链接的用户，作为该页面的直接访问者。

Google的A / B测试工具Optimize也很重要。更快地加载代码段确保Optimize将尽快加载用户应该看到的正确版本的页面。

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

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

因此，虽然您可以将其置于开始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">

Answer 2

Google跟踪代码管理器并非依赖于任何插件，而是以原始JavaScript运行。为了防止冲突，应在<head>标记中将其设置为高。

考虑到它是自包含且没有任何冲突，在<head>之后，在<meta>之前放置正确是完全安全的{ {1}}标签。 Google的搜索算法将会读取整个 DOM，以尝试找到您的<meta>代码，因此他们不需要成为{{1}中的第一个内容}。section。

在上面的示例中，我建议您将Google跟踪代码管理器代码放在<head>和<head>之间（我通常将其放在我自己的网站上）。

除此之外，请不要忘记noscript equivalent，它允许Google跟踪代码管理器在页面上禁用JavaScript的情况下运行。这应该直接放在<meta charset="utf-8">标记之后：

<body>

希望这有帮助！：）

您可以安全地使用Google跟踪代码管理器代码在该部分中有多高？

2 个答案: