GA4のデバッグモードの話です。GA4は2020年にGoogleからリリースされたGoogleAnalyticsの最新バージョンです。当初「アプリ + ウェブ」プロパティで公開されていましたが、Google アナリティクス 4 プロパティとなりました。様々なカスタムができますが、カスタムイベントなどのイベントを追加する際など、思惑通り正しく設定できているか?あるいは、思惑通り計測できているか検証することは非常に重要な機能であるデバッグモードの紹介です😄
参考サイト:[GA4] デバッグモードでイベントをモニタリングする
デバッグモードでできる事
イベントの設定を行う上でまず初めに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>
これをページに低起用すると、修正したページは、デバッグモードが有効になります。
今日はここまでです😄
おすすめセミナーの告知
下記のセミナーを予定しております。ぜひご参加ください。
- タイトル
- Googleアナリティクスなどの解析ツールを活用したWeb改善講座
- 開催日
- 2023年6月19日(月)※オンラインで実施
- 参加方法
- 宣伝会議オンライン内でオンデマンド配信
- 参加費
- 54,000円(税込 59,400円)
- 参加申し込み
- Googleアナリティクスなどの解析ツールを活用したWeb改善講座(ライブ配信)情報サイトやECサイトなど、ほとんどの企業がWebサイトをビジネスに活用する時代になりました。現在ではWebサイトが企業の「顔」になっているところも数多くあります。 Webサイトを運営する上で必要不可欠なのが、「アクセス解析」「分析」「改善」のプロセスです。そこで本講座では、Webサイトの分析に優れた力を発揮する解析ツ...
コメント