同一URLでのテスト実施について – Kaizen Platform(サイト改善) ヘルプセンター

概要

このページでは、「URLは同じだが、内容の違うページがある。ページの中身によってテストを分けたいもしくは、片方はテストを実行したいが、もう片方ではテストを実行したくない」といった場合の解決法をご案内します。

方法は大きく分けて3つあり、上から順に簡単なものとなります。

方法1: 実行条件で切り分ける
方法2: ページに識別可能な変数を設定する
方法3: HTML要素を使って制御する

方法1: 実行条件で切り分ける

URLが同じ場合でも、実行条件が異なる場合は、同一URLのページにおいていくつでもテストの実施が可能です。

例1: 同じURLが対象でも、エクスペリエンスAはPCが対象、エクスペリエンスBはSPが対象

「エクスペリエンスA」の実行条件

「エクスペリエンスB」の実行条件

例2: 同じURLが対象でも、エクスペリエンスAはcookie「login」を持つユーザーが対象、エクスペリエンスBはcookie「login」を持たないユーザーが対象

「エクスペリエンスA」の実行条件

「エクスペリエンスB」の実行条件

方法2: ページに識別可能な変数を設定する

実行条件に利用できそうな値がない場合、新たに変数を設定することで、実行条件として利用できます。

※ある程度、JavaScriptにご理解のある方による閲覧・実装を推奨しております。

例: 同じURLが対象でも、エクスペリエンスAは変数「kzpageID」の値が「1」のページが対象、エクスペリエンスBは変数「kzpageID」の値が「2」のページが対象

1. 変数を設定する

それぞれのページに、下記のようなscriptタグを設置する必要があります。
なお、変数名や値に日本語を利用すると、バグが起きる可能性があります。「数値 (Integer)」「 文字列 (String)」を使うようにしてください。

また、既にwindow変数などで識別できる変数が存在する場合は、次の「2. 実行条件を設定する」の手順をご参照ください。

エクスペリエンスAの対象としたいページ

//1.ページ識別用javascript 他の変数と被らないように、「kz(=kaizen)」などをつけるのがおすすめです
<script type="text/javascript">
 var kzpageID = 1;
</script>
// 2.ページ識別用Scriptが読み込まれた後にKaizenPlatformのJavaScriptコードを読み込み
<script src="https://cdn.kaizenplatform.net/X/YY/123456789.js?kz_namespace=kzs" charset="utf-8"></script>

エクスペリエンスBの対象としたいページ

//1.ページ識別用javascript 他の変数と被らないように、「kz(=kaizen)」などをつけるのがおすすめです
<script type="text/javascript">
  var kzpageID = 2; 
</script>
// 2.ページ識別用Scriptが読み込まれた後にKaizen Tagを読み込み
<script src="https://cdn.kaizenplatform.net/X/YY/123456789.js?kz_namespace=kzs" charset="utf-8"></script>

2. 実行条件を設定する

実行条件で「JavaScript変数」を選択し、変数名と値を設定してください。

エクスペリエンスAの実行条件

エクスペリエンスBの実行条件

方法3: HTML要素を使って制御する

実行条件で切り分けを行うことのできる情報がない場合、エクスペリエンススクリプトを利用して、同じURLで異なる内容のページに対して、片方ではテストを実行し、片方ではテストを実行しない、といった処理が可能です。

この項目では、HTML要素をキーとして、テストの実行を制御する例を記載しています。

※ある程度、HTMLとJavaScriptにご理解のある方による閲覧・実装を推奨しております。

エクスペリエンススクリプトとは

「エクスペリエンス > 詳細設定」の最下部にある、JavaScriptを記述できる項目です。

エクスペリエンススクリプト利用上の注意

エクスペリエンススクリプトに記述したJavaScriptは、そのエクスペリエンスが実行されるページにて、Kaizen対象外ユーザー・オリジナル案・デザイン案全てに実行されます。
思わぬ不具合に繋がる可能性がありますので、十分に動作確認をしてから記述をしてください。
なお、ご利用は自己責任にてお願いいたします。
エクスペリエンススクリプトは使用方法を誤ると、デザインが反映されない・計測ができない等の問題が発生する可能性があります。
JavaScriptコードステータスを活用するを参考に、エクスペリエンススクリプトを設定した後に計測ができているか、必ず確認してください。
ここではサンプルコードを公開していますが、より複雑なコードの提供や、お客様のページに合わせたコードの提供は、サポート対象外となっております。ご了承ください。
エクスペリエンススクリプトは、テスト対象が「ページ修正（スプリットURL）」の場合、動作しません。

エクスペリエンススクリプトを記述するための準備

今回の例では、下記のような条件とします。

ログイン前とログイン後で、URLが同じページである
ログイン後のみ、ABテストを行いたい
ログイン前後で、URLは同じだが、HTML要素に違いがある

これをエクスペリエンススクリプトにて、JavaScriptで表現するために、下記の手順が必要です。

1. 同一URLのページを見比べ、違いを見つける
2. 要素を見比べる
3. 見つけた要素が固有のものかを確認する
4. エクスペリエンススクリプトに落とし込む

1. 同一URLのページを見比べ、違いを見つける

ここではブラウザは、Google Chromeを使用します。

今回デモのために、架空の通販ページをご用意しました。
※架空の通販ページのため、実際にお買い物することはできません。また、動作するリンクはログイン/ログアウトと一部存在する商品のリンクのみとなっており、本物のログイン機能は実装されておりません。

今回、ログイン後のみ、ABテスト対象としたいのですが、このページでは、ログイン前もログイン後もURLが同じなので、このままではログインしていないユーザーにもテストが実行されてしまいます。

では、ログイン前とログイン後のページを見比べてみましょう。

ログイン前のページ

ログイン後のページ

ログイン後は、ユーザーの名前が表示されるようになりました。
実際、こういった仕様のページは多いと思います。
このように、見た目でわかる、ページ間の違いを見つけてください。

2. 要素を見比べる

違いを見つけたら、今度はその部分の要素を見比べます。
windowsはF12、macではoption+command+iを押下して、Chromeの検証を開いてください。

該当部分の要素を調べるには、下記の図のように、選択モードを使うと簡単です。

では、ログイン前とログイン後で、ログインボタン部分の要素を見比べてみます。

ログイン前の要素

ログイン後の要素

ログイン後のページでは、「username」というclass名がつけられたspan要素が増えています。
この要素の有無で、テストを実行する/しないを分けられそうです。

3. 見つけた要素が固有のものかを確認する

次に、先ほどログイン後のページで見つけた「username」というclass名が、ログイン前では使われていないことを確認します。
ログイン前のページへ戻り、command+f(windowsはcontrol+f)で要素を検索できるので、「.(ドット)username」でクラスを検索します。(IDを検索するときはID名に「#(シャープ)」をつけます。)

検索結果は「0 of 0」となっているので、ログイン前のページには「username」というclass名を持つ要素が存在しないことがわかりました。

これで、この要素の有無で、テストを実行する/しないを分けることが確実にできるようになりました。

4. エクスペリエンススクリプトに落とし込む

改めて今回のケースを整理すると、

「ログイン後のみ、テストを行いたい＝ページ内に「username」というclass名を持つ要素が存在する時のみテストを行いたい」

となります。

これをエクスペリエンススクリプトで条件分岐すると、こうなります。

return new Promise(function(resolve, reject) {
$(function() {
if ($('.username').length > 0) {
resolve();
} else {
reject();
}
});
});

「.length」は、要素の数を取得します。要素が存在しない場合は「0」になるので、今回は0より大きい場合＝「username」というclass名を持つ要素が存在する場合にテストを実行するコードを書いています。

このコードを「エクスペリエンスの詳細設定 > エクスペリエンススクリプト」に反映させます。
完了したら、「文法をチェックする」ボタンをクリックしてください。
「正しいJavaScriptの文法です」と表示されたら、エクスペリエンス編集画面右上の「保存する」をクリックしてください。

5. ページを確認する

ログイン前とログイン後のページを確認し、ログイン後のページのみでエクスペリエンスが実行されていることが確認できたら、完了です。
実行されているエクスペリエンスは、ラウンドを開始したのに、デザイン案が反映されない時 - 対象ページで、別のエクスペリエンスが実行されていませんか？の手順にてご確認いただけます。

なお、この方法を利用する場合、ログイン前後どちらかにしかテストを実行させることができません。
「実行しない」と判定したログイン前のページでは、他のテストを実行させることはできません。

その他のエクスペリエンススクリプト

参考になりそうな簡単なスクリプトを記載しますので、適宜内容を変更してお使いください。
※エクスペリエンススクリプトは使用方法を誤ると、デザインが反映されない・計測ができない等の問題が発生する可能性がありますので、ご利用は自己責任でお願いします。
※より複雑なコードの提供や、お客様のページに合わせたコードの提供は、サポート対象外となっております。ご了承ください。

//とある要素が存在する時にテスト実行
return new Promise(function(resolve, reject) {
$(function() {
if ($('#username').length > 0) { //'#username'をトリガーにしたい要素名に変えてください
resolve();
} else {
reject();
}
});
});

//とある要素が存在しない時にテスト実行
return new Promise(function(resolve, reject) {
$(function() {
if ($('#username').length === 0) { //'#username'をトリガーにしたい要素名に変えてください
resolve();
} else {
reject();
}
});
});

//とある要素のテキスト(情報)が'example'だったらテスト実行する
return new Promise(function(resolve, reject) {
$(function() {
var kz_text = $('#huga').text(); //'#huga'をテキストをトリガーとしたい要素名に変えてください
kzs.console.log(kz_text); //取得したテキストを確認
if (kz_text == 'example') { //テストを実行したい時のテキストを書いてください
resolve();
} else {
reject();
}
});
});

//とある要素のテキスト(情報)が'example'以外でテスト実行する('example'だった場合は実行しない)
return new Promise(function(resolve, reject) {
$(function() {
var kz_text = $('#huga').text(); //'#huga'をテキストをトリガーとしたい要素名に変えてください
kzs.console.log(kz_text); //取得したテキストを確認
if (kz_text != 'example') { //テストを実行したくない時のテキストを書いてください
resolve();
} else {
reject();
}
};
});

概要