※ この記事は、基礎的なWeb技術への理解を前提として書かれています。

SPA(Single Page Application)は、1つのページ内で動的な要素書き換えを行ない、素早くページコンテンツを切り替える手法で構築された、複数の仮想的なページからなるサイト、あるいはWebアプリケーションを指します。

通常のページ遷移が行われないため、通常の計測タグの埋め込み方法では正常な閲覧イベントの計測が行えず、配信にも制約が生じます。

この記事では、SPAサイトで通常サイトと同様の計測および配信を実現するための方法について取り扱います。

※ SPAはその名が示すとおりブラウザ上で動作するアプリケーション(プログラム)です。多くの場合サイト側のシステム改修が必要であり、具体的な対応方法についてはサポートしかねる点はご理解下さい。

SPAサイトにおけるKARTEの標準動作

KARTEは画面のロードが発生する度に読み込まれる計測タグによって、そのページの計測情報を取得しています。
そのため、ページのロードが初期読み込み時にしか発生しないSPAサイトにおいては、通常のタグ設置のみでは初期読み込み時にしか計測及び配信が行われません。

SPAサイトへの導入にあたって必要になる対応

SPAサイトにおいてKARTEを正常に動作させるためには、主に2つの作業が必要となります。

  1. 仮想的なページ遷移のトラッキング
  2. アクションの再実行についての制御オプション追加

1. 仮想的なページ遷移のトラッキング(閲覧イベントの明示的な送信)

SPAサイトに通常通りKARTEの計測タグのみを設置した場合は、画面の初期ロード時のみページの読み込み閲覧イベントが送信されます。

SPAサイトで仮想的なページ遷移時にも閲覧イベントを計測させたい場合は、通常の計測タグに加え、仮想的なページ遷移が完全に完了した直後に下記のコードを実行することにより、KARTE側に「ページのロードが発生した」状態と同じ閲覧イベントを送信することができます。

Syntax:

tracker.view(data, options);

Arguments:

name type default description
data object {} viewイベントで送りたい任意のデータ。最終的なデータの送信はtracker.track(‘view’, data)を通じて送られます。
options object {} 設定可能なオプションの一覧

このコードの実行によりKARTEサーバにデータが送信され、計測および配信の判定が行われます。

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

仮想的なページ遷移が完全に完了する前にtracker.view()を実行した場合、例えば、タイトルが書き換わる前に実行されてしまうと、1ページ前のタイトルが表示されてしまうなど、意図せぬ挙動になる場合がありますのでご注意下さい。

2. アクションの再実行についての制御オプション追加

SPAのページ遷移をトリガにして施策を実行したい場合に制御オプションの追加が必要になります。

KARTEサーバは、計測データの送信に対して施策の実行要求を応答として返します。
通常の計測であれば応答のとおりに施策が実行されますが、例えば、正常な配信を保証するために同一ページ内でのアクションの実行・再実行について制限を設けており、SPAサイトにおいてはこの制限を調整する必要が生じます。

この調整はtracker.init()と、tracker.view()のオプションを設定することで行います。

tracker.init()の設定

計測タグ上のtracker.init()にspa_modeというオプションを設定することで、tracker.view()実行時に、既に実行済み施策の状態をリセットする事ができます。(後述のtracker.view()へのオプションを有効化するためにも必要です)

name type default description
spa_mode boolean or Object false true(もしくはObject)の時、SPAモードとして振る舞う。tracker.view()実行時に、アクションの実行履歴のリセットが行われるようになる。オブジェクトを設定した場合、tracker.view()のオプションのデフォルト値となる(後述)

通常の計測タグは末尾にて下記形式でtracker.init()を呼び出していますが、

tracker.init("API_KEY");

spa_modeオプションを有効にする際には、下記形式で設定します。

tracker.init("API_KEY", {
  spa_mode:true
});

オブジェクトを指定した場合については後述します。(詳細な動作制御を行いたい場合に有効です)

tracker.view()のオプション(第2引数)

例えば、KARTEでは「同一のページで、同じ施策は一度しか実行されない」という制限が設定されています。

この制限は、tracker.init()のオプションでspa_modeを有効にした上で、仮想ページ遷移時に発生させるtracker.view()に、次のような形でオプションを渡すことで制御できます。

tracker.view(null, {
  reset_past_actions: true
});

※GTMなどのタグマネージャーをご利用の場合、画面切り替えにEventなどを設定いただき、それをトリガーにtracker.view()のタグを実行いただく必要があります。詳しくはお使いのタグマネージャーのサポートドキュメントをご確認ください。

設定可能なオプションの一覧

name default description
reset_exclusive_action true webpopup, exclusiveなwidgetを再実行できるようにする。施策が実行中である場合は無効。「モーダル表示時にviewを計測したい」などの特殊な場合を除いて、SPAサイトではtrueを推奨
reset_past_actions false action毎の再実行禁止を解除
close_actions false 開いているアクションを閉じる

またtracker.init()に下記の方法でオプションを設定することで、tracker.view()実行時のデフォルト値を変更することができます。

tracker.init("API_KEY", {
  spa_mode: {
    reset_past_actions: true,
    close_actions: true
  }  
});

制限事項

  • webpopupのクローズのアニメーションの間、「排他なアクションが実行中」であるとみなされます。
    • その間にtracker.view()等の応答で次のアクションが配信された場合も無視されます。
  • widget-v2でイベントハンドラの設定を行った場合、widget.method('destroyed', function(){/* ... */})からイベントハンドラの削除を推奨します。
    • 削除しない場合はメモリリークの可能性が生じます。