SPA（Single Page Application）は、1つのページ内で動的な要素書き換えを行い、ブラウザのページ読み込みを伴わない仮想的なページ遷移を実現しているようなサイトやWebアプリケーションを指します。

通常のページ遷移が行われないため、KARTEの計測タグ設置についても特別な対応が必要になります。場合によっては、サイト側の改修が発生する可能性があります。

SPAサイトで特別な対応が必要な理由

SPAサイトでは、その特性上、KARTEの計測タグの設置に特別な対応が必要になります。

非SPAサイトに通常の計測タグを設置した場合

KARTEの通常の計測タグでは、ブラウザのページ読み込み時に次の処理が自動で実行されます。

  • 閲覧（view）イベントの送信
  • 表示アクションの切り替え

null

SPAサイトに通常の計測タグを設置した場合

一方、SPAサイトではページ遷移をしてもブラウザのページ読み込みが発生しません。それにより、次の問題が発生します。

  • ページ遷移時にviewイベントが発生しない
  • 表示済みのKARTEのアクションがページ遷移後も閉じずに残り続ける
  • ページ遷移をトリガーに配信したいアクションが配信されない

null

SPAサイトにSPA対応の計測タグを設置した場合

SPAサイト向けの特別な方法で計測タグを設置することで、仮想的なページビュー発生時にもKARTEにviewイベントを送信できます。これによって、通常のサイトと同様に閲覧のトラッキングやアクションの表示制御をすることができます。

null

GTMを利用したSPAサイトへの計測タグ導入手順

サイトにGoogleタグマネージャーが導入済みの場合、サイト改修無しでKARTE計測タグの設置が完了する可能性があります。ただしSPAサイトの実装によっては、GTMのみを使った方法では仮想的なページ遷移時にGTMのタグがトリガーされない場合もあります。検証の上、問題なければご利用ください。

SPAサイトにKARTEを導入するためには、まず次の2つのタグを配信する必要があります。

  • SPAオプション付きの計測タグ
  • tracker.view()タグ

SPAオプション付きの計測タグ

1つ目の「SPAオプション付きの計測タグ」を、次の手順でGTMから配信します。

タグの内容
KARTEのタグ設定画面で取得した通常の計測タグを、SPAサイト用のオプションが追加された形にカスタマイズする必要があります。JavaScriptをいじる必要があるので、JavaScriptの知識がある方が作業を実施してください。

まず、「タグ設定画面」に遷移します。カスタマイズのSPAモードを選択し、KARTEプロジェクト専用の計測タグをコピーします。

null

コピーした計測タグ全体をGTMでカスタムHTMLとして配信します。

トリガーの設定
All Pages（すべてのページビュー）を指定します。

※KARTEで計測したくないページがある場合は、条件を追加し除外してください。

タグ配信の優先度
KARTEの他のタグ実行に必要なので、十分に高い数値（10など）を設定してください。

null

tracker.view()タグ

2つ目の「tracker.view()タグ」を、次の手順でGTMから配信します。

タグの内容
カスタムHTMLで、次のようなタグを配信します。

<script type="text/javascript">
  tracker.view();
</script>

トリガーの設定
「履歴の変更」を指定します。URLの変更を伴うすべての仮想的なページビューをトラッキングする場合は、「すべての履歴の変更」を選択します。

※KARTEで計測したくないページがある場合は、条件を追加し除外してください。

タグ配信の優先度
「SPAオプション付きの計測タグ」の後に実行されるように、より低い数値を設定してください。

null

サイト改修が必要なケース

次のような場合は、サイト改修が必要です。サイト構築を担当しているエンジニアの方に作業をご依頼ください。

  • GTMが導入されていない場合
  • GTMが導入されているが、「履歴の変更」トリガーが意図通りに発火しない場合

エンジニア向けの計測タグ設置方法ドキュメントは下記です。

SPAサイトでの計測タグ設置方法（エンジニア向け） | KARTEサポートサイト

備考

SPAのページと通常ページが混在しているケースへの対応

同一サイトでSPAのページと通常ページが混在している場合の計測タグについては、次のいずれでも問題ありません。

  • 「SPAオプション付きの計測タグ」を、通常ページも含めて全ページに設置する
  • SPAのページに「SPAオプション付きの計測タグ」を、通常ページに「通常の計測タグ」を設置する

ただし、通常ページではtracker.view()を明示的に実行しないようにしてください。