Google 跟踪代码管理器指示开发人员:
Paste this code [THE TRACKING CODE] as high in the
<head>of the page as possible:
<!-- Google Tag Manager --> <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> <!-- End Google Tag Manager -->
我的问题是，该代码可以适当放置多高？正确的意思是，能够在 >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>
最佳答案
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">
关于javascript - 您可以安全地将 Google 跟踪代码管理器代码放在 <head> 部分的多高位置？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46064817/