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

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

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

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

  • 顧客情報を取得する最初の画面。
  • お客様が特定のサービスに関心を示していることを示す 2 番目の画面。
  • お客様の興味に関連するウェビナーに登録するための 3 つ目の画面ページ。

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

始める前に

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

  • ウェブサイト用の Google アナリティクス 4 のアカウントとプロパティ。詳しくは、Google アナリティクスを設定する方法をご覧ください。

  • ウェブサイトに実装された Google タグ。ページが最初に読み込まれたときに配信されます。詳しくは、Google タグを設定する方法をご覧ください。

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

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

  • ブラウザの履歴の変更（推奨）: SPA で History API、特に pushState() メソッドと replaceState() メソッドを使用して画面を更新する場合は、このオプションを使用します。

  • カスタム イベント: ウェブサイトで DocumentFragment オブジェクトを使用してさまざまな画面をレンダリングする場合は、このオプションを使用します。

ブラウザの履歴変更の実装

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

GA4 で拡張計測機能を有効にする

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

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

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

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

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

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

  5. 変更を保存します。

注: 「ブラウザの履歴イベントに基づくページの変更」で拡張計測機能を有効にすると、Google アナリティクスは履歴イベント（SPA で使用されるものなど）を自動的にリッスンし、page_view イベントを送信します。GA4 にページビューを送信する目的で、Google タグ マネージャーで特定の履歴変数やトリガーを設定する必要はありません。

履歴イベントに 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 タグ マネージャーの [変数] > [設定] で事前に有効にしておく必要がある場合があります。

このトリガーの詳細については、履歴変更トリガーをご覧ください。

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

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

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

  2. シングルページ アプリケーションをクリックします。新しい仮想画面をクリックすると、DebugView に新しい page_view イベントが表示されます。page_view イベント パラメータを前の page_view イベントと比較して、ページ リファラーとページ ロケーションが正しく更新されているかどうかを確認します。

自動イベントへの影響

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

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

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

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

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

前へ
ページビューの測定
次へ
購入イベントを設定する