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

このドキュメントは、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 を単一のページとして扱うため、指標が歪むことになります。

たとえば、user_engagement イベントは、ユーザーがページを積極的に利用している時間を測定します。仮想ページビューがない場合、すべてのエンゲージメント時間が最初のページ読み込みに起因するため、個々の画面での滞在時間を分析することはできません。

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

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

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

前へ
セッションとユーザー エンゲージメントを測定する
次へ
タグ マネージャーで SPA を測定する