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

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

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

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

非SPAサイトに通常の計測タグを設置した場合
KARTEの通常の計測タグでは、ブラウザのページ読み込み時に次の処理が自動で実行されます。

  • 閲覧（view）イベントの送信
  • 表示アクションの切り替えスクリーンショット 2020-07-31 13.08.49

SPAサイトに通常の計測タグを設置した場合
一方、SPAサイトではページ遷移をしてもブラウザのページ読み込みが発生しません。
それにより、次の問題が発生します。

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

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

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

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

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

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

1. SPAオプション付きの計測タグ
GTM画面にてタグを作成し、「SPAオプション付きの計測タグ」をGTMから配信します。

  1. タグの設定

    • 「タグの種類」を「カスタム HTML」に設定します
    • 「HTML」には タグ設定画面 で確認できるKARTEプロジェクト専用の計測タグをコピーし、貼り付けます
      カスタマイズのSPAモードを選択されていることを確認してください。
      spatag
    • 「詳細設定」をクリックし、タグ配信の優先度を設定します
      KARTEの他のタグ実行に必要なので、十分に高い数値（10など）を設定してください。SPA版KARTE計測タグ

  2. トリガー
    トリガータイプは ページビュー を指定します。
    ※ KARTEで計測したくないページがある場合は、条件を追加し除外してください。

    スクリーンショット 2020-07-31 13.48.44

2. tracker.view()タグ
GTM画面にてタグを作成し、「tracker.view()タグ」をGTMから配信します。

  1. タグの設定

    • 「タグの種類」を「カスタム HTML」に設定します
    • 「HTML」には次のようなタグを設定します
      <script type="text/javascript">
tracker.view();
</script>
    • 「詳細設定」をクリックし、タグ配信の優先度を設定します
      「SPAオプション付きの計測タグ」の後に実行されるように、より低い数値を設定してください。

  2. トリガー
    トリガータイプは 履歴の変更 を指定します。
    URLの変更を伴うすべての仮想的なページビューをトラッキングする場合は「すべての履歴の変更」を選択します。
    ※ KARTEで計測したくないページがある場合は、条件を追加し除外してください。

    スクリーンショット 2020-07-31 13.50.49

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

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

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

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

よくある質問

SPAのページと通常ページが混在している場合はどのようにすればいいですか？

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

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

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