SPAページの滞在時間を計測する方法

Special Thanks : 浅田綾一

まずSPAサイトにてページ毎の滞在時間を計る場合、GA4/GTMデフォルトでは取得・判断可能なデータが存在しないため、独自の方法で滞在時間を計測し、それをGA4にイベントとして送信する必要があります。

滞在時間が含まれていると解析しやすいイベントとしてpage_viewイベントがまず挙がるかと思いますが、page_viewイベントは「ページが読み込まれた際」の発火となり、ここから何秒滞在するか読み込み時点では当然分からないため、何か別のイベントに滞在時間を付与しておく必要があります。

ですので"page_leave"という名前の「ページが変わった際（履歴の変更時）に発火する、滞在していたページのURLと滞在時間をもつイベント」を作成する形での計測が良いかと考えます。こちらを実装する場合はまずは以下のどちらかのアプローチが考えられます。
どちらかを行った後、GTMでのイベント設定を行う形です。

サイト開発者に協力してもらう場合

1. SPAのルートコンポーネントがレンダーされる前に、以下を実行してもらうように改修してもらう

window.dataLayer.push({ 
  previousTime: window.performance.now(),
  elapsedTime: undefined
});

2. SPAで設定したルーターもしくはHistoryAPIを用いる処理内で、historyの変更"前"に以下を発火してもらう

{
  const previousTimeLayer = window.dataLayer.reverse().find(function(layer) {
    return typeof layer === 'object'
      && Boolean(layer.event)
      && layer.event === 'gtm.historyChange';
  });

  const currentTime = window.performance.now();

  window.dataLayer.push({ 
    previousTime: currentTime,
    elapsedTime: Math.floor((currentTime - previousTimeLayer.previousTime) / 1000),
  });
}

GTMのみで実装する場合

1. 以下のHTMLをカスタムHTMLとして「initialization」トリガーで「対象のSPAサイト内でのみ」実行

<script>
(function(){
  window.dataLayer.push({
    previousTime: performance.now()
  });

  window.dataLayer._originalPush = window.dataLayer.push;

  window.dataLayer.push = function(args) {
    try {
      var isHistoryChange = args.event && /^gtm.historyChange$/.test(args.event);
      if (isHistoryChange) {
        var previousLayer = window.dataLayer.reverse().find(function(layer) {
          return Boolean(layer.previousTime);
        });

        var currentTime = performance.now();

        args = Object.assign(args, {
          previousTime: currentTime,
          elapsedTime: Math.floor((currentTime - previousLayer.previousTime) / 1000)
        });
      }
    } catch (error) {
      console.error(error);
    } finally {
      return window.dataLayer._originalPush(args);
    }
  }
})();
</script>

ただこちら後述の「GTMのみで実装」の場合、これはGTMの本来の動作を独自に上書きしたものとなります。そのため、基本的には非推奨となり、どうしても開発元に依頼が難しい場合のみ利用ください。（この方法を利用したことによる損害に関しては、このブログの運営主体 and,a株式会社、ならびに筆者の中田吉彦は一切関知できませんので、ご了承ください。）

あとはGTM側で設定を行います。

GTM変数を作成する

まず事前に定義した"page_leave"イベントに必要な以下を取得する変数を作成します。

- 滞在時間
変数タイプ: データレイヤーの変数
変数名: elapsedTime
バージョン: 2

- その滞在時間となったページのURL
変数タイプ: データレイヤーの変数
変数名: gtm.oldUrl
バージョン: 2

GTMトリガーを作成する

SPAなので「履歴の変更」トリガーを用います。

- 作成するトリガー
トリガータイプ: 履歴の変更
発生場所: 全ての履歴の変更

イベントタグを作成する

最後にpage_leaveに変数を紐付けて、イベントをGA4で計測します。

- 作成するイベントタグ
タグの種類: GA4イベント
測定ID: 利用中のGA4ID
イベント名: page_leave

イベントパラメータ1
パラメータ名: elapsed_time
値: 先ほど作成した滞在時間変数

イベントパラメータ2
パラメータ名: page_location
値: 先ほど作成したページURL変数

今回の記事は以上となります。

弊社ではGTMセミナーも随時開催しておりますので、そちらもぜひご利用いただけますと幸いです。