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

このドキュメントは、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 を自動的に測定するには:

  1. Google アナリティクスを開きます。

  2. [管理] の [データの収集と修正] で、[データ ストリーム] > [ウェブ] をクリックします。

  3. [測定機能の強化] でスイッチをオンにして、すべてのオプションを有効にします。

  4. クリックすると個々のオプションを編集できます。[ページビュー] で、[詳細設定を表示] をクリックします。[ページの読み込み] と [ブラウザの履歴イベントに基づくページの変更] の両方を有効にしてください。

    ページビューの設定を示す画像

  5. 変更を保存します。

計測方法のセットアップを確認する

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

  1. SPA 計測方法のセットアップのすべてのタグでデバッグモードを有効にします。DebugView でイベントをモニタリングする方法を確認する。

  2. シングルページ アプリケーションをクリックします。新しい仮想画面をクリックすると、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 を 1 つのページとして扱い、指標が偏ってしまいます。

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

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

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

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

前へ
ページビューの測定
次へ
タグ マネージャーで SPA を測定する