SPAサイトへの導入手順

KARTE計測タグ設置サイトがSPAである場合、通常の計測タグ設置とは異なり、本ページで紹介する手順で設置する必要があります。

SPAサイトで特別な対応が必要な理由については SPAサイトでの特別な計測タグ設置をご参照ください。

手順の概要

タグ設定画面で、SPAモードをONに設定し、計測タグを取得します
SPA対応が必要な全てのページの読み込み時に、SPA対応済みの計測タグを設置します
仮想的なページビューの発生時に、毎回viewイベントタグが実行されるようにします

※設置する計測タグ自体はSPAモードのON/OFFに依らず同一です

1. タグ設定画面で、SPAモードを有効に設定し、計測タグを取得

KARTEのタグ設定画面を開きます。

その後、SPAモードを有効にしてタグを発行/保存します。

null

2. SPA対応が必要な全てのページの読み込み時に、SPA対応済みの計測タグを設置

通常サイトと同様に、KARTEの計測対象である全てのページについて、読み込み時に「SPA対応済みの計測タグ」が実行されるようにタグ設置します。

3. 仮想的なページビューの発生時に、毎回viewイベントタグを実行

KARTEの計測タグには、ブラウザのページ読み込み時に自動で閲覧（view）イベントを発生させる機能があります。
ただし、SPAサイトの場合は仮想的なページ遷移時に明示的にviewイベントを発生させる必要があります。

SPAサイトの仮想的なページ遷移時に、毎回次のようなviewイベントタグが実行されるようにしてください。

krt('send', 'view');

具体的なコードの埋め込み箇所については、SPAの実装および使用しているフレームワーク(Vue.js, Angular, jQuery-mobileなど)に依存します。
多くの場合フレームワークのルータには、ルーティング完了時にコードを実行するためのイベント・ハンドラの設定があります。その中でviewイベントタグを実行するようにして下さい。

※Googleタグマネージャーを導入しているサイトの場合は、トリガーに「履歴の変更」を指定してviewイベント発火用のタグを配信することで、サイト側の実装を変更せずにSPA対応が完了する可能性があります。ただしSPAサイトの実装によっては、この方法では仮想的なページ遷移時にGTMのタグがトリガーされない場合もあります。検証の上、問題なければご利用ください。

SPAサイトへの導入時の注意点

viewイベントタグの実行タイミング

viewイベントタグの実行タイミングが早すぎる場合、次のようにKARTE側との連携が意図に反する結果になることがあります。

仮想的なページ遷移が完全に完了する前にviewイベントタグを実行した場合、1ページ前のタイトルがviewイベントで連携されてしまうことがあります
widgetが完全に閉じる前にviewイベントタグを実行した場合、アニメーションの間は、「排他なアクションが実行中」であるとみなされ、次のアクションが配信された場合も表示されないことがあります

回避するためには、viewイベントタグの実行タイミングを遅らせるなどタグ実装を調整して下さい。

ブラウザのURLやタイトルが変わらないケースへの対応

通常のSPAサイトでは、仮想的なページ遷移が行われると、ブラウザに表示されるURLやページタイトルも変更されます。

そのため、viewイベントタグを実行した際、KARTE側に連携されるURLやページタイトルはその値を自動で取得しています。

万が一、サイト側のSPA実装の問題で仮想的なページ遷移時にブラウザに表示されるURLやページタイトルが変わらない場合であっても、KARTEのviewイベントに格納されるURLやページタイトルのフィールドを独自に上書きすることはできません。

ただし、次のようにviewイベントに独自のフィールドを追加することは可能です。

krt('send', 'view', {custom_title: 'カスタムタイトル', custom_url: 'https://example.com/custom_url'});

イベントハンドラの削除

配信する接客アクション内（widget）のJavaScriptでイベントハンドラの設定を行った場合、widget内のdestroyedイベント発生時のハンドラ内で、設定したイベントハンドラの削除をしてください
削除しない場合はメモリリークする場合があります

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