标签：javascript html google-tag-manager html5boilerplate
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建议尽可能高的原因主要是为了提高跟踪的准确性.代码段中的页面越高,加载的速度就越快.将代码段放在页面下方,可能会错过跟踪在加载页面之前离开页面的用户,或者可能会错误地报告在加载代码之前单击主页上链接的用户,作为该页面的直接访问者.
对于谷歌的A / B测试工具Optimize也很重要.更快地加载代码段确保Optimize将尽快加载用户应该看到的正确版本的页面.
但是,您可能还需要考虑其他因素,如下所述：What are best practices to order elements in <head>?.例如：
…For this reason, 07001 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.
因此,尽管您可以将其放在开头标记之后,但您可能需要考虑将其放在最重要的元标记之后.这些代码通常不需要很长时间才能加载,并且不会过多地阻止您的跟踪代码.
但是,由于上面提到的原因,你把跟踪代码放在头部的位置确实很重要,所以如果你要加载许多脚本,样式表等,那么把它放得更高,而不是只是把它放在最后.
<!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,html,google-tag-manager,html5boilerplate 来源： https://codeday.me/bug/20190611/1216941.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。