シングルページアプリケーションを測定する

このドキュメントは、Google アナリティクスを使用してシングルページアプリケーションのページビューを測定するデベロッパーを対象としています。

シングルページアプリケーション（SPA）は、HTML ドキュメントを 1 回読み込み、JavaScript API を使用して追加のコンテンツを取得するウェブサイトです。

例: 見込み顧客を獲得するためのフォームがあるとします。フォームには次の 3 つの画面があります。

お客様の情報を取得する最初の画面。

お客様が特定のサービスに関心を示していることを示す 2 番目の画面。

お客様の興味に関連するウェビナーに登録するための 3 ページ目の画面。

SPA のページビューを正しく測定する鍵は、ユーザーが操作する各画面のページビューをカウントし、ページ referrer を正しく取得して、ユーザージャーニーを正しく追跡できるようにすることです。

始める前に

このページは、次のものが揃っていることを前提としています。

正確な SPA 測定を実装するには、次のいずれかの方法で新しい仮想ページビューをトリガーします。

ブラウザの履歴の変更（推奨）: SPA が History API、特に pushState() メソッドと replaceState() メソッドを使用して画面を更新する場合は、このオプションを使用します。
カスタムイベント: ウェブサイトで DocumentFragment オブジェクトを使用してさまざまな画面をレンダリングする場合は、このオプションを使用します。

SPA で History API を使用している場合は、Google アナリティクスで拡張計測機能を有効にすると、ブラウザの履歴イベントに基づいてページビューを自動的にトラッキングできます。

ブラウザの履歴に基づいて page_views を自動的に測定するには:

Google アナリティクスを開きます。
[管理] の [データの収集と修正] で、[データストリーム] > [ウェブ] をクリックします。
[測定機能の強化] でスイッチをオンにして、すべてのオプションを有効にします。
クリックすると個別のオプションを編集できます。[ページビュー] で、[詳細設定を表示] をクリックします。[ページの読み込み] と [ブラウザの履歴イベントに基づくページの変更] の両方を有効にしてください。
変更を保存します。

シングルページアプリケーションでページビューが正しく測定されることを確認するには:

SPA 測定設定のすべてのタグでデバッグモードを有効にします。DebugView でイベントをモニタリングする方法を確認する。
シングルページアプリケーションをクリックします。新しい仮想画面をクリックすると、DebugView に新しい page_view イベントが表示されます。page_view イベントパラメータを前の page_view イベントと比較して、ページリファラーとページロケーションが正しく更新されているかどうかを確認します。

SPA で仮想ページビューの測定を正しく実装すると、Google アナリティクスで他の自動イベントが適切に処理されます。画面の変更で仮想ページビューが記録されない場合、Google アナリティクスは SPA を 1 つのページとして扱い、指標が歪んでしまいます。

たとえば、user_engagement イベントは、ユーザーがページをアクティブに閲覧した時間を測定します。仮想ページビューがないと、すべてのエンゲージメント時間が最初のページ読み込みに割り当てられるため、個々の画面で費やされた時間を分析できません。

仮想ページビューの測定が正しく実装されている場合:

user_engagement イベントは、ユーザーが 1 つの仮想ページから別の仮想ページに移動したときに送信されます。
前の仮想ページのエンゲージメント時間が計算され、user_engagement イベントとともに送信されます。通常は、新しい仮想ページの page_view イベントが処理される直前です。
クリックやスクロールなどの他のイベントは、ユーザーが現在閲覧している仮想ページの page_location に関連付けられます。

これにより、SPA 内の個々の画面やセクションのユーザーエンゲージメントなどの指標を分析し、ユーザージャーニーをより正確に把握できます。