このドキュメントは、Google アナリティクスを使用してシングルページ アプリケーションのページビューを測定するデベロッパーを対象としています。
シングルページ アプリケーション （SPA）とは、HTML ドキュメントを 1 回読み込み、JavaScript API を使用して追加の コンテンツを取得するウェブサイトのことです。
例: リードを獲得するためのフォームがあるとします。このフォームには 3 つの画面があります。
- お客様の情報を取得する最初の画面。
- お客様が特定のサービスに関心を示していることを示す 2 番目の画面。
- お客様の関心に関連するウェビナーに登録するための 3 番目の画面。
SPA からページビューを正しく測定する鍵は、ユーザーが操作する画面ごとにページビューをカウントし、ページ 参照元を正しく取得して、 ユーザー ジャーニーを正確に追跡できるようにすることです。
始める前に
すでに以下を行っていることを前提としています。
ウェブサイトの Google アナリティクス アカウントとプロパティがある。詳しくは、 Google アナリティクスを設定するをご覧ください。
ページが最初に読み込まれたときに配信される Google タグがウェブサイトに実装されている。詳しくは、 Google タグを設定するをご覧ください。
シングルページ アプリケーションの測定を実装する
正確な SPA 測定を実装するには、次のいずれかの方法で新しい仮想ページビューをトリガーします。
ブラウザの履歴の変更（推奨）: SPA で History API（特に
pushState()メソッドとreplaceState()メソッド）を使用して画面を更新する場合は、この オプションを使用します。カスタム イベント: ウェブサイトで
DocumentFragmentオブジェクトを使用してさまざまな画面をレンダリングする場合は、このオプションを使用します。
ブラウザの履歴の変更の実装
SPA で History API を使用している場合は、Google アナリティクスで拡張計測機能を有効にして、ブラウザの履歴イベントに基づいてページビューを自動的にトラッキングできます。
GA4 で拡張計測機能を有効にする
ブラウザの履歴に基づいて page_views を自動的に測定するには:
Google アナリティクスを開きます。
[**管理**] の [データの収集と修正] で、[**データ ストリーム > ウェブ**] をクリックします。
[拡張計測機能] でスイッチを [オン] にして、すべてのオプションを有効にします。
をクリックして個々のオプションを編集します。[ページビュー]で、[詳細設定を表示]をクリックします。[ページの読み込み] と [ブラウザの履歴イベントに基づくページの変更] の両方を有効にしてください。
変更を保存 します。
注: [ブラウザの履歴イベントに基づくページの変更] で拡張計測機能を有効にすると、Google アナリティクスは履歴イベント（SPA で使用されるものなど）を自動的にリッスンし、page_view イベントを送信します。Google タグ マネージャーで、GA4 にページビューを送信する目的で、特定の履歴変数やトリガーを設定する必要はありません。
履歴イベントに Google タグ マネージャーのトリガーを使用する
他のマーケティング プラットフォームにデータを送信するなど、ブラウザの履歴の変更に基づいて Google タグ マネージャーで他の種類のタグを配信する必要がある場合は、[履歴変更] トリガータイプを使用できます。
履歴変更トリガーを使用するようにタグまたは変数を設定する場合は、Google タグ マネージャーが提供する正しい組み込み変数 を使用してください。
History New URL Fragment: 履歴イベント後の URL のフラグメント。History Old URL Fragment: 履歴イベント前の URL のフラグメント。History New State: 新しい履歴状態オブジェクト。History Old State: 古い履歴状態オブジェクト。History Source: 履歴イベントのソース（popstate、pushState、replaceStateなど）。
これらの組み込み変数は、まず Google タグ マネージャーの [変数] > [設定] で有効にする必要がある場合があります。
このトリガーの詳細については、 履歴変更トリガーをご覧ください。
測定の設定を確認する
シングルページ アプリケーションでページビューが正しく測定されることを確認するには:
SPA 計測方法のセットアップで、すべてのタグのデバッグモードを有効にします。詳しくは、 DebugView でイベントをモニタリングするをご覧ください。
シングルページ アプリケーションをクリックします。新しい仮想画面をクリックすると、DebugView に新しい
page_viewイベントが表示されます。page_viewイベントのパラメータを前のpage_viewイベントと比較して、ページ参照元とページ ロケーションが正しく更新されているかどうかを確認します。
SPA に関するその他の考慮事項
page_view イベントの送信に加えて、Google アナリティクスとの堅牢な SPA 統合とユーザー エクスペリエンスの向上を実現するために、次の点も考慮してください。
スクロール位置を管理する
ユーザーが SPA のビュー間を移動すると、ブラウザは通常、現在のスクロール位置を保持します。つまり、ユーザーに新しい仮想ページの先頭が表示されない可能性があり、スクロール距離のトラッキングに影響する可能性があります。
推奨事項: 仮想ページが切り替わるたびに、スクロール位置をページの先頭またはメイン コンテンツ コンテナにプログラムでリセットします。
// Example: Reset window scroll position on a route change in your SPA
window.scrollTo(0, 0);
// Or, if your content is within a specific element:
// document.getElementById('main-content').scrollTo(0, 0);
この変更により、ユーザーは新しいコンテンツの先頭から開始できるため、Google アナリティクスのスクロール トラッキングで新しい仮想ページのエンゲージメントを正確に測定できます。
ブラウザ機能のコンテンツ アクセシビリティを確保する
仮想ページ読み込み後に、ページ内検索（Ctrl+F）などのブラウザ機能が動作しないという問題がユーザーから報告された場合は、SPA が DOM を更新する方法が原因である可能性があります。
推奨事項: SPA フレームワークとルーティング ロジックで、新しいページのコンテンツを使用して DOM の関連部分を完全かつ同期的に更新するようにします。レンダリングの遅延や、メインの DOM ツリーから非表示になっているコンテンツは、ブラウザの検索機能で即座にインデックスに登録されない可能性があります。仮想ナビゲーション後にページ内検索をテストして、コンテンツのアクセシビリティを確認します。
自動イベントへの影響
SPA で仮想ページビューの測定を正しく実装すると、Google アナリティクスは他の自動イベントを適切に処理します。画面の変更で仮想ページビューが記録されない場合、Google アナリティクスは SPA を単一のページとして扱い、指標が歪んでしまいます。
たとえば、user_engagement イベントは、ユーザーがページを操作した時間を測定します。仮想ページビューがない場合、すべてのエンゲージメント時間は最初のページ読み込みに起因するため、個々の画面で費やされた時間を分析することはできません。
仮想ページビューの測定が正しく実装されている場合:
- ユーザーが仮想ページ間を移動すると、
user_engagementイベントが送信されます。 - 前の仮想ページのエンゲージメント時間が計算され、
user_engagementイベントとともに送信されます。通常は、新しい仮想ページのpage_viewイベントが処理される直前です。 - クリックやスクロールなどの他のイベントは、ユーザーが現在閲覧している仮想ページの
page_locationに関連付けられます。
これにより、SPA 内の個々の画面やセクションのユーザー エンゲージメントやその他の指標を分析し、ユーザー ジャーニーをより正確に把握できます。