GA4におけるDebugViewの確認方法

検証を行う為にスクリプトタグを確認

管理
データストリーム
表示されたデータをクリック
Google タグの「タグ設定を行う」をクリック
実装手順
手動でインストールする
スクリプトを確認する

ChromeのExtensionをインストール&有効化

ソースコード

'debug_mode':true を追加して値を投げる

ログが飛んだ参考

gtag('event', 'page_view', {
  'page_location': JSON.stringify({
    'path': '/test',
    'hostname': 'example.com',
    'query': 'q=1',
    'title': 'test',
    'url': 'https://example.com/test?q=1'
  }),
  'page_title': 'page_title',
  'page_nummmmm': 1,
  'debug_mode':true // これが重要
});

確認方法

管理 → DebugViewで確認

フロントエンドえんじにゃー 2023/03/07に更新

わからないがわからないメモ

GA4のイベント種別一覧

自動収集イベント
- イベント名が決まっている
- 実装が不要（ただし、一部のイベントの表示・非表示は手動で行う必要あり）
- 計測停止は出来ない
- 具体的なイベント名：page_view, first_visit, session_start etc
測定機能の強化イベント
- イベント名が決まっている
- 実装が不要
- 必要なものだけ計測
- 具体的なイベント名：scroll, click etc
推奨イベント
- イベント名が決まっている
- 実装が必要（管理画面やGTMで設定）
- 具体的なイベント名： join_group、login、purchase、search、sign_up
カスタムイベント
- 必要なものをゼロから作る
- 実装が必要（管理画面やGTMで設定）
- 必要に応じて任意の名前で各自設定する

自動収集イベント

以下のリンクにまとまってる

click（ユーザーが現在のドメインから移動するリンクをクリックするたび）
file_download（ファイルリンクのクリック）
form_start（フォームに初めてアクセスしたとき）
form_submit（ユーザーがフォームを送信したとき）
page_view（ページが読み込まれるたび、または閲覧ステータスが変更される度）
scroll（ページの最下部まで初めてスクロールしたとき）
video_complete（動画が終了したとき）
video_progress（動画が再生時間の 10%、25%、50%、75% 以降まで進んだとき）
video_start（動画の再生が開始されたとき）
view_search_results（サイト内検索を行う度に記録、URLクエリパラメータが含まれているかどうか）

デフォルトで利用できるイベント名

language
page_location
page_referrer
page_title
screen_resolution

デフォルトで利用できるイベント名に対してのルール

イベントパラメータに割り当てる値は 100 文字以内
page_title パラメータは 300 文字以内
page_location パラメータと page_referrer パラメータは 420 文字以内
page_location パラメータをオーバーライドする場合は、URL パスが有効であることを確認してください。無効な URL パスを割り当てた場合、[ページの場所] ディメンションは空になります

実運用イメージ

GTM利用者の責務

GA4推奨イベント理解
実装者に対し、GTMを発火させるトリガーの定義の理解

フロントエンドえんじにゃー 2023/03/03

ログ設計のハードル

GTMの理解
GTM + GA4のパターンの理解（主に推奨イベント）
GA4の管理画面の使い方の理解（探索機能の使い方）
適切なログを取得する為の設置箇所
ログを見て分析する方法（改善につなげる定石的な考え方）
市場のUI/UXの理解
メンタルモデルの理解

フロントエンドえんじにゃー 2023/03/06に更新

やりたいこと

Debug_viewで狙ったログを取る

適切な推奨イベントを利用しログが飛ばす（おそらく推奨イベントを利用すると思う）
- 推奨イベントのリストを見る
  - https://developers.google.com/analytics/devguides/collection/ga4/reference/events
- 推奨イベントを利用し、任意の値をログとして飛ばす
  - view_itemを使ってみる
  - 実装コードが分からない（以下でやってみる）
```
const dataParam = {
  event: 'view_item',
  items: [
    {
      index: screenIndex,
    },
  ],
  debug_mode: true,
};
```
  - 飛んでない
  - 推奨イベント + dataLayer.pushの方法を調査
カスタムイベントを利用してログを飛ばす

GTM + GA4の連携する

GTMでGA4のイベントを設定
ログをトリガーする
レポート機能で簡易的に確認できるか
探索機能で確認できるか

カスタムイベントを使うタイミングを把握する

おそらく殆どのログは推奨イベントでまかなえると思っている
GA4とGTMを連携する際のイベントもカスタムイベントと呼ぶが、それとGA4のカスタムイベントが違うものか同じものかを確認する（多分違うものだと思っている）

フロントエンドえんじにゃー 2023/03/06に更新

他に調査を進めたいもの

レポート機能

イベント名単位のログは集計できるが、イベントパラメータ単位の集計は難しい。

探索機能

イベント名とパラメータを元に詳細なデータを知りたい場合は、探索機能を利用する。

フロントエンドえんじにゃー 2023/03/06に更新

UAとの違い

ボタンクリック、ページスクロールをイベントとして計測していた
ページビュー、カテゴリ、アクション、ラベルの粒度で検索するのがUAのイベント
GA4は全てのユーザー行動をイベントで管理（ページビューもイベント）

GA4のイベント

初回訪問

first_visit → 初めてサイトに来た
session_start → セッションを開始した
page_view → ページを閲覧した

2回目訪問

session_start
page_view
contact_thanks（カスタムイベント）

イベントで何が計測できるのか

イベントは、「イベント名」と「イベントパラメータ」で構成されている。
例えば、以下の様な形で発生する。

イベント名（ユーザーが何をしたかを表す名前）
file_download

イベントパラメータ（イベントごとに追加できる追加情報）
file_extension ファイル拡張子
file_name ファイル名
link_classes リンクのクラス名
link_id リンクのid名
link_text リンクのテキスト

フロントエンドえんじにゃー 2023/03/06

dataLayer.pushに対して、下記の形で送ってもdebugViewには反応なし

event: 'page_view',
pagePath: `${PATH.GTM_VIEW_PATH}/${screenNum}`,
pageTitle: 'test',

フロントエンドえんじにゃー 2023/03/06

dataLayer.pushでeventを送信
※ここでのeventはGTMに定義したカスタムイベント
↓
GTMに通知
↓
GTMからGA4に通知
↓
DebugViewに載ってくるか
&
レポート
&
探索で確認できるか

フロントエンドえんじにゃー 2023/03/07

今までのGAではイベントカテゴリ、イベントアクション、イベントラベルを設定してクリックの計測などをしていました。
例えば、お気に入りボタンがあったとしてそれを計測したいとなった場合は、
イベントカテゴリ：お気に入りボタン
イベントアクション：クリック
イベントラベル：そのボタンのあるURL

しかし、GA4ではそういったイベントカテゴリやイベントアクション、イベントラベルなどはありません。
なので、イベント名とそのイベントに紐づくイベントパラメータを設定して計測するということになります。
これは設計次第ですが、
イベントカテゴリ：イベント名
イベントアクション：イベントパラメータ1
イベントラベル：イベントパラメータ2
のように計測するのがベストかなと思います。
ちなみに、イベントを計測するとデフォルトでpage_pathというイベントパラメータが、そのイベントが起きたページのURLを自動的に計測してくれるので、
イベントラベルでURLを指定しようとしている場合は、指定しなくても計測はできます。

フロントエンドえんじにゃー 2023/03/14