SPA（Single Page Application）は、1つのページ内で動的な要素書き換えを行ない、素早くページコンテンツを切り替える手法で構築された、複数の仮想的なページからなるサイト、あるいはWebアプリケーションを指します。
通常のページ遷移が行われないため、通常の計測タグの埋め込み方法では正常な閲覧イベントの計測が行えず、配信にも制約が生じます。
この記事では、SPAサイトで通常サイトと同様の計測および配信を実現する方法について取り扱います。
SPAサイトで特別な対応が必要な理由
KARTEの通常の計測タグでは、ページロード時にのみページの閲覧情報を取得しています。また、アクションの配信も基本的にはページ閲覧情報をトリガーに配信されます。
そのため、ページロードが初期読み込み時にしか発生しないSPAサイトにおいては、通常のタグ設置のみでは初期読み込み時にしかページ閲覧情報の計測やアクションの配信が行われないなどの問題が発生します。
SPAサイトへの導入手順概要
SPAサイトにおいてKARTEを正常に動作させるためには、以下の作業が必要となります。
- 計測タグをカスタマイズする(tracker.init)
- 仮想的なページ遷移をトラッキングするタグを作成する(tracker.view)
- カスタマイズした計測タグを、ページ読み込みをトリガーに発火する
- tracker.view()タグを、仮想的なページ遷移時をトリガーに発火する
1. 計測タグをカスタマイズする(tracker.init)
KARTEの通常の計測タグ内には、tracker.init("API_KEY")というメソッド呼び出しが含まれています。（API_KEYの部分には、実際にはKARTEプロジェクトのAPIキーが入ります。）
この第2引数にオプションを追加することで、SPAに対応した挙動に変更することができます。
通常の計測タグのtracker.init()
tracker.init("API_KEY");SPAサイト用にカスタマイズしたtracker.init()の例
tracker.init("API_KEY", {
spa_mode: {
reset_past_actions: true,
close_actions: true
}
});オプションの詳細は、以下の通りです。
| name | default | recommended in SPA | description |
|---|---|---|---|
| spa_mode | false |
Object | trueもしくはObjectのとき、SPAモードとして振る舞い、tracker.view()実行時にアクションの実行履歴をリセットする。Objectを設定した場合、tracker.view()実行時のデフォルト・オプションを指定することが可能 |
| spa_mode.reset_exclusive_action | true |
true |
同時配信NGなwidgetを再実行できるようにする。施策が実行中である場合は無効。例えばtureの場合同時配信NGな接客（A,B）があった場合最初のページ読み込みでAが配信、仮想的なページ遷移をした場合Bが配信される。「モーダル表示時にviewを計測したい」などの特殊な場合以外は、trueを設定。 |
| spa_mode.reset_past_actions | false |
true |
action毎の再実行禁止を解除。trueにすると1PV中に複数回接客表示できる。 |
| spa_mode.close_actions | false |
true |
tracker.view()実行時に、開いているアクションを閉じる |
2. 仮想的なページ遷移をトラッキングするタグを作成する(tracker.view)
tracker.view()を実行することで、ページ閲覧情報の計測を実施することができます。
通常の計測タグの実行時には、tracker.view()が暗黙的に実行され、ページ閲覧情報の計測が自動で行われますが、
SPAサイトの場合は、仮想的なページ遷移時に、明示的にtracker.view()を実行する必要があります。
通常は引数無しで、以下のようなタグを実行します。
tracker.view();引数を指定した場合の仕様は以下です。
| No. | name | type | description |
|---|---|---|---|
| 1 | data | object | viewイベントに追加で含めたい任意のデータ。 ※設定しない場合も、計測タグでトラッキングされるデータと同様のデータはデフォルトで送られる |
| 2 | options | object | tracker.init()の第2引数内のspa_modeプロパティと同様のObjectを渡すことで、オプションを上書きする |
3. カスタマイズした計測タグを、ページ読み込みをトリガーに発火する
手順1で作成した「カスタマイズ済み計測タグ」を、ページ読み込みをトリガーに発火するようにします。
この手順は、通常の計測タグの設置方法と同じです。
4. tracker.view()タグを、仮想的なページ遷移時をトリガーに発火する
手順2で作成した「tracker.view()タグ」を、SPAの仮想的なページ遷移時に毎回発火するようにします。
具体的なコードの埋め込み箇所については、SPAの実装・および実装する際に使用しているフレームワーク(Vue.js, Angular, jQuery-mobileなど)に依存します。
多くの場合フレームワークのルータには、ルーティング完了時にコードを実行するためのイベント・ハンドラの設定があります。その中でtracker.view()を実行するようにして下さい。
仮想的なページ遷移が完全に完了する前にtracker.view()を実行した場合、1ページ前のタイトルが表示されてしまうなど、意図せぬ挙動になる場合がありますので注意してください。
GTMを使ったタグの設置
GTMをご利用の場合、一般的には以下のようにタグを配信します。
計測タグの配信
tracker.init()をSPA用にカスタマイズしたKARTEの計測タグ（本記事参照）を用意します- (1)を配信するためのGTMタグを作成します
- 「ページビュー」をトリガーに、(2)のGTMタグを配信します
tracer.view()の配信
tracker.view()を配信するためのGTMタグを作成します- SPAでのページ切り替え時にGTMのdataLayerへeventをpushするための処理をサイト側で実装します
- (2)のeventをトリガーに、(1)のGTMタグを配信します
SPAサイトへの導入時の注意点
- webpopupのクローズのアニメーションの間は、「排他なアクションが実行中」であるとみなされます。
- その間に
tracker.view()へのレスポンスとして次のアクションが配信された場合も、そのアクションは無視されます。 - widgetでイベントハンドラの設定を行った場合、widget内のdestroyedイベント発生時のハンドラ内で、設定したイベントハンドラの削除をしてください
- 削除しない場合はメモリリークする場合があります