SPAとは
SPA（シングルページアプリケーション）は、React、Vue、AngularJS、Ember、Backbone などのフレームワークで構築され、ページ遷移せずに単一ページでコンテンツが切り替える点を大きな特徴としています。
一般的なDLPOのABテストでは、ページが読み込まれると同時に各タグ発火が開始されますが、以下のように、ページが読み込まれた後に特定の条件で各タグ発火を発動させたいケースがあります。特に、SPAでは、セッションあたりに初回の1度しかページ全体が読み込まれないため、ページ読み込み後の任意のタイミングで各タグ発火を起動することが求められます。
【ページが読み込まれた後に各タグ発火を発動するケース】
- ページのロードが完了した後に、動的に読み込まれるコンテンツで各タグ発火を行う
- URLが変わらない SPA などのフレームワークで構築されたサイトで、フレームワークのイベント発火により各タグ発火を発動させる
実装方法
DLPOにてSPAサイトを対象にテストを実施する際は、ワンコード実装をご利用ください。
ワンコード実装の「エリア」または「コンバージョン」タグを設定する際に、「トリガー条件」を指定することができます。
SPAサイトは、読み込んだページのURLとは異なるURLを表示することができ、表示条件によってURLを変更するケースがあります。その逆として、URLは変更せずに表示内容を切り替える場合もあり、ABテストする際にコンテンツをURL指定することが困難なケースが発生します。
そのため、SPAサイトにてURLが変更されるケースと、URLが変更されないケースを考慮して以下2種類の「トリガー条件」を提供しています。コンテンツの切り替え方法に応じて、適切なトリガー条件を指定してください。
※ワンコード実装の「トラフィック」では「トリガー条件」は指定できません。
※トリガー条件は「即時実行」が初期値となります。「即時実行」はページがロードするたびにタグ発火を起動するケースとなります。通常、静的サイトではページロード(及びリロード)が発生するため、「即時実行」を指定します。SPAサイトでは適さないためご注意ください。
■URL変更時（ページ全体がリロードされなくても、URLが変更されるたびに各タグ発火を起動する）
SPAサイトにてURLが変更されるたびに、設定したURL条件と一致するかを確認し、一致した場合に各タグ発火が起動します。SPAサイトにてURLが変更される場合にご利用ください。
なお、本設定はページロード時には発火しません。ページロード時にも発火させたい場合は、「即時実行」を併用して設定してください。
DLPO管理画面のページ設定＞ワンコード設定より、ワンコード条件登録をクリックしてください。表示されたワンコード条件登録画面にて、設置URL(エリア設置URLまたはコンバージョン設置URL)、マッチング条件に、タグ発火対象となるURL及びマッチング条件を設定してください。トリガー条件は「URL変更時」を選択し、条件名などの必須項目を入力後「完了」をクリックしてください。
図１：「URL変更時」設定イメージ
上図は、SPAサイト「https://dlpo.jp/demo/」にて、表示URLが「https://dlpo.jp/demo/abtest/」に変更された場合にエリアタグが発火しクリエイティブが表示されるケースを想定しています。
■HTML変更時（ページ内の要素が挿入、削除、変更されるたびに各タグ発火を起動する）
設定したURL条件のページにて、ページロード時、もしくはリロードされない場合でもページ内の要素が挿入、削除、変更されるたびに、設定した特定のコンテンツ要素が存在するかを確認し、存在する場合に各タグ発火が起動します。SPAサイトにてURLが変更されない場合にご利用ください。
DLPO管理画面のページ設定＞ワンコード設定より、ワンコード条件登録をクリックしてください。表示されたワンコード条件登録画面にて、HTML(DOM)の変更を確認するページのURL条件を設置URL(エリア設置URLまたはコンバージョン設置URL)、マッチ条件に設定してください。トリガー条件は「HTML変更時」を選択し、表示された「CSSセレクタ」に存在確認対象の要素名を入力してください。要素はカンマ区切りにて複数指定可能です。その後、条件名などの必須項目を入力後「完了」をクリックしてください。
図２：「HTML変更時」設定イメージ
上図は、SPAサイト「https://dlpo.jp/demo/」にて、HTML(DOM)が変更した際に要素「#conversion_1」が存在する場合に、コンバージョンタグが発火しコンバージョンポイントとして計測されるケースを想定しています。