Contents
イベント構造の比較
GA4 と UA のイベント定義は根本的に異なります。以下の表で主な違いと特徴を確認してください。
| 項目 | Universal Analytics（UA） | Google Analytics 4（GA4） |
|---|---|---|
| 基本構成 | カテゴリ、アクション、ラベル、値（4 要素） | event_name と任意数の parameter（キー＝バリュー） |
| パラメータ管理 | カスタムディメンション/指標は別途設定が必要 | 自動収集パラメータと手動追加パラメータを同一イベント内で扱える |
| 推奨テンプレート | なし（全てカスタム実装） | Google が事前定義した Recommended Events が利用可能 |
| データモデル | セッションベース | イベントベース（ユーザー中心） |
推奨イベントの活用メリット
Google が提供する推奨イベントは、名前・必須パラメータがあらかじめ定義されているため、レポート作成や機械学習インサイトの精度向上に寄与します。代表的な例として purchase（購入）や sign_up（会員登録）があります。
GA4 管理画面でカスタムイベントを作成する手順
GA4 の UI だけでも基本的なカスタムイベントは実装できます。本セクションでは、管理画面から「名前」「条件」「自動収集パラメータ」を設定する具体的な流れと、必要に応じてカスタムディメンション／指標を定義する方法を解説します。
カスタムイベント作成の全体フロー
まずは GA4 の管理画面で実際に操作する手順を概観します。以下の流れを順番に進めることで、リアルタイムレポートに即座に反映されるカスタムイベントが完成します。
- プロパティ設定 → イベント に移動
- 「イベントを作成」ボタンで新規イベントを登録
- 必要項目（名前・条件）と自動収集パラメータを入力
- カスタムディメンション／指標を同時に定義（任意）
- 保存後、リアルタイムレポートで送信結果を確認
名前・条件設定と自動収集パラメータの指定方法
イベント名はスネークケースが推奨されます。条件式は event_name と既存パラメータ（例：click、link_text）を組み合わせて記述します。
| 項目 | 設定例 |
|---|---|
| イベント名 | cta_click |
| 条件 | event_name が自動収集された click かつ link_text が「お問い合わせ」 |
| 自動収集パラメータの追加 | page_location, page_title はデフォルトで付与。独自パラメータ例：button_id（{{Click ID}}） |
カスタムディメンション／指標の定義手順
カスタムディメンションはレポートでイベントパラメータを軸に分析できる重要な機能です。
- 左側メニューから 「カスタム 定義」 を選択
- 「カスタム ディメンション」または「カスタム 指標」を新規作成
- 名前（例：
Button ID）とスコープ（イベント）を設定し、先ほどのパラメータキーbutton_idと紐付ける - 保存後、探索レポートや標準レポートで使用可能になる
Google Tag Manager で基本タグ・トリガーを構築する方法
GTM を利用すると、ページ上の細かい操作（クリック、フォーム送信、スクロールなど）も柔軟に計測できます。本セクションでは、コンテナ作成から各種トリガー設定、データ層プッシュまでを順番に解説し、実装時の注意点も併せて紹介します。
コンテナ作成とスニペット設置
GTM の管理画面で 「新規コンテナ」 を作成した後は、gtag.js のスニペットを手動でページに埋め込む必要があります。自動的に挿入されることはなく、以下のコードを <head> と </body> 閉じタグ直前にそれぞれ貼り付けます。
|
1 2 3 4 5 6 7 |
<!-- Head 内 --> <script async src="https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXX"></script> <!-- Body の開始直後 --> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> |
ポイント：スニペットを正しく設置しないと、以降のタグやトリガーは一切発火しません。実装後はブラウザのデベロッパーツールで
dataLayerが存在するか必ず確認しましょう。
クリックトリガーの設定
クリック計測は「すべてのクリック変数」を有効化した上で、目的に合わせたフィルタを作成します。以下は典型的な設定例です。
- 変数 → 「クリック ID」「クリッククラス」「クリックテキスト」など全て有効化
- トリガー → 新規作成 → タイプは「クリック – 全要素」または「リンクのみ」
- 条件例：
Click Textが「申し込む」かつPage URLに/contact/を含む場合に発火
フォーム送信トリガーの設定
フォーム送信はユーザーが入力完了した瞬間を捉える重要なイベントです。
- 変数 → 「Form ID」「Form Classes」等を有効化
- トリガー → 新規作成 → タイプは「フォーム送信」
- 条件例：
Form IDがcontact_formのときだけ発火させます
データ層プッシュの実装
カスタム情報（商品IDやボタンテキストなど）を GA4 に渡す際は、window.dataLayer.push() を利用します。以下はシンプルな例です。
|
1 2 3 4 5 6 7 8 9 10 11 |
<button id="cta-primary" data-product-id="12345">購入</button> <script> document.getElementById('cta-primary').addEventListener('click', function () { window.dataLayer.push({ event: 'custom_cta_click', product_id: this.dataset.productId, button_text: this.innerText }); }); </script> |
この event 名は GTM の カスタムイベントトリガー で捕捉し、GA4 タグに渡すことで計測が完了します。
スクロール深度計測の改善実装
標準の GA4 自動スクロール計測は「25 %・50 %・75 %」を一度だけ送信しますが、カスタムスクリプトで同様に実装すると 重複送信 が起きやすくなります。以下のコードは各閾値ごとに 1 回だけ データ層へプッシュする安全策です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<script> (function () { const thresholds = [25, 50, 75]; const sent = new Set(); // 送信済み閾値を管理 function getDepth() { return Math.round((window.scrollY + window.innerHeight) / document.body.scrollHeight * 100); } function maybePush() { const depth = getDepth(); thresholds.forEach(t => { if (depth >= t && !sent.has(t)) { window.dataLayer.push({ event: 'custom_scroll', depth_percent: t }); sent.add(t); // 同じ閾値は二度送らない } }); } window.addEventListener('scroll', maybePush); })(); </script> |
ポイント：
Setオブジェクトで既に送信した閾値を管理することで、スクロールごとに重複dataLayer.push()が走るリスクを排除します。
GTM でカスタムイベントを GA4 に送信する実装と検証フロー
タグ設定が完了したら、正しくデータが GA4 に届いているかを確認する工程が欠かせません。本セクションではパラメータマッピング手順と、DebugView・リアルタイムレポートでの検証方法、さらによくある失敗例とその対策をまとめます。
タグ設定・パラメータマッピング
GA4 のイベントタグでは 「event_name」 と任意のキー/バリュー形式のパラメータを明示的に紐付けます。以下は代表的なマッピング例です。
| GA4 パラメータ | GTM 変数例 | 備考 |
|---|---|---|
event_name |
固定文字列（例：cta_click） |
必須 |
button_id |
{{Click ID}} |
カスタムパラメータ |
page_path |
{{Page Path}} |
自動収集でも上書き可 |
product_id |
{{DL – product_id}} |
データ層変数 |
マッピング手順
- タグ作成画面で 「Google Analytics: GA4 イベント」 を選択
- 測定 ID（例：
G-XXXXXXXXXX）を入力 - 「イベント名」に固定文字列または変数を設定
- 「パラメータを追加」 ボタンでキーと対応する GTM 変数を選ぶ
- 必要に応じて定数やカスタム JavaScript 変数で加工
注意点：同一イベント内で同名キーを複数回設定しないこと。すべて小文字・スネークケースで統一すると、後続の分析や探索が楽になります。
DebugView とリアルタイムレポートでの確認方法
1. GTM プレビューモードでタグ発火をチェック
- ブラウザで対象ページを開き、プレビューコンソールに 「タグが発火」 と表示されているか確認。
- コンソール上部に
gtagの送信リクエストが出力されることも併せて確認します。
2. GA4 DebugView でイベントストリームをリアルタイム監視
- GA4 左メニュー → 「DebugView」 に遷移
- プレビューモード中のデバイス名が表示され、送信されたイベントとパラメータが時系列で確認できる
- 期待した
event_nameと各パラメータ（例：button_id: btn-primary）が揃っているかチェック
3. リアルタイムレポートでの最終検証
- 「リアルタイム」 → 「イベント」タブを開き、実装したカスタムイベントがカウントに反映されていることを確認
- 数分以内に表示されない場合は、タグのトリガー条件やデータ層プッシュのタイミングを再度見直す
よくある失敗例と対処法
| 失敗ケース | 原因 | 解決策 |
|---|---|---|
| イベント名に大文字・スペースが混在 | GA4 がスネークケース推奨で統一されていない | 名前を小文字＋アンダースコア（例：cta_click）に変更 |
| パラメータが送信されない | データ層変数の取得タイミングが push 後になっている |
GTM の「データレイヤー変数」設定で 遅延評価 を有効化 |
同一閾値で複数回 dataLayer.push() が走る |
スクロールスクリプトにフラグ管理がない | 前述の Set 方式で送信済みを記録 |
実装例・チェックリスト・プライバシー対応
実務ですぐに使えるコードサンプルと、導入後に確認すべき項目を一覧化しました。また、GDPR／CCPA に準拠したプライバシー対策も併せて解説します。
CTA ボタンクリック計測例
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<button id="cta-download" class="btn-primary">資料ダウンロード</button> <script> document.getElementById('cta-download').addEventListener('click', function () { window.dataLayer.push({ event: 'custom_cta_click', button_id: this.id, button_text: this.innerText }); }); </script> |
GTM 設定ポイント
- トリガー：カスタムイベント
custom_cta_click（タイプ＝「カスタムイベント」） - タグ：GA4 イベント
- Event Name：
cta_download - パラメータ：
button_id ← {{DL – button_id}},button_text ← {{DL – button_text}}
問い合わせフォーム送信計測例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<form id="contact-form" action="/send" method="post"> <input type="email" name="email" required> <textarea name="message"></textarea> <button type="submit">送信</button> </form> <script> document.getElementById('contact-form').addEventListener('submit', function (e) { window.dataLayer.push({ event: 'custom_form_submit', form_id: this.id, page_path: location.pathname }); }); </script> |
GTM 設定ポイント
- トリガー：カスタムイベント
custom_form_submit - タグ：GA4 イベント
- Event Name：
form_submit - パラメータ：
form_id ← {{DL – form_id}},page_path ← {{DL – page_path}}
スクロール深度計測例（改善版）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<script> (function () { const thresholds = [25, 50, 75]; const sent = new Set(); function depth() { return Math.round((window.scrollY + window.innerHeight) / document.body.scrollHeight * 100); } function handleScroll() { const d = depth(); thresholds.forEach(t => { if (d >= t && !sent.has(t)) { window.dataLayer.push({ event: 'custom_scroll', depth_percent: t }); sent.add(t); } }); } window.addEventListener('scroll', handleScroll); })(); </script> |
GTM 設定ポイント
- トリガー：カスタムイベント
custom_scroll、フィルタでdepth_percentが 25, 50, 75 のいずれかにマッチ - タグ：GA4 イベント
- Event Name：
scroll_depth - パラメータ：
depth_percent ← {{DL – depth_percent}}
実装チェックリスト
| No. | 確認項目 | 方法・ポイント |
|---|---|---|
| 1 | GTM コンテナが正しくページに埋め込まれているか | <head> と </body> 前のスニペットを検証 |
| 2 | イベント名とパラメータが命名規則（小文字・スネークケース）に沿っているか | タグ設定画面で確認、統一性を保つ |
| 3 | 自動収集パラメータ（page_location 等）が送信されているか |
DebugView の「Parameters」欄でチェック |
| 4 | カスタムディメンション／指標が GA4 に登録済みか | 「カスタム定義」→一覧確認 |
| 5 | データ層変数名と GTM 変数が一致しているか | GTM の「変数」設定画面で照合 |
| 6 | ユーザー同意取得後にのみイベントが送信されるか | gtag('consent', 'update', …) の実装有無を確認 |
| 7 | テスト環境と本番環境で測定 ID が正しいか | タグ設定の「測定 ID」を比較 |
| 8 | リアルタイムレポートにイベントが表示されるか | GA4 → 「リアルタイム」→対象イベント確認 |
プライバシー対応時の注意点
コンセント管理
- GDPR／CCPA に準拠する場合、ユーザーが同意した後でのみ
gtag('consent', 'update', {...})を呼び出し、データ収集を有効化します。 - GTM では「同意プラグイン」やカスタム JavaScript 変数で同意ステータスを管理し、トリガーの 「同意が付与されたとき」 条件を追加できます。
IP アノニマイズ
- GA4 のプロパティ設定でデフォルト有効ですが、念のため以下コードも併記しておくと安心です。
|
1 2 |
gtag('config', 'G-XXXXXXXXXX', { anonymize_ip: true }); |
パラメータの最小化
- 個人情報（例：メールアドレス）をそのままイベントパラメータとして送信しないこと。必要な場合はサーバー側でハッシュ化するか、「非識別化」 した形で送ります。
全体まとめ
本稿では GA4 と旧 UA のイベント概念の違いから、管理画面・GTM を用いたカスタムイベント実装手順、検証フロー、さらに実務で即活用できるコードサンプルとチェックリスト、プライバシー対応までを網羅的に解説しました。ポイントは以下の通りです。
- GA4 は「名前＋パラメータ」モデル であり、推奨イベント活用が効率化の鍵。
- GTM のコンテナ作成後は手動でスニペットを埋め込む 必要があることを忘れずに。
- スクロール深度計測はフラグ管理で重複送信を防止 し、データの正確性を保つ。
- タグ設定とパラメータマッピングは一貫した命名規則で統一 すると分析が楽になる。
- DebugView とリアルタイムレポートで即時検証 を徹底し、実装ミスを早期に発見する。
- チェックリストとプライバシー対策を導入前後に必ず実施 すれば、法令遵守と品質確保が同時に達成できます。
これらのベストプラクティスを踏まえて設定を進めれば、GA4 と GTM を組み合わせた高度な計測基盤を安定的に運用できるでしょう。ぜひ本稿をリファレンスとして活用し、効果的なデジタル解析環境を構築してください。