Zenn
🐙

コードで書いたイベントが、どうやってGA4のダッシュボードに現れるか

に公開
GA4
Google Analytics
学習ログ
techinput
tech

実装レイヤーの概念図（イベント例つき）

┌───────────────────────────────────────────────────────────────────┐
│                           フロントエンド（ブラウザ内）            │
│  あなたが実装・制御できる範囲                                      │
│                                                                   │
│  [アプリ/UIコード]                                                │
│     - ユーザーが「トマトを追加」ボタン押下 → trackItemAdded(...)   │
│     - ユーザーが「ログイン」 → trackLogin(...)                     │
│     - SPAで「履歴ページへ遷移」 → trackPageView('履歴', '/history')│
│        │  （イベント発火）                                        │
│        ▼                                                          │
│  [トラッキングアダプタ]                                            │
│     - trackEvent(...) にイベント変換                              │
│       例: { action: 'add_item', category: 'shopping_list',        │
│             label: '野菜:トマト' }                                │
│     - trackPageView(...) → { page_title, page_location }          │
│        │                                                          │
│        ▼                                                          │
│  [gtag ラッパ & dataLayer]                                         │
│     - window.gtag('event', ...) または ('config', ...) 呼び出し    │
│     - dataLayer.push([...]) に積む                                │
│        │                                                          │
│        ▼                                                          │
│  [gtag.js 本体 (CDNからロード)]                                    │
│     - dataLayerからイベントを取得                                 │
│     - HTTPSリクエスト作成                                         │
│        │                                                          │
│────────────────────────── ネットワーク境界 ──────────────────────│
│        ▲  HTTPS: https://www.google-analytics.com/g/collect?...   │
└────────┬──────────────────────────────────────────────────────────┘
         │  ここから先はGoogleの管理領域（ブラックボックス）
         ▼
┌───────────────────────────────────────────────────────────────────┐
│                       Google サーバー側（GA4インフラ）            │
│                                                                   │
│  [Collect / Ingestion]                                            │
│     - 'add_item' / 'login' / 'page_view' イベントを受信           │
│     - 計測ID(G-XXXX)でプロパティ紐付け                             │
│        │                                                          │
│        ▼                                                          │
│  [Processing / Aggregation]                                       │
│     - セッション判定（session_start）                              │
│     - engaged_session判定（10秒以上滞在 / 2ページ以上等）          │
│     - アクティブユーザー集計                                      │
│        │                                                          │
│        ▼                                                          │
│  [Storage / Query]                                                 │
│     - 集計データを保存                                            │
│        │                                                          │
│        ▼                                                          │
│  [GA4 UI (Realtime/Reports)]                                      │
│     - Realtime: 数秒〜数十秒で反映（add_item/login/page_view）     │
│     - Reports: 数分〜数十分後に反映                                │
└───────────────────────────────────────────────────────────────────┘

イベントが流れる具体例

  1. add_item

    • 発火元：ユーザーが「トマト追加」ボタンをクリック
    • アプリコード：trackItemAdded('野菜', 'トマト')
    • アダプタ：{action:'add_item', category:'shopping_list', label:'野菜:トマト'}
    • gtag.js：event として送信 → Collect → 集計 → Realtime/Reportsに反映

  2. login

    • 発火元：ログインフォーム送信成功
    • アプリコード：trackLogin('couple_anon_123')
    • アダプタ：{action:'login', category:'authentication', label:'couple_anon_123'}
    • gtag.js：event として送信 → Collect → 集計 → Realtime/Reportsに反映

  3. trackPageView

    • 発火元：SPAルーターで履歴ページに遷移
    • アプリコード：trackPageView('履歴ページ', '/shopping-list/history')
    • アダプタ：gtag('config', G-XXXX, { page_title, page_location })
    • gtag.js：config 呼び出しをPageViewとして送信 → Collect → 集計 → Realtime/Reportsに反映

Discussion