GA4入門:DebugView-デバッグモード設定方法 - デジタルコンサルタントの視点

GA4のデバッグモードの話です。GA4は2020年にGoogleからリリースされたGoogleAnalyticsの最新バージョンです。当初「アプリ + ウェブ」プロパティで公開されていましたが、Google アナリティクス 4 プロパティとなりました。様々なカスタムができますが、カスタムイベントなどのイベントを追加する際など、思惑通り正しく設定できているか？あるいは、思惑通り計測できているか検証することは非常に重要な機能であるデバッグモードの紹介です😄

参考サイト：[GA4] デバッグモードでイベントをモニタリングする

デバッグモードでできる事
デバッグモードの設定方法
1. Google Tag Managerを使用している場合
2. Tagを直接貼っている場合
おすすめセミナーの告知

デバッグモードでできる事

イベントの設定を行う上でまず初めにdebug_modeを有効にしておきましょう。debug_modeを有効にすると、DebugViewにて特定の訪問者の現在サイトで発生しているeventをリアルタイムで確認することができます。

したがって、設定したカスタムイベントが有効に機能しているか確認できます。

DebugViewは左メニューの下の方にあります。

DebugViewを有効にしてクリックするとこのような形で、リアルタイムに現在発生しているeventを確認することができます。

このようにリアルタイム（数秒のラグあり）でホームページの訪問者のeventを確認することができます。これによりカスタムイベントも思惑通りに発火しているか確認できるというわけです😄

デバッグモードの設定方法

GA4のタグをどのようにサイトに設定しているのかにもよりますが、設定方法は超簡単。

Google Tag Managerを使用している場合

「タグ」→「GoogleアナリティクスGA4設定」を開いて、タグの設定画面を開きます。

上記のように設定フィールドに追加します

フィールド名：debug_mode

値：true

これで保存して、公開すれば設定は完了です。

Tagを直接貼っている場合

GTMを使用せずに直接タグを利用されている方は、タグの貼り方に修正が必要です。

例えば下記のようなタグを貼っている場合

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

  gtag('config', 'G-XXXXXXXXXX');
</script>

下記のようにgtag関数のところに、「,{‘debug_mode’:true}」を追記します。

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

  gtag('config', 'G-XXXXXXXXXX',{'debug_mode':true});
</script>

これをページに低起用すると、修正したページは、デバッグモードが有効になります。

今日はここまでです😄