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

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

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

例: リードを獲得するためのフォームがあるとします。このフォームには 3 つの画面があります。

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

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

始める前に

すでに以下を行っていることを前提としています。

  • ウェブサイトの Google アナリティクス アカウントとプロパティがある。詳しくは、 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 タグを再初期化せずに、 以前に設定した値を更新するには、 キーと値のペア '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 を持つ 2 つの Google タグが必要です。最初の 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 : {{Referrer}}
    • page_location : {{Page 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. タグに名前を付けて [保存] をクリックします。

履歴イベントに 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 に関するその他の考慮事項

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 内の個々の画面やセクションのユーザー エンゲージメントやその他の指標を分析し、ユーザー ジャーニーをより正確に把握できます。

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