[Optimizely Classic]実験のビルド

アクティブ化モード: ページロード後

  • このエントリーをはてなブックマークに追加

デフォルトでは、すべての Optimizely の実験は、Optimizely コードスニペットがページにロードされると直ちに評価されます。つまり訪問者は、ページロードのこの時点で URL と訪問者グループのターゲット設定に一致している必要があります。訪問者が実験に振り分けられたら、対象となる要素が DOM に現れると同時に、その要素を変更する実際のコードが実行されます。

しかし、後の時点まで待ってから実験をアクティブ化したい場合も少なくありませ ん。たとえば、動的にロードされたコンテンツをページに表示する場合には、ページのロードが完了した後で実験をアクティブ化することもできます。これは実験のアクティブ化モードを手動または条件によるアクティブ化に設定することで対応可能です。

注:
手動アクティブ化はすべてのプランタイプで使用できます。条件によるアクティブ化はエンタープライズプランをご利用のお客様専用です。条件によって実験をアクテ ィブ化する場合は、エンタープライズプランへのアップグレードを検討するか、または次に示す回避策を利用してください。

手動モードでの実験は、Optimizely JavaScript Activation API によりアクティブ化さ れます。条件付きモードの実験は、Optimizely が実験をアクティブ化する時点を判断するために評価するコード条件を受け入れます。

手動アクティブ化モードを使用する理由

  • Optimizely API 呼び出しコードはサイトへの配置が容易であり、ネイティブJavaScript 内からアクティブ化を呼び出した方が細かい制御が可能。

  • サイトの設定上、Optimizely のロード後にすべての実験を手動でアクティブ化しなければならない。

  • ページ上で実験をアクティブ化するために特定のアクションを実行する必要が あり、サイトのネイティブコードからでなければそのアクションをキャプチャーできない。

条件によるアクティブ化モードを使用する理由(エンタープライズプランの機能)

  • サイトが単一のページアプリケーションフレームワーク上(Angular.js や Ember.js など)に構築されており、そのフレームワークによってトリガーされるイベントに基づいて実験をアクティブ化したい。

  • 訪問者を実験に振り分けるには、訪問者がその前にページ上で特定のアクショ ンを実行する必要がある(モーダルのトリガー、特定の位置までのスクロー ル、ウィジェットやその他の動的モジュールのアクティブ化など)。

  • ページのロード完了後、長い時間が経過してから発生する AJAX リクエストが あり、その AJAX リクエストによって返される新しいコンテンツに対して変更が必要である。

手動/条件によるアクティブ化が必要であるかどうか

手動アクティブ化または条件によるアクティブ化によって問題が解決するかどうかが わからない場合は、次の兆候が該当するかどうかを確認してください。

  • モーダルで表示され、[次へ] ボタンを使用するマルチステップフォームをテストしているが、新しいページがロードされない。

  • 訪問者が特定のアクションを実行するときにページを再表示するウェブアプリケーションをテストしているが、ページが再ロードされない。

  • e コマースサイトをテストしており、顧客が商品を変更する時点で実験を実行することを希望している。

  • 特定のスクロール深度で表示されるオブジェクトを変更する実験を実行している。

  • 要素が ajaxComplete に依存する AJAX サイトで実験を実行する必要がある。

  • Angular、Backbone、Ember、または Knockout を使用しているサイトで実験を実行している。

実験に必要なのが手動のアクティブ化または条件によるアクティブ化なのかを示す極めて一般的な兆候となるのは、要素に変更を加えたときに、変更がエディターには正しく表示されるのに、実験をライブで実行すると、その変更が表示されない場合です。

以下のような状況です。

  • 訪問者が実験ページにアクセスすると、Optimizely スニペットが直ちに実行さ れ、バリエーションコードの実行を試みます。しかし、新しい要素の表示がま だトリガーされていないので、この要素のためのセレクターはこのページにまだ存在していません。

  • ページにセレクターが見つからないと、Optimizely は要素に変更を加えること
    ができません。

  • 訪問者が要素をトリガーするボタンをクリックするまでに、Optimizely スニペ ットはすでに実行され、セレクターを探そうとする動作をやめてしまっています。

実験のアクティブ化モードを変更する

実験のアクティブ化モードを変更するには、エディターで [オプション] > [アクティ ブ化モード] をクリックします。以下の画像のようなダイアログが表示されます。[手
動] か [条件付き] を選択してください。

1


手動アクティブ化モードの構成

アクティブ化モードを [手動] に変更すると、実験の実行を開始させたいときにページ
上で実行する必要があるコードが少し表示されます。

2


コードのこの行は、Optimizely に実験を手動で実行するよう指示します。

特定のページですべての手動の実験をアクティブ化するには、実験 ID を持つパラメ
ーターを削除し、呼び出しを以下のようにします。
window.optimizely = window.optimizely || []; window.optimizely.push(["activate"]);

この API 呼び出しは、このページの現在の訪問者によりターゲット条件が満たされて いる、すべての実行中の手動の実験をアクティブ化します。以下のようにすれば、実行中の特定の手動の実験をアクティブ化できます。

window.optimizely = window.optimizely || [];

window.optimizely.push(["activate", EXPERIMENT_ID]);

この EXPERIMENT_ID は、この実験の [アクティブ化モード] ダイアログに表示されま
す。

例:
window.optimizely.push(["activate",12345]);
により実験 12345 がアクティ ブになりますが、手動でアクティブにされるように設定された他の実験はアク ティブになりません。ページに Optimizely スニペットがありアクティブ化 API 呼び出し が実施されると、実験を実行する通常のプロセスが開始します。アクティブ化の呼び出し は必要な回数だけ実施することができるので、AJAX を使ってレンダリングされる複数の ページがある場合、新しいコンテンツがロードされるたびに実験を実行することができます。


条件によるアクティブ化モードの構成(エンタープライズプラン)

アクティブ化モードを条件付きに変更するとコード入力ボックスが表示されるので、
いつ実験をアクティブ化するかを判断するために評価されるコード条件をここに入力
します。

このコードボックスは 2 通りの仕方で機能します。それはボックスに入力したコード
のタイプにより決定されます。

  • ポーリングタイプ:入力されたコード条件で、関数として評価されないもの は、ポーリングタイプとして扱われます。Optimizely は 50 ミリ秒ごとにポーリ ングしてこの条件が成り立つかどうかを評価し、真の場合に実験をアクティブ化します。
    3

  • 関数タイプ:関数として評価されるコード条件は、関数タイプとして扱われま す。スニペットがロードされると、入力された関数がすぐに呼び出されます。この関数は、必要に応じて提供されたコールバックを使用して実験をアクティブ化する必要があります。
    4

関数タイプの使用法

条件によるアクティブ化の関数タイプを使用する場合、Optimizely は以下のタイプ定義と共に関数が入力されるものと予期し、アクティブ化関数とオプションオブジェクトを引数として渡します。

/*

 * Conditional Activation Function

 *

 * @param {Function} activate - Activate this experiment

 * @param {Object=} options {

 *                                          isActive : {Boolean} - Current activation status

 *                                          experimentId : {Integer} - This experiment's Id

 *                                      }

 */

function(activate, options) {

  // Do some logic

  if (/* CONDITION */) {

    activate();

}


}

以下は、AJAX 呼び出しが実施された後に関数タイプを使用して実験をアクティブ化
する簡単な例です。デベロッパーサイトには、他の使用例があります。
/*

 * Condition: Activate when an Ajax load contains my element

 *                      and the experiment is not already active

 */

function(activate, options) {

   $(document).ajaxComplete(function(event, xhr, settings) {

        if (xhr.responseText.indexOf('rightRailModule') != -1 &&

             !options.isActive) {

         activate();

        }

     });

 }
 注:
上記のコードは、Optimizely スニペットに完全な jQuery ライブラリーを含めて いる場合に動作します(このオプションはプロジェクトの JavaScript の設定に あります)。スニペットに調整済みバージョンの jQuery を含めたいが、ウェブサイトに ユーザー独自の jQuery が含まれている場合は、window.$(document).ajaxComplete
のように接頭辞 window.を追加して、この機能がウィンドウレベルに及ぶようにしてください。

これは、調整済みバージョンの jQuery(Optimizely スニペットにデフォルトで含まれて いる)には ajaxComplete メソッドが含まれていないためです。このメソッドは完全なjQuery ライブラリーでのみ動作します。

ポーリングまたは関数のどちらのメソッドを使用する必要がありますか。下記を参照
してください。

ポーリングタイプの使用例

  • DOM 要素が出現したときに実験をアクティブ化する。

  • Optimizely スニペットに続いてロードされる JavaScript 変数またはメタデータに基づいて実験をアクティブ化する。

  • 動的に変化する変数または DOM 要素に基づいて実験をアクティブ化する。

関数タイプの使用例

  • 特定の AJAX 呼び出しが返されるたびに実験をアクティブ化する。

  • 単一ページのアプリがページを変更するたびに実験をアクティブ化する。

  • モーダルのポップアップが表示されるたびに実験をアクティブ化する。

注:
複数ページ実験を条件によりアクティブ化する場合、条件によるアクティブ化が確実に各ページで実行されるようにしてください。そうしないと、実験の 1ページでのみアクティブ化されることになります。

サイトのコードへのアクセス権を持たない場合に実験をアクティブ化する

手動のアクティブ化を設定したいのに、サイトのコードへのアクセス権を持っていな いかもしれません。または、エンタープライズ以外のプランで条件によるアクティブ化を設定したい場合、実験をアクティブ化するには回避策が必要です。

手動のアクティブ化呼び出しをサイト上で直接行えない場合、ページを読み込むとき に実行され、アクティブ化呼び出しを望みのイベントに結びつけるブートストラップ 式の実験を用意する必要があります。言い換えれば、実験を利用して手動のアクティ ブ化呼び出しを設定し、次いで 2 つ目の実験を利用してテストしたい変更を加えま
す。


この「ブートストラップ実験」は、以下のように設定します。


1. 手動でアクティブ化される実験を通常通り作成します。

2. トラフィックの 100% が 1 つのバリエーションに割り当てられた新しい実験を
作成します。

3. 新しい実験のURL ターゲット設定と訪問者グループ条件が、必ず元の手動でア クティブ化される実験の条件と一致するようにします。 

4. トラフィックの宛先となるバリエーションで、[コードの編集] ボックス を開
き、元の実験を ajaxComplete でアクティブ化したいのか、クリックイベントでア クティブ化したいのかに応じて、以下のスニペットコードの 1 つをペーストしま
す。

5. クリックイベントにバインドしたい場合、以下のコードを使用します。
//Click Event:

$('SELECTOR').bind('click', function() {

window.optimizely.push(["activate", XXXXXXX]);

});

XXXXXXX は手動でアクティブ化される実験(新しいブートストラップ実験ではな く)の実験 ID で置き換え、SELECTOR はバインドしたい実際のセレクターで置きかえます。

6. ajaxComplete にバインドしたい場合、以下のコードを使用します。


//ajaxComplete:

$(document).ajaxComplete(function() {

   window.optimizely.push(["activate", XXXXXXX]);

 });

こうすることで、AJAX リクエストが完了するたびに実験がアクティブ化されるこ とに注意してください。サイトに多くの AJAX リクエストがある場合、どの AJAXリクエストをリッスンするべきかを特定する引数を渡すとよいかもしれません。

7. 両方の実験を開始します。

その他の注記

  • 手動または条件付きでアクティブ化された実験は、実験が実行中でかつ現在の訪問者と現在のページが実験のターゲット条件を満たしている場合にのみ、こ れらの API 呼び出しの結果としてアクティブになります。

  • 実験は 2 回以上アクティブ化することができます。

  • 手動実験のターゲット条件を満たしている訪問者がその実験に振り分けられる のは、その実験がアクティブである場合のみです。

  • 目標として使用されているページでは実験をアクティブ化する必要はありません。

  • JavaScript が生成するページと通常の HTML ページにまたがって複数ページ実験を実行している場合、テストしたいページそれぞれの Optimizely スニペット の後に、アクティブ化呼び出しを追加する必要があります。

  • アクティブ化呼び出しを、Optimizely JS ファイルをロードするスクリプトタグ
    内に置くことはできません。
The following two tabs change content below.

管理者

最新記事 by 管理者 (全て見る)

  • このエントリーをはてなブックマークに追加
お問い合わせ 資料ダウンロード