SPAサイトへの導入手順

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

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

手順の概要

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

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

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

「グローバルナビゲーション > アカウント/設定　(最下部のアイコン) > 現在のプロジェクト > タグ設定」から、タグ設定画面を開きます。

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

  • 計測タグv1の場合

null

※計測タグv1のSPA関連オプションについての詳細は tracker.initのリファレンス をご覧ください。

  • 計測タグv2の場合

null

※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イベント発生時のハンドラ 内で、設定したイベントハンドラの削除をしてください
    削除しない場合はメモリリークする場合があります