您可以安全放置Google跟蹤代碼管理器代碼，在<head>部分有多高？

谷歌標籤管理指導開發商：您可以安全放置Google跟蹤代碼管理器代碼，在<head>部分有多高？

在頁面<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>

來源

2017-09-05 Justin Cloud

谷歌建議儘可能高的原因主要是提高跟蹤的準確性。代碼片段中頁面越高，加載速度越快。將代碼片段放在頁面的下方，可能會漏掉跟蹤在加載之前離開頁面的用戶，或者可能錯誤地報告在加載代碼之前點擊主頁上的鏈接的用戶，作爲該頁面的直接訪問者。

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=...">或簡單<meta charset=...>）任何元標記必須是順序中的第1024個字節的文件的內生效。因此，如果要在文檔中包含字符編碼信息，應該儘早在文件中放置標記，甚至可能在文件之前放置標記。

因此，儘管你可以把立即開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">

來源

2017-09-06 01:25:46

谷歌標籤管理不依賴於任何插件，並在原始的JavaScript運行。爲了防止發生衝突，應該儘可能在<head>標籤中將其放置爲高。

考慮到這是自包含的，並沒有任何衝突，這是完全安全的權放置<head>後，之前的任何<meta>標籤。 Google的搜索算法會讀取整個 DOM，試圖找到您的<meta>標籤，因此它們不需要成爲<head>部分中的第一件事。

在上面的示例中，我建議將您的Google代碼管理器代碼放置在<head>和<meta charset="utf-8">之間（這是我通常將其放置在我自己的網站上的位置）。

除此之外，別忘了noscript equivalent，它允許Google Tag Manager在頁面上禁用JavaScript的情況下運行。這應該直接放在你的<body>標籤後面：

<noscript> 
    <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe> 
</noscript>

希望這有助於！ :)

來源

2017-09-05 23:59:03

您可以安全放置Google跟蹤代碼管理器代碼，在<head>部分有多高？

回答

相關問題