このドキュメントは、Google アナリティクスを使用してシングルページ アプリケーションのページビューを測定するデベロッパーを対象としています。
シングルページ アプリケーション（SPA）は、HTML ドキュメントを 1 回読み込み、JavaScript API を使用して追加のコンテンツを取得するウェブサイトです。
例: 見込み顧客を獲得するためのフォームがあるとします。フォームには次の 3 つの画面があります。
- お客様の情報を取得する最初の画面。
- お客様が特定のサービスに関心を示していることを示す 2 番目の画面。
- お客様の興味に関連するウェビナーに登録するための 3 ページ目の画面。
SPA のページビューを正しく測定する鍵は、ユーザーが操作する各画面のページビューをカウントし、ページ リファラーを正しく取得して、ユーザー ジャーニーを正しく追跡できるようにすることです。
始める前に
このページは、次のものが揃っていることを前提としています。
ウェブサイト用の Google アナリティクス 4 のアカウントとプロパティ。詳しくは、Google アナリティクスを設定する方法をご覧ください。
ウェブサイトに実装され、ページが最初に読み込まれたときに発動する Google タグ。詳しくは、Google タグを設定する方法をご覧ください。
シングルページ アプリケーションの測定を実装する
正確な SPA 測定を実装するには、次のいずれかの方法で新しい仮想ページビューをトリガーします。
ブラウザの履歴の変更（推奨）: SPA が History API、特に
pushState()メソッドとreplaceState()メソッドを使用して画面を更新する場合は、このオプションを使用します。カスタム イベント: ウェブサイトで
DocumentFragmentオブジェクトを使用してさまざまな画面をレンダリングする場合は、このオプションを使用します。
ブラウザの履歴変更の実装
GA4 で拡張計測機能を有効にする
ブラウザの閲覧履歴に基づいて page_views を自動的に測定するには:
Google アナリティクスを開きます。
[管理] の [データの収集と修正] で、[データ ストリーム] > [ウェブ] をクリックします。
[測定機能の強化] でスイッチをオンにして、すべてのオプションを有効にします。
クリックすると個別のオプションを編集できます。[ページビュー] で、[詳細設定を表示] をクリックします。[ページの読み込み] と [ブラウザの履歴イベントに基づくページの変更] の両方を有効にしてください。
変更を保存します。
計測方法の設定を確認する
シングルページ アプリケーションでページビューが正しく測定されることを確認するには:
SPA 測定設定のすべてのタグでデバッグモードを有効にします。DebugView でイベントをモニタリングする方法を確認する。
シングルページ アプリケーションをクリックします。新しい仮想画面をクリックすると、DebugView に新しい
page_viewイベントが表示されます。page_viewイベント パラメータを前のpage_viewイベントと比較して、ページ リファラーとページ ロケーションが正しく更新されているかどうかを確認します。