Installation procedure on SPA site

When the KARTE tracking tag installation site is SPA, unlike the normal tracking tag installation, it is necessary to install it according to the procedure introduced on this page.

SPAサイトで特別な対応が必要な理由については SPAサイトでの特別な計測タグ設置Please refer to.

Summary of steps

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

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

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

KARTE'sTag setting screenOpen.

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

null

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

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

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

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

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

krt('send', 'view');

The specific code embedding point depends on the SPA implementation and the framework (Vue.js, Angular, jQuery-mobile, etc.) used.
多くの場合フレームワークのルータには、ルーティング完了時にコードを実行するためのイベント・ハンドラの設定があります。その中でviewイベントタグを実行するようにして下さい。

*For sites that have introduced Google Tag Manager, the trigger will be ``Change history」を指定してviewイベント発火用のタグを配信することで、サイト側の実装を変更せずにSPA対応が完了する可能性があります。ただしSPAサイトの実装によっては、この方法では仮想的なページ遷移時にGTMのタグがトリガーされない場合もあります。検証の上、問題なければご利用ください。

Points to note when installing to SPA site

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

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

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

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

Correspondence to the case where the URL and title of the browser do not change

In a normal SPA site, when a virtual page transition occurs, the URL and page title displayed in the browser also change.

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

Even if the URL or page title displayed on the browser does not change during a virtual page transition due to a SPA implementation problem on the site side, the URL or page title field stored in the KARTE view event is unique. Cannot be overwritten with.

However, you can add your own fields to the view event as follows:

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

Delete event handler