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

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

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

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

  • 顧客情報を取得する最初の画面。
  • お客様が特定のサービスに関心を示したセカンド スクリーン。
  • お客様の関心のあるウェブセミナーに登録するためのサードスクリーン ページ。

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

始める前に

このページは、すでに以下を行っていることを前提としています。

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

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

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

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

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

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

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

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

ブラウザの履歴に基づいて page_views を自動的に測定する手順は次のとおりです。

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

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

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

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

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

  5. 変更を保存します。