Google Tag Manager（GTM）の公式推奨実装方法

開発

WordPressサイトに、Google Tag Manager（GTM）の計測コードを実装しました。

公式推奨の実装方法を採用し、JavaScriptの有効・無効の両方で計測できるようにしました。

実装の目的

あるページでGA計測が反映されていないという指摘を受け、他のページと同様にGTMで計測できるようにするため、公式推奨の実装方法を適用しました。

実装の構成

1. GTMスクリプト版の実装

<head>タグ内に、GTMのJavaScriptスクリプトを追加します。JavaScriptが有効な環境で動作します。

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

実装位置：
  • <head>タグ内
  • wp_head();の直前が推奨

2. noscript版の実装

<body>タグの直後に、noscript版のGTMタグを追加します。JavaScriptが無効な環境でも計測を試みます。

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX" height="0" width="0"
        style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

実装位置：

  • <body>タグの直後
  • ページコンテンツの前に配置

3. 2つのタグの役割分担

  • GTMスクリプト版: JavaScript有効時に動作（フル機能で計測）
  • noscript版: JavaScript無効時に動作（基本計測のみ）

両方を実装することで、JavaScriptの有効・無効に関わらず計測できます。

4. 実装の確認方法

ブラウザの開発者ツールで以下を確認できます。

方法1: dataLayerの確認

// コンソールで実行
window.dataLayer

方法2: Networkタブの確認

  • gtm.js?id=GTM-XXXXXXXが読み込まれているか
  • ステータスが200（成功）か

方法3: Google Tag AssistantChrome拡張機能「Tag Assistant Legacy」でタグの検出とエラーを確認できます。

5. WordPressテンプレートへの実装

完全に独立したHTMLテンプレート（page-contact-complete.php）の場合、以下のように直接実装します。

<head>
    <!-- メタタグなど -->
    <link rel="stylesheet" href="/css/style.css">
    
    <!-- Google Tag Manager -->
    <script>
    (function(w, d, s, l, i) {
        // ... GTMスクリプト ...
    })(window, document, 'script', 'dataLayer', 'GTM-XXXXXXX');
    </script>
    <!-- End Google Tag Manager -->
    
    <?php wp_head(); ?>
</head>

<body>
    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX" height="0" width="0"
            style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->
    
    <div class="page-wrapper">
        <!-- ページコンテンツ -->
    </div>
</body>

実装で気をつけたポイント

  • 公式推奨の実装方法を採用: Google Tag Managerの公式ドキュメントに記載されている標準実装を使用
  • 2つのタグを必ず実装: スクリプト版とnoscript版の両方を実装することで、幅広い環境で計測可能
  • 実装位置の遵守: <head>内と<body>直後の指定位置に配置
  • GTM IDの統一: 他のページと同じGTM ID（GTM-XXXXXXX）を使用
  • テスト環境での確認: 本番反映前に開発者ツールで動作確認

今後の改善点

  • GTMプレビューモードでの詳細確認: 実際のタグ発火状況を確認
  • カスタムイベントの追加: お問い合わせ完了などのコンバージョンイベントを設定
  • 他のテンプレートへの展開: 同様の独立テンプレートがあれば、同じ方法で実装

基本的な実装は完了し、テスト環境で正常に動作することを確認しました。本番環境でも同様に動作する見込みです。

記事一覧に戻る