首页 > 编程语言> > javascript – 您可以安全地放置Google跟踪代码管理器代码吗？

javascript – 您可以安全地放置Google跟踪代码管理器代码吗？

2019-06-11 06:19:43 作者：互联网

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

Paste this code [THE TRACKING CODE] as high in the <head> of the page
as possible:

 <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>

解决方法:

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