Jus*_*oud 13 html javascript html5boilerplate google-tag-manager
Google跟踪代码管理器指示开发人员:
粘贴此代码[跟踪代码]作为高在
<head>页面尽可能的:
<!-- 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>
Cha*_*a G 13
Google建议尽可能高的原因主要是为了提高跟踪的准确性.代码段中的页面越高,加载的速度就越快.将代码段放在页面下方可能会错过跟踪在加载页面之前离开页面的用户,或者可能会错误地报告在加载代码之前单击主页上链接的用户,作为该页面的直接访问者.
对于谷歌的A/B测试工具Optimize也很重要.更快地加载代码段确保Optimize将尽快加载用户应该看到的正确版本的页面.
但是,您可能还需要考虑其他因素,如下所述: 在<head>中订购元素的最佳做法是什么？.例如:
...因此,HTML5指定用于指定字符集(
<meta http-equiv="Content-type" content="text/html; charset=..."或者简单地<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">