[GA4] DebugViewの使い方

2021年12月27日

GA4ではDebugViewという検証に便利な機能が存在しています。どんな点が便利なのか、リアルタイムレポートとの違いはなにか、ということを解説します。

DebugViewの概要
DebugViewの設定方法
計測の確認
まとめ

DebugViewの概要

DebugViewとは

簡単に言うと、DebugViewを使用することにより、リアルタイムにGA4でのデータ取得の検証が出来るようになります。ユーザーが時系列でどのような操作を行い、どのイベントにどのパラメータが付与されているか、が分かるようになることで、ユーザーの行動を分析したり、設定した内容が正しく反映されているかが分かり、検証に役立ちます。

どのようなシーンで利用するのか

基本的にはユーザー単位でのデータの検証に利用します。ユーザーの行動がタイムライン形式でイベントを確認できるため、ユーザー行動軸で確認できます。また、設定した内容がGA4で計測できているか、その内容（パラメータ）は間違いないか、をイベント単位で確認できます。通常のレポートではデータ反映まで4～8時間かかるため、検証とのタイムラグ発生し、設定公開後すぐの確認ができません。

タイムライン形式

DebugViewは下図のようにタイムライン形式で表示されるため、計測のタイミングや前後の調整が便利です。

リアルタイムレポートとの違い

リアルタイムレポートでも1分未満にデータの確認が可能です。ではDebugViewとリアルタイムレポートの違いはどこにあるのでしょうか。違いは大きく2点あります。

詳細なレポート: リアルタイムレポートではeコマースの情報などは標準レポートに反映するまで確認ができない DebugViewではすべてのイベントとパラメータが確認可能
計測時間: リアルタイムレポートでは過去30分のユーザーのアクティビティ DebugViewでは過去30分以上のユーザーのアクティビティ

その他として、以下のキャプチャのように違いがあります。

[GA4] リアルタイムレポートと DebugView レポートの比較 – アナリティクスヘルプ

DebugViewの設定方法

DebugViewは設定をすることで使用できます。以下の3パターンの方法があります。

Chrome 拡張機能の Google Analytics Debuggerを利用する
debug_mode を手動設定する
GTMのプレビューモードを使用する

いずれも、計測の際に ‘debug_mode’:true が付与されることで DebugView に表示を行います。

Chrome 拡張機能の Google Analytics Debuggerを利用する

Chrome 拡張機能の Google Analytics Debugger をインストールします。

chrome ウェブストア：Google Analytics Debugger

インストール後、拡張機能を有効にし、拡張機能を無効にするまで ‘debug_mode’:true のイベントがログに記録されます。

GTMのプレビューモードを使用する

GTMのプレビュー機能を利用する場合も ‘debug_mode’:true のイベントがログに記録されます。詳細は弊社コラム「新しいGTMプレビューモードの使い方」をご確認ください。

コラム：新しいGTMプレビューモードの使い方

debug_mode を手動設定する

gtag.jsを利用している場合

gtag.jsを利用している場合は以下のように設置しているソースコードに gtag(‘config’) に ‘debug_mode’:true パラメータを追加します。 ※このタグを利用した計測すべてに ‘debug_mode’:true が付与されるため、検証後に削除したり、テストサイトのみに付与したりするなどを検討しましょう。

gtag('config', 'G-12345ABCDE',{'debug_mode':true});

例：

<!– Global site tag (gtag.js) – Google Analytics –>
<script async src=”https://www.googletagmanager.com/gtag/js?id=G-QCX3G9KSPC”></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag(‘js’, new Date());

gtag(‘config’, ‘G-12345ABCDE’,{‘debug_mode’:true});

</script>