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

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

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

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

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

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

始める前に

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

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

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

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

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

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

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

カスタム イベントの実装

page_view イベントを自分で実装する場合は、画面が切り替わったときにウェブサイトが次のように動作するようにしてください。

  • 適切なアトリビューションのために page_referrer と page_location を正しい値に設定します。

  • 新しい page_view イベントを送信する

gtag.js

  1. シングルページ アプリケーションの古い URL と新しい URL を保存して、page_view イベントを手動で送信するときに値にアクセスできるようにします。

  2. page_referrer と page_location を SPA の対応する画面に更新する関数を作成します。
    省略可: Google タグを再初期化せずに、以前に設定した値を更新するには、Key-Value ペア 'update': true を指定します。

  3. 省略可: カスタム ディメンション: 新しい仮想ページビューでカスタム ディメンションと指標を更新するには、それらを config コマンドに含めます。詳しくは、カスタム ディメンションとカスタム指標についてをご覧ください。

  4. page_view イベントを送信して、画面の変更をページビューとしてカウントします。次に例を示します。

     // Store current URL path and query in a variable.
    const oldUrl = window.location.href.split('#')[0];
 // Change to new URL.
    history.pushState({}, undefined, newUrl);
 // Measure page change.
    function OnPageChange(oldUrl, newUrl) {
       gtag('config', 'G-XXXXXX', {
        'send_page_view': false,
        'page_referrer': oldUrl,
        'page_location': newUrl,
        'update': true,
     });
       gtag('event', 'page_view');
     }

  5. 新しい仮想ページビューをトリガーする必要がある場合は、OnPageChange 関数を呼び出します。

タグ マネージャー

タグ マネージャーで SPA を測定するには、コンテナに同じタグ ID の Google タグを 2 つ配置する必要があります。最初の Google タグはウェブサイトの読み込み時に読み込まれ、測定に必要なパラメータを設定します。2 つ目の Google タグは、ウェブサイトの URL が変更されるたびにトリガーされます。最後に、ページビュー イベントを手動で送信して、新しい仮想ページを記録する必要があります。

1. SPA 測定用に Google アナリティクス データ ストリームを準備する

page_view イベントを手動でトラッキングするには:

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

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

  3. [測定機能の強化] で設定アイコン を選択します。

  4. [ページビュー] > [詳細設定を表示] で、[ブラウザの履歴イベントに基づくページの変更] をオフにします。ブラウザ履歴の変更は、タグ マネージャーで手動で記録します。

  5. [保存] をクリックします。

2. SPA の仮想ページビュー用に Google タグを作成する

  1. Google タグ マネージャーを開きます。

  2. ワークスペースで [タグ] メニューを開きます。

  3. 新しいタグを作成します。

  4. [タグの設定] で、Google タグを選択します。

  5. 最初の Google タグの ID と同じ Google タグ ID を入力します。

  6. [設定] で、次のパラメータを指定します。

    • page_referrer : {{Old History URL}}
    • page_location : {{New History URL}}

    • update: true

    • 省略可: 新しい仮想ページビューで更新するカスタム ディメンションと指標を指定します。

  7. [トリガー] で、次のように設定します。

    1. [トリガーの選択] で、新しいトリガーを作成します（+）。
    2. [トリガーの設定] で、[履歴の変更] トリガーを選択します。詳しくは、履歴変更トリガーをご覧ください。このタグは、新しい画面が表示されたときにのみトリガーするようにしてください。
    3. トリガーに名前を付けて保存します。

  8. 変換に名前を付けて保存します。Google タグは次のようになります。

最終的なタグ設定を示すスクリーンショット

3. 新しいページビュー イベントをトリガーする

  1. タグ マネージャーのワークスペースで、新しいタグを作成します。

  2. [タグの設定] で、[Google アナリティクス: GA4 イベント] タグを選択します。

  3. タグの測定 ID を入力します。この ID は、前のタグで使用した Google タグ ID と同じです。

  4. 新しいページビュー イベントを送信するには、[イベント名] に page_view を追加します。

  5. [トリガー] で、履歴変更トリガーを設定します。これは、設定した Google タグと同じトリガーにする必要があります。

  6. タグに名前を付けて保存します。

測定設定を確認する

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

  1. SPA 測定設定のすべてのタグでデバッグモードを有効にします。DebugView でイベントをモニタリングする方法を学習する。

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

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