Google アナリティクス 4 のシングルページアプリケーショントラッキング（SPA/PWA）

Table of Contents

このセクションでは、Google アナリティクス 4 でシングルページアプリケーションを追跡する方法を紹介します。

シングルページアプリケーションとは

シングルページアプリケーション (英語: シングルページアプリケーション、略して SPA) は、サーバーから新しいページ全体をリロードするのではなく、現在のページを動的に書き換えることによってユーザーと対話する Web アプリケーションまたは Web サイトのモデルです。

ユーザーがページにアクセスすると、URL は変更されますが、ページはリロードされません。この方法により、ページの切り替えとユーザーエクスペリエンスの中断が回避され、アプリケーションがデスクトップアプリケーションのようになります。

シングルページアプリケーショントラッキングの原則

シングルページアプリケーションの追跡原理は、仮想ページ (Virtual Pageview) です。

仮想ページとは、実際にはブラウジングを発生させないページであり、追跡するページ閲覧行動と捉えており、例えばSPAでは、最初のページ以外のページは読み込まれず、ブラウジングは発生していないとみなしたいページブラウジングとして、これは仮想ページです。

Web サイトが単一ページのアプリケーションかどうかを確認する方法

ページ A からクリックして、GTM のプレビューモードでページ B にアクセスできます。このプロセス中に、Tag Assistant がページをリロードしたかどうかを確認します。リロードされた場合、それは単一ページのアプリケーションではありません。リロードされていない場合は、多くの履歴が表示される単一ページのアプリケーションです。

プレビューする前に、このトリガー条件を有効にする必要があります.GTMで、「トリガー」——「新規」——「トリガーのタイプを選択して設定を開始… 」——「履歴の変更」をクリックし、次のようにします。設定：

次に、変数で、組み込み変数のレコードに関連する変数を確認します:

次に [プレビュー] をクリックし、任意のページをクリックして、Tag Assistant を視聴します:

履歴は、単一ページのアプリケーションである Tag Assistant に表示されます。

単一ページのアプリケーションを追跡する方法

Google アナリティクス 4 でシングルページアプリケーションを追跡するには、いくつかの方法があります。

拡張計測機能イベント
歴史の変化
遅延送信、変更レコードと dataLayer で同時に使用されます
dataLayer メソッド

拡張計測機能イベント

Google アナリティクス 4 で、[管理] —— [データストリーム] —— [すべて] —— [拡張計測機能] をクリックして、拡張評価イベントの設定インターフェイスを表示します：

「ページビュー数」の「詳細設定を表示」をクリックすると、「ブラウザの履歴イベントに基づくページの変更」オプションが表示されるので、チェックを入れて保存します。

これでシングルページアプリのトラッキング設定は完了です。

GTM プレビューモードの History の API Call に gtm.historyChange-v2 が表示される場合は、追跡されたことを意味します。

歴史の変化

まず、レコード変更で使用できる変数を見てみましょう。

GTM で [プレビュー] をクリックし、ページを自由にクリックして Tag Assistant に戻り、[概要] で [履歴] を見つけて、[履歴] に関連する変数の値を確認します。

このメソッドはページパスのみを取得し、ページタイトルは取得しません. ページタイトルを取得したい場合は、遅延送信メソッドを使用できます.

遅延送信

遅延送信の方法は、ヒストリーがトリガーされたときに1000msまたは500ms遅延させ、JavaScriptでページタイトルとページパスを取得し、dataLayerで送信し、GTM設定でページトラッキングを実現します。

新しい HTML 遅延送信

GTM で「タグ」——「新規」——「タグタイプを選択して設定を開始… 」——「カスタム HTML」をクリックし、以下のように設定します。

プログラムは次のとおりです:

<script>
// Push the page path and title into the datalayer for all occurrences of the custom event pageview
  setTimeout(function(){ 
    if (history.pushState) {
      var path = window.history.state.as;
      var title = document.title;
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({
      event: 'Pageview',  
        pagePath: path,
        pathTitle: title,
      });
    }
  }, 500);
 
</script>

トリガー：Custom Event—Pageview

GTMで「トリガー」——「新規」——「トリガーのタイプを選択して設定を開始… 」——「カスタムイベント」をクリックし、以下のように設定します：

ここでのイベント名は、データレイヤーのイベントに対応している必要があります。

変数：dlv—pagePath & dlv—pageTitle

2 つの新しい変数を作成するには、GTM で [変数] —— [新規] —— [変数タイプを選択して設定を開始… ] —— [データレイヤーの変数] をクリックし、それぞれ次の設定を行います。

ここでのデータ層の変数名は、データ層の変数名に対応している必要があります。

dataLayer メソッド

dataLayer方式と遅延送信はどちらもdataLayerを使用します.2つの違いは遅延送信はGTM上でDataLayerの送信を制御することですが,datalayer方式はエンジニアが制御して送信することです.より正確には,dataLayer方式は普遍的な方式です.単一ページのアプリケーションの追跡問題を解決できる必要があります. ユーザーが別のページをクリックしたときに、エンジニアは次のサンプルデータを送信する必要があります:

<script>
 window.dataLayer = window.dataLayer || [];
 window.dataLayer.push({
 'event': 'Pageview',
 'pagePath': '/something/contact-us',
 'pageTitle': 'Contact us' //some arbitrary name for the page/state
 });
</script>

エンジニアは、window.dataLayer = window.dataLayer || [] がオブジェクトをクリアして混乱を避けるために使用されることに注意する必要があります; pagePath と pageTitle は両方とも動的に変化し、互いに対応しています。

次にGTMの設定ですが、DataLayer方式のGTM設定は、遅延送信方式のGTM設定と同じです。