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

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

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

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

  • お客様の情報を取得する最初の画面。
  • お客様が特定のサービスに関心を示していることを示す 2 番目の画面。
  • お客様の興味に関連するウェビナーに登録するための 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 イベントと比較して、ページ リファラーとページ ロケーションが正しく更新されているかどうかを確認します。

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