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

このドキュメントは、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

シングルページアプリケーションの古い URL と新しい URL を保存して、page_view イベントを手動で送信するときに値にアクセスできるようにします。
page_referrer と page_location を SPA の対応する画面に更新する関数を作成します。
省略可: Google タグを再初期化せずに以前に設定した値を更新するには、Key-Value ペア 'update': true を指定します。
省略可: カスタムディメンション: 新しい仮想ページビューでカスタムディメンションと指標を更新するには、config コマンドに含めます。詳しくは、カスタムディメンションとカスタム指標についてをご覧ください。

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');
     }

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

タグマネージャー

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

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

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

Google アナリティクスを開きます。
[管理] の [データの収集と修正] で、[データストリーム] をクリックします。
[拡張計測機能] で、設定アイコンを選択します。
[ページビュー] > [詳細設定を表示] で、[ブラウザの履歴イベントに基づくページの変更] のチェックを外します。ブラウザの履歴の変更は、タグマネージャーで手動で記録します。
[保存] をクリックします。

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

Google タグマネージャーを開きます。
ワークスペースで [タグ] メニューを開きます。
新規タグを作成します。
[タグの設定] で、[Google タグ] を選択します。
最初の Google タグの ID と同じ Google タグ ID を入力します。
[設定] で、次のパラメータを指定します。
- page_referrer : {{Referrer}}
- page_location : {{Page URL}}
- update: true
  
  注: update パラメータは、新しいパラメータまたは更新されたパラメータを既存の Google タグ設定に統合します。また、新しい page_view イベントの送信も抑制します。
- 省略可: 新しい仮想ページビューで更新するカスタムディメンションと指標を指定します。
[トリガー] で、次のように設定します。
1. [トリガーを選択] で、新しいトリガー（+）を作成します。
2. [トリガーの設定] で、[履歴の変更] トリガーを選択します。詳しくは、履歴変更トリガーをご覧ください。このタグは、新しい画面が表示された場合にのみトリガーされるようにしてください。
3. トリガーに名前を付けて [保存] をクリックします。
変換に名前を付けて保存します。Google タグは次のようになります。

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

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

タグマネージャーのワークスペースで、[新規] タグを作成します。
[タグの設定] で、[Google アナリティクス: GA4 イベント] タグを選択します。
タグの測定 ID を入力します。この ID は、前のタグで使用した Google タグ ID と一致します。
新しいページビューイベントを送信するには、[イベント名] に page_view を追加します。
[トリガー] で、履歴変更トリガーを設定します。これは、設定した 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 タグマネージャーの [変数] > [設定] で事前に有効にしておく必要がある場合があります。

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

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

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

SPA 計測方法のセットアップのすべてのタグでデバッグモードを有効にします。DebugView でイベントをモニタリングする方法を確認する。
シングルページアプリケーションをクリックします。新しい仮想画面をクリックすると、DebugView に新しい page_view イベントが表示されます。page_view イベントパラメータを前の page_view イベントと比較して、ページリファラーとページロケーションが正しく更新されているかどうかを確認します。

自動イベントへの影響

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

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

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

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

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

ページビューの測定

購入イベントを設定する

シングルページ アプリケーションを測定する コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

始める前に

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

カスタム イベントの実装