SPA（Single Page Application）は、1つのページ内で動的な要素書き換えを行い、ブラウザのページ読み込みを伴わない仮想的なページ遷移を実現しているようなサイトやWebアプリケーションを指します。
通常のページ遷移が行われないため、KARTEの計測タグ設置についても特別な対応が必要になります。場合によっては、サイト側の改修が発生する可能性があります。
SPAサイトで特別な対応が必要な理由
SPAサイトでは、その特性上、KARTEの計測タグの設置に特別な対応が必要になります。
非SPAサイトに通常の計測タグを設置した場合
KARTEの通常の計測タグでは、ブラウザのページ読み込み時に次の処理が自動で実行されます。
- 閲覧（view）イベントの送信
- 表示アクションの切り替え
SPAサイトに通常の計測タグを設置した場合
一方、SPAサイトではページ遷移をしてもブラウザのページ読み込みが発生しません。それにより、次の問題が発生します。
- ページ遷移時にviewイベントが発生しない
- 表示済みのKARTEのアクションがページ遷移後も閉じずに残り続ける
- ページ遷移をトリガーに配信したいアクションが配信されない
SPAサイトにSPA対応の計測タグを設置した場合
SPAサイト向けの特別な方法で計測タグを設置することで、仮想的なページビュー発生時にもKARTEにviewイベントを送信できます。これによって、通常のサイトと同様に閲覧のトラッキングやアクションの表示制御をすることができます。
GTMを利用したSPAサイトへの計測タグ導入手順
サイトにGoogleタグマネージャーが導入済みの場合、サイト改修無しでKARTE計測タグの設置が完了する可能性があります。ただしSPAサイトの実装によっては、GTMのみを使った方法では仮想的なページ遷移時にGTMのタグがトリガーされない場合もあります。検証の上、問題なければご利用ください。
SPAサイトにKARTEを導入するためには、まず次の2つのタグを配信する必要があります。
- SPAオプション付きの計測タグ
- tracker.view()タグ
SPAオプション付きの計測タグ
1つ目の「SPAオプション付きの計測タグ」を、次の手順でGTMから配信します。
タグの内容
KARTEのタグ設定画面で取得した通常の計測タグを、SPAサイト用のオプションが追加された形にカスタマイズする必要があります。JavaScriptをいじる必要があるので、JavaScriptの知識がある方が作業を実施してください。
まず、「タグ設定画面」を開いてお使いのKARTEプロジェクト専用の計測タグを手元のエディタ等にコピーします。
次に、SPAサイト用のオプションを追加します。具体的には、コピーした計測タグ内のtracker.init()というメソッド呼び出し部分のみを、次のように書き換えます。
before
tracker.init("API_KEY");after
tracker.init("API_KEY", {
spa_mode: {
reset_past_actions: true,
close_actions: true
}
});※ API_KEYの部分には、実際にはKARTEプロジェクトのAPIキーが入ります。
※その他のオプションと併用する場合、既存のオプション指定を削除しないよう注意してください。
書き換えが終わったら、tracker.init()部分を書き換えた計測タグ全体をGTMでカスタムHTMLとして配信します。
トリガーの設定All Pages（すべてのページビュー）を指定します。
※KARTEで計測したくないページがある場合は、条件を追加し除外してください。
タグ配信の優先度
KARTEの他のタグ実行に必要なので、十分に高い数値（10など）を設定してください。
tracker.view()タグ
2つ目の「tracker.view()タグ」を、次の手順でGTMから配信します。
タグの内容
カスタムHTMLで、次のようなタグを配信します。
<script type="text/javascript">
tracker.view();
</script>トリガーの設定
「履歴の変更」を指定します。URLの変更を伴うすべての仮想的なページビューをトラッキングする場合は、「すべての履歴の変更」を選択します。
※KARTEで計測したくないページがある場合は、条件を追加し除外してください。
タグ配信の優先度
「SPAオプション付きの計測タグ」の後に実行されるように、より低い数値を設定してください。
サイト改修が必要なケース
次のような場合は、サイト改修が必要です。サイト構築を担当しているエンジニアの方に作業をご依頼ください。
- GTMが導入されていない場合
- GTMが導入されているが、「履歴の変更」トリガーが意図通りに発火しない場合
エンジニア向けの計測タグ設置方法ドキュメントは下記です。