web-dev-qa-db-ja.com

<head>セクションのどのくらいの高さにGoogleタグマネージャーコードを安全に配置できますか？

Googleタグマネージャは開発者に次のように指示します。

このコード[追跡コード]をページの_<head>_にhighとしてできるだけ貼り付けます。

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

私の質問は、そのコードを適切に配置できる高さはどれくらいかということです。適切な意味で、問題/警告/エラーなしで、および/またはHTMLのベストプラクティスに従って、95％を超えるブラウザで機能できます。

_<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>
_
javascripthtmlgoogle-tag-managerhtml5boilerplate
13
Justin Cloud

Googleがそれをできるだけ高くすることを推奨する理由は、主に追跡の精度を改善するためです。スニペットがページの上位にあるほど、読み込みが速くなります。スニペットをページの下部に配置すると、ページが読み込まれる前にページを離れたユーザーの追跡を見逃したり、コードが読み込まれる前にホームページのリンクをクリックしたユーザーをそのページへの直接の訪問者として誤って報告したりする可能性があります。

また、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">
10
Chava G

Googleタグマネージャはプラグインに依存せず、生のJavaScriptで実行されます。競合を防ぐために、<head>タグにできるだけhighとして配置する必要があります。

自己完結型であり、競合がないことを考えると、<head>の後、<meta>タグの前にright配置しても完全に安全です。 Googleの検索アルゴリズムは、<meta>タグを見つけようとして全体DOMを読み取るため、<head>セクションの最初のものである必要はありません。 。

上記の例では、Googleタグマネージャーのコードを<head>と<meta charset="utf-8">の間に配置することをお勧めします（これは通常、自分のサイトに配置する場所です）。

これに加えて、 noscript相当 を忘れないでください。これにより、JavaScriptの場合にGoogleタグマネージャーを実行できます。ページで無効になっています。これは、<body>タグの直後に配置する必要があります。

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

お役に立てれば！ :)

1
Obsidian Age