悩んでる人GA4のDebugViewがよくわかりません。リアルタイムレポートとどう違うの？設定や使い方も教えてください
hideharuこういった疑問に答えます。
本記事では、GA4のDebugViewについて詳しく解説します。
DebugViewとはデバッグに適したメニュー
DebugViewとは、GA4で新たに登場したデバッグ用のメニューです。
設定したイベントが正しく動作しているかをリアルタイムに確認できるので、デバッグに適しています。
というのも、イベントの発生状況は、GA4の「エンゲージメント> イベント」の画面で確認できますが、反映されるまでに時間がかかるからです。
リアルタイムレポートとの違い
悩んでる人イベントの発生を瞬時に見たいなら、GA4のリアルタイムレポートでいいのでは？
たしかに、発生したイベントを瞬時に確認できるという点では、リアルタイムレポートとDebugViewとは似ています。
実際、リアルタイムレポートを使って動作の確認をすることはありますし。
しかし、デバッグという目的においては、DebugViewの方が、リアルタイムレポートよりも適しています。DebugViewは以下の特徴があるから。
- 見たいイベントだけを確認できる
- イベントの発生順序を確認できる
- パラメータを簡単に確認できる
順に見ていきます。
DebugViewの特徴1: 見たいイベントだけを確認できる
リアルタイムレポートの場合、本番／開発環境に関係なく、すべてのブラウザのイベントが表示されます。
たとえば、100人がサイトにアクセスしていたら、100人分のイベントが表示されるってこと。
対して、DebugViewは、開発環境でデバッグモード（GTMのプレビューモードなど）になっているブラウザのイベントだけが表示されます。
あなたがデバッグしているときは、あなたのブラウザ上のイベントだけが表示されるってこと。
つまり、余計なイベントが混ざらないので、デバッグをしやすくなるわけです。
DebugViewの特徴2: イベントの発生順序を確認できる
リアルタイムレポートの場合、直近30分で発生したイベントの「合計数」が表示されます。
なので、たとえ、あなただけがサイトにアクセスしていたとしても、イベントの「発生順序」がよくわかりません。
対して、DebugViewなら、発生したイベントがタイムライン上で表示されるので、イベントの発生順序が手にとるように理解できます。
DebugViewの特徴3: パラメータを簡単に確認できる
リアルタイムレポートの場合、イベントパラメータを見るのが不便です。具体的な手順を示すと、まずイベントをクリックして、
次に、見たいパラメータをクリックして、
すると、パラメータを確認できるけですが、
じゃ、他のパラメータを見ようとすると、ひとつ上の階層に戻ってパラメータをクリックして、、
なんてことをくり返す必要があり、なんとも不便です。
対して、DebugViewは、イベントパラメータを見るのがとても簡単です。
たとえば、見たいイベントをクリックすると、パラメータ一覧が表示され、すべての値を簡単に確認できます。
このように、GA4で登場したDebugViewとは、
- 見たいイベントだけを確認できる
- イベントの発生順序を確認できる
- パラメータを簡単に確認できる
ので、デバッグに最適のメニューです。
DebugViewを有効にする設定方法
続いては、DebugViewを有効にする設定方法を解説します。
前述のとおり、DebugViewは、GA4を導入しただけでは利用できません。
DebugViewを有効にする必要があり、その設定方法は以下のいずれかです（参照：Googleヘルプ）。
- Chromeの拡張機能を使う
- GTMのプレビューモードを使う
- debug_mode:trueをGTMで設定する
- debug_mode:trueをソースにうめこむ
上記の中で、おすすめは「GTMのプレビューモード」。唯一、公開前のイベントを確認できるからです。
順に見ていきます。
DebugViewを有効にする方法1：Chromeの拡張機能を使う
ひとつめの方法は、Google Chromeの拡張機能を使うこと。
Chromeのウェブサイトにアクセスし、Google Analytics Debuggerをインストールします。
Chrome上部のアイコンをクリックしてオンにすると、以下のような表示になります。
するとDebugViewが有効になります。
実際にデバッグした感想
本来は、上記設定をすればDebugViewが稼働するはずなんですが、私の場合、なんど試してもダメでした…。
私のデスクトップPCのデータを除外しているから？と思い、IPの除外設定（やり方はこちらで解説）をオフにしたけど、やっぱりダメ。
原因がわかったら追記しますm(_ _)m
DebugViewを有効にする方法2：GTMのプレビューモードを使う
ふたつめの方法は、Googleタグマネージャー（GTM）でプレビューモードを使うこと。
４つの中で、この方法が最もおすすめ。公開前のイベントを確認できるからです。
イベントの公開後に、デバッグをして、間違っていたらイベントを修正するでもいいですが、不要なデータを計測してしまうデメリットがありますからね。
設定方法はいうと、事前準備として以下の２つ。
上記の準備が済んだ方は、GTMを起動し、画面右上のプレビューをクリックします。
以下の画面が表示されるので、Include debug signal in the URLにチェックがついていることを確認して、[Connect]をクリックします。
すると、表示されたURLの末尾に、/gtm_debug=xxxxが含まれます。
上記のURLになることで、GA4にデバッグモードだよということが伝わります。
あとは、このブラウザ上で発生したイベントが、GA4のDebugViewに表示されるようになります。
内部リンクをクリックしてページ遷移すると、URLから/gtm_debug=xxxxの文字列は消えてしまいますが、DebugViewは稼働するので大丈夫です。
実際にデバッグした感想
PC（mac）からSafariやFirefoxを使ったときは、DebugViewは稼働しました。
ただし、「Apple」と表示されたのが気になりました。
この場合は、「Safari」や「Firefox」と表示されるのかと思ったんですけどね…。macだから、Appleの表示は間違ってはいないけど…
ブラウザとしてChromeを使った場合は、DebugViewが稼働するPCと、稼働しないPCがありました。
稼働するケースでは（pcはwindows）、左上には「microsoft」と表示されました。
稼働しないケースでは（pcはmac）、全くの無反応…。
このPCは、前述のChromeの拡張機能も動作しなかったし…。
う〜ん、こちらも原因がわかったら追記しますm(_ _)m
DebugViewを有効にする方法3：debug_mode:trueをGTMで設定する
３つめの方法は、debug_mode:trueをGTMで設定すること。
この方法は、本番環境か開発環境かによらず、DebugViewは稼働します。
また、
・全てのイベントを表示
・特定のイベントだけを表示
の２とおりの設定ができます。
全てのイベントを表示させる方法
GTMにアクセスし、GA4の計測タグをクリックします。タグの種類として、[GA4設定]となっているものですね。
[設定フィールド]の項目で、
・フィールド名：debug_mode
・値：true
を入力して保存します。
プレビューモードで動作確認をしたうえで、GTMを公開します。
すると、全てのブラウザで発生した全てのイベントがDebugViewに表示されるようになります。
特定のイベントだけを表示させる方法
GTMで、DebugViewに表示させたいイベントのタグをクリックします。
例として、スクロール割合を計測できるタグをクリックします。
イベントパラメータの項目で、行を追加し、
・フィールド名：debug_mode
・値：true
を入力して保存します。
プレビューモードで動作確認をしたうえで、GTMを公開します。
すると、全てのブラウザにおいて、「設定したイベントだけ」がDebugViewに表示されるようになります。
DebugViewを有効にする方法4：debug_mode:trueをGTMで設定する
４つめの方法は、debug_mode:trueをソースコードにうめこむこと。
３つめの方法と同じく、
・全てのイベントを表示
・特定のイベントだけを表示
の２とおりの設定ができます。
全てのイベントを表示させる方法
gtag(‘config’) に 'debug_mode':true パラメータを追加します。
gtag('config', 'G-12345ABCDE',{ 'debug_mode':true });上記のソースコードを、対象ページのheadセクション内に記述します。
特定のイベントを表示させる方法
該当イベントに 'debug_mode':true パラメータを追加します。たとえば以下の感じ。
gtag('event', 'xyz', { 'debug_mode':true });上記のソースコードを、対象ページのheadセクション内に記述します。
以上、DebugViewを有効にする設定を４つ紹介しました。
DebugViewの使い方（画面の見方）
続いては、DebugViewの画面の見方を解説します。
上述したDebugViewの有効化設定をすれば、サイトで発生したイベントがDebugViewに表示されるようになります。
GA4の左メニューから [管理] > 「プロパティ設定」＞「データの表示」＞「DebugView」をクリックします。
すると、こんな画面が表示されます。
左上の[デバッグに使用するデバイス]をご覧ください。
前述の有効化設定①②の場合、あなたの操作だけが対象なので、お使いのブラウザやOSの名称が表示されます。
複数人で同時にデバッグしているときは、各人のブラウザorOSの名称が表示されるので、該当するものを選びます。
有効化設定③④だと、全ユーザーの操作が表示されるので、見たいブラウザ or OSを選びます。
一番左にはタイムラインが表示されます。1分ごとに何件のイベントが発生したかがわかります。
上図の数値が入っている分のところをクリックすると、該当時間の発生イベントが真ん中の列に表示されます。
真ん中の列では、発生したイベントを見ることができます。
１つ１つの円がイベントを表しており、
・青=イベント
・緑=コンバージョンイベント
・オレンジ=エラーイベント
です。
この部分はリアルタイムに更新され、最新のイベントと時間がどんどん入ってきます。
まずはここで、望んだイベントが取得されているかを確認しましょう！
発生したイベントの詳細を確認したいときは、そのイベントをクリックします。
すると、タイムラインが一旦停止し、イベントのパラメータ一覧が右側に表示されます。
選択したイベントで取得しているパラメータとひもづいているユーザープロパティ（カスタムディメンションでスコープが「ユーザー」になっている項目）も確認できます。
パラメータをクリックすると、値を確認できます。イベントに適切なパラメータが設定されているかを確認しましょう！
タイムライン上の任意の場所、あるいは、パラメータのバツ印をクリックすると、停止していたタイムラインが再開します。
画面の右側には、直近30分の上位のイベントとその回数が表示されます。
このように、DebugViewでは、設定したイベントが正しく動作しているかどうかを瞬時にチェックできるので、デバッグに最適。
以上、DebugViewの画面の見方でした。
まとめ：イベント追加時にDebugViewを活用しよう
DebugViewの使い方を解説しました。
DebugViewは、GA4で新たに加わったメニューで、デバッグに最適の機能です。
イベントを追加するときには、ぜひ活用しましょう。
今回は以上です。