Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

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

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

シングルページアプリケーションの古い 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 を測定するには、GA4 データストリームを設定し、組み込みの履歴変数を有効にして、履歴の変更時にトリガーされるタグを作成する必要があります。

タグマネージャーで SPA 測定を実装する方法については、Google タグマネージャーでシングルページアプリケーションを測定するチュートリアルをご覧ください。

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

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

SPA 計測方法のセットアップのすべてのタグでデバッグモードを有効にします。DebugView でイベントをモニタリングする方法を確認する。
シングルページアプリケーションをクリックします。新しい仮想画面をクリックすると、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 を 1 つのページとして扱い、指標が偏ってしまいます。

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

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

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

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

ページビューの測定

タグマネージャーで SPA を測定する

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