Google は AI 技術を使用して、コンテンツをご希望の言語に翻訳しています。AI 翻訳には誤りが含まれる場合があります。

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

このドキュメントは、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 を測定するには、Google アナリティクスのデータストリームを設定し、組み込みの履歴変数を有効にして、履歴の変更時にトリガーされるタグを作成する必要があります。

タグマネージャーで 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 イベントが送信されます。
前の仮想ページのエンゲージメント時間が計算され、user_engagement イベントとともに送信されます。通常は、新しい仮想ページの page_view イベントが処理される直前です。
クリックやスクロールなどの他のイベントは、ユーザーが現在閲覧している仮想ページの page_location に関連付けられます。

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

セッションとユーザーエンゲージメントを測定する

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

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