SPAサイトへの導入手順
KARTE計測タグ設置サイトがSPAである場合、通常の計測タグ設置とは異なり、本ページで紹介する手順で設置する必要があります。
SPAサイトで特別な対応が必要な理由については SPAサイトでの特別な計測タグ設置 をご参照ください。
手順の概要
- タグ設定画面で、SPAモードをONに設定し、計測タグを取得します
- SPA対応が必要な全てのページの読み込み時に、SPA対応済みの計測タグを設置します
- 仮想的なページビューの発生時に、毎回viewイベントタグが実行されるようにします
※タグv2の場合、設置する計測タグ自体はSPAモードのON/OFFに依らず同一です
1. タグ設定画面で、SPAモードを有効に設定し、計測タグを取得
KARTEのタグ設定画面を開きます。
その後、SPAモードを有効にしてタグを発行/保存します。
2. SPA対応が必要な全てのページの読み込み時に、SPA対応済みの計測タグを設置
通常サイトと同様に、KARTEの計測対象である全てのページについて、読み込み時に「SPA対応済みの計測タグ」が実行されるようにタグ設置します。
3. 仮想的なページビューの発生時に、毎回viewイベントタグを実行
KARTEの計測タグには、ブラウザのページ読み込み時に自動で閲覧（view）イベントを発生させる機能があります。
ただし、SPAサイトの場合は仮想的なページ遷移時に明示的にviewイベントを発生させる必要があります。
SPAサイトの仮想的なページ遷移時に、毎回次のようなviewイベントタグが実行されるようにしてください。
タグv1の場合
tracker.view();タグv2の場合
krt('send', 'view');具体的なコードの埋め込み箇所については、SPAの実装および使用しているフレームワーク(Vue.js, Angular, jQuery-mobileなど)に依存します。
多くの場合フレームワークのルータには、ルーティング完了時にコードを実行するためのイベント・ハンドラの設定があります。その中でviewイベントタグを実行するようにして下さい。
※Googleタグマネージャーを導入しているサイトの場合は、トリガーに「履歴の変更」を指定してviewイベント発火用のタグを配信することで、サイト側の実装を変更せずにSPA対応が完了する可能性があります。ただしSPAサイトの実装によっては、この方法では仮想的なページ遷移時にGTMのタグがトリガーされない場合もあります。検証の上、問題なければご利用ください。
SPAサイトへの導入時の注意点
viewイベントタグの実行タイミング
viewイベントタグの実行タイミングが早すぎる場合、次のようにKARTE側との連携が意図に反する結果になることがあります。
- 仮想的なページ遷移が完全に完了する前にviewイベントタグを実行した場合、1ページ前のタイトルがviewイベントで連携されてしまうことがあります
- widgetが完全に閉じる前にviewイベントタグを実行した場合、アニメーションの間は、「排他なアクションが実行中」であるとみなされ、次のアクションが配信された場合も表示されないことがあります
ブラウザのURLやタイトルが変わらないケースへの対応
通常のSPAサイトでは、仮想的なページ遷移が行われると、ブラウザに表示されるURLやページタイトルも変更されます。
そのため、viewイベントタグを実行した際、KARTE側に連携されるURLやページタイトルはその値を自動で取得しています。
万が一、サイト側のSPA実装の問題で仮想的なページ遷移時にブラウザに表示されるURLやページタイトルが変わらない場合であっても、KARTEのviewイベントに格納されるURLやページタイトルのフィールドを独自に上書きすることはできません。
ただし、次のようにviewイベントに独自のフィールドを追加することは可能です。
タグv1の場合
tracker.view({custom_title: 'カスタムタイトル', custom_url: 'https://example.com/custom_url'})タグv2の場合
krt('send', 'view', {custom_title: 'カスタムタイトル', custom_url: 'https://example.com/custom_url'});イベントハンドラの削除
- 配信する接客アクション内（widget）のJavaScriptでイベントハンドラの設定を行った場合、widget内のdestroyedイベント発生時のハンドラ 内で、設定したイベントハンドラの削除をしてください
削除しない場合はメモリリークする場合があります