このドキュメントは、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 アナリティクスで拡張計測機能を有効にして、ブラウザの履歴イベントに基づいてページビューを自動的にトラッキングできます。
Google アナリティクスで拡張計測機能を有効にする
ブラウザの履歴に基づいて page_views を自動的に測定するには:
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 内の個々の画面やセクションのユーザー エンゲージメントやその他の指標を分析し、ユーザー ジャーニーをより正確に把握できます。