デベロッパーツールでのGA4イベント計測確認方法

はじめに

Google Analytics 4（GA4）は、ウェブサイトやアプリのユーザー行動を詳細に追跡するための強力なツールです。GA4が正しく設定されているかどうかを確認するためには、Google Chromeのデベロッパーツールを使う方法が便利です。今回のコラムでは、GA4のイベント計測を確認するための方法をご紹介します。

デベロッパーツールとは

Google Chromeのデベロッパーツール（Chrome DevTools）は、ウェブサイトの仕組みをチェックしたり、問題を見つけたりするための便利なツールです。ウェブページのデザイン（HTMLやCSS）や動き（JavaScript）をリアルタイムで確認・編集できます。また、ネットワークリクエストを監視して、どのデータがやり取りされているかをチェックしたり、サイトのパフォーマンスを分析して、どこが遅いのかを見つけることもできます。初心者でも使いやすく、ウェブ開発やトラブルシューティングに役立つ便利なツールです。

イベントの計測方法

1. Google Chromeのデベロッパーツールを開く

まず、Google Chromeブラウザを開き、GA4が実装されているウェブサイトにアクセスし、以下の手順でデベロッパーツールを開いてください。

ブラウザメニューで右上の縦三点リーダーをクリックしてください。
その他のツールからデベロッパーツールを選択します。

2. ネットワークタブの確認

デベロッパーツールが開いたら、次に「ネットワーク」タブを選択します。このタブでは、ウェブページが送受信するすべてのネットワークリクエストを見ることができます。

ネットワークタブ内で、フィルタを設定してGA4関連のリクエストのみ表示されるようにします。フィルタボックスにcollectと入力します。これにより、GA4のデータ収集リクエストに絞り込むことができます。

3. Headerタブ、Payloadタブの確認

次に、ボタンをクリックする、フォームを送信する、ページをスクロールするといった、ウェブサイトで特定のアクションを実行すると、それらが、GA4でイベント取得の設定がされているアクションであれば、ネットワークタブに新しいリクエストが表示されます。

該当のリクエストをクリックし、詳細を確認します。HeadersタブでリクエストURLとパラメータを確認し、Payloadタブで送信されたデータを確認します。

Payloadタブで確認できる主要なリクエストは以下のとおりです。

en – event_name：トリガーされたイベントの名前

例：en=page_view（ページビューのイベント）

ep. – event_params ：イベントに関連する追加情報

例：ep.button_text=Submit（クリックされたボタンのテキスト）

uid – user_id：特定のユーザーを識別するためのID

例：uid=12345（ユーザーIDが12345のユーザー）

sid – session_id：ユーザーの訪問ごとに付けられる一意のID

例：sid=67890（セッションIDが67890）

ts – timestamp：イベントが発生した日時

例：ts=1628247600000（UNIXタイムスタンプ形式）

まとめ

今回は、Gooogle ChromeのデベロッパーツールでのGA4のイベント計測の確認方法についてお伝えしました。クエリ文字列パラメータを確認することで、GA4のイベントが正しく記録されているかどうかを詳細に分析できます。デベロッパーツールの「Network」タブと「Payload」タブを使って、各パラメータが適切に設定され、送信されていることを確認しましょう。これにより、トラッキングの正確性を保つことができます。

Implement DigitalではGoogle Analytics / Google Tag Manager の導入・実装・運用を支援するサービスを提供しています。

ご興味がありましたらお問い合わせください。