【徹底解説】GTMでプレビュー成功なのにGA4にイベントが反映されない原因と解決策

PC・業務ツール
この記事は約10分で読めます。
【徹底解説】GTMでプレビュー成功なのにGA4にイベントが反映されない原因と解決策

GTMのイベントタグが発火しない?プレビュー成功なのにGA4に反映されない時の原因と解決策

【現象】 GTM(Google タグマネージャー)のプレビューモードでは Tags Fired(発火成功)と表示されるのに、GA4側にデータが反映されない…
この場合、「GTMからの送信は成功しているが、GA4側で受信できていない、あるいはレポートの表示待ち」である可能性が高いです。本記事では、主な原因と解決策、正しく動くHTML/JavaScriptの実装例を詳しく解説します。

🔍 主な原因と解決策のチェックリスト

1. GTMコンテナが「公開(Submit)」されていない

プレビューモードで動作するのは「管理者自身のブラウザ上でのみ」です。本番環境(一般アクセス)で発火させるには、GTMで「送信」>「公開」を行う必要があります。

2. GA4「測定ID」の指定ミス

GA4の測定ID(G-XXXXXXXXXX)が正しく設定されているか見直しましょう。

  • 全角英数字が紛れ込んでいないか
  • コピペ時に末尾や先頭に不要なスペースが入っていないか
  • 誤って旧UAのID(UA-XXXXX-Y)を設定していないか
3. GA4の「データ反映の遅れ」または「内部フィルタ」

【データの遅れ】 GA4の通常レポートに反映されるまで24〜48時間かかります。直後のテストは、GA4の「DebugView」または「リアルタイム」で確認してください。

【内部トラフィックフィルタ】 社内IPアドレスの除外フィルタを設定している場合、自身のアクセスが記録されません。

💻 HTML・dataLayerのよくあるミスと正しいコード例

カスタムイベントを飛ばすために dataLayer.push をHTML側に記述している場合、構文エラーや実行タイミングの不備でGA4に送信されないことがあります。

❌ よくあるNG例(HTML側)

NG CODE
<!-- NG例1: GTMスニペットより前にdataLayerを呼び出している / 初期化されていない -->
<script>
  dataLayer.push({'event': 'button_click'}); // window.dataLayerが初期化されておらずエラー
</script>

<!-- NG例2: イベント名にハイフンや予約語を使っている -->
<script>
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    'event': 'user-click', // GA4ではハイフン非推奨(アンダースコア user_click が推奨)
    'click_category': 'banner'
  });
</script>

⭕️ 正しいHTML / JavaScriptの実装例

HTML内のボタンをクリックした際に、GTM経由でGA4へイベントを正しく送るサンプルコードです。

RECOMMENDED CODE
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>GTM GA4 イベントテスト</title>

  <!-- 1. GTMの基本コード(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>
  <!-- End Google Tag Manager -->
</head>
<body>

  <h1>お問い合わせページ</h1>

  <!-- 2. イベントを発火させるボタン要素 -->
  <button id="submit-btn" onclick="sendCustomEvent()">送信する</button>

  <!-- 3. dataLayer.push の正解コード -->
  <script>
    // window.dataLayer を安全に初期化
    window.dataLayer = window.dataLayer || [];

    function sendCustomEvent() {
      // GTMにイベントデータを送る
      window.dataLayer.push({
        'event': 'custom_form_submit', // 推奨:スネークケース(小文字+アンダースコア)
        'form_name': 'contact_main',   // パラメータ名
        'user_type': 'lead'
      });
      console.log('dataLayer push 成功');
    }
  </script>

</body>
</html>

🛠️ トラブルシューティング手順

  1. ブラウザ拡張機能(AdBlock等)の無効化
    広告ブロッカー(uBlock Origin等)やプライバシー保護拡張機能が有効だと、GA4への通信(google-analytics.com/g/collect)がブロックされます。シークレットウィンドウ+拡張機能OFFでテストしてください。
  2. GA4「DebugView」での確認
    GTMプレビューを開いた状態で、GA4管理画面の「データ表示」>「DebugView」を開きます。リアルタイムでイベントログが届いているか確認します。
  3. Google Analytics Debugger(Chrome拡張機能)の導入
    デベロッパーツールのConsoleタブで、GA4へ送信されたリクエストのステータスコード(200 OK)を確認します。
💡 まとめ: プレビューで成功している場合、トリガー設定自体は合っています。「GTM未公開」「測定IDミス」「AdBlock」「GA4反映待ち」を順番に確認していきましょう!

コメント

Back to top
タイトルとURLをコピーしました