[Optimizely Classic]実験のビルド

Optimizelyロード直後のバリエーションコードまたは実験JavaScriptの強制実行

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

Optimizely は、バリエーションコードを実行するための安全なタイミングを判断する ため、特別なアルゴリズムを使用します。この動作をオーバーライドし、Optimizelyがロードされたら直ちにバリエーションコードの一部を強制的に評価するには、以下のように optimizely_evaluateコードをバリエーションに追加することができます。

 

/* _optimizely_evaluate=force */

window.myGlobalVariable = 25;

/* _optimizely_evaluate=safe */

$j("img#hplogo").css({"width":254, "height":112});

 

これは、実験 JavaScript でもバリエーションコードでも機能します。

このバリエーションコードの例では、グローバル変数 window.myGlobalVariableは Optimizely がロードされると直ちに定義され、対象の実験ページで後で実行されるJavaScript コードにおいて参照することができます。とはいえ $j("img#hplogo")の変更は、要素が DOM に読み込まれてから初めて発生します。

条件文

Optimizely がロードされてすぐに条件文(「if」文など)を強制実行することもでき ます。バリエーションの強制実行方法を使用して条件文を評価する場合は、条件文内の 1 行だけでなく条件文または関数全体をカプセル化することが重要です。

条件文をすぐに強制実行する正しい方法:


/* _optimizely_evaluate=force */

if(value = true){

console.log("Action")

}

/* _optimizely_evaluate=safe */

 

条件文をすぐに強制実行する正しくない方法:

if(value = true){

/* _optimizely_evaluate=force */

console.log("Action")

/* _optimizely_evaluate=safe */

}


2 つ目の例では、バリエーションの強制実行のコメントが関数または条件文の内部に 配置されています(たとえば、「if」文の内部)。この場合は、コメントでカプセル化されているコードは条件ロジックから削除され、すぐに実行されます。

つまり、console.log("Action")は、「if」条件を満たすかどうかに関係なくすぐに実行することを強制されます。コメント内のコードが常に実行されるため、「if」条件は機能的に破損してしまいます。これを回避するには、評価の強制実行のコメント内に条件文全体を配置してください。

ページフラッシュの抑制

バリエーションが表示される前に元のページが一瞬ロードされるという「ページフラ ッシュ」をこのテクニックで防ぐことができます。ページフラッシュの根本原因は、jQuery の行間に「純粋な」JavaScript が挿入されていて、そのためにOptimizely が DOM Ready を待機することにあるのかもしれません。


例:実験 JAVASCRIPT でグローバル変数を宣言し、変更する

Optimizely の <コードの編集> 機能を使えば、手動で JavaScript のコードを編集し、実験中に特定のバリエーションをページに表示することができます。このセクション では、[コードの編集] 機能を使用してどのようにグローバル変数を定義し変更することができるかを説明します。

Optimizely バリエーションのグローバル変数を変更する理由はさまざまです。

1. 特定のバリエーションで動的にロードされる flash モジュールやビデオの URL
を変更したい。

2. 特定のバリエーションの AJAX リクエストでサーバーに送信されるパラメータ
ーを変更したい。

3. 特定のバリエーションで訪問者に対して Google Analytics の特別なカスタム変
数を追加したい。

この例では、ページ上で 2 つの異なる flash ビデオ(- originalvideo.flv - video2.flv)をテストし、どちらのビデオが訪問者の商品の購入に 対してより効果的かを理解したいとしましょう。考慮するビデオは以下の関数により ランディングページに動的にロードされます。この関数はランディングページの<head>セクションの下部で呼び出されます。

var videoUrl = "/static/media/originalvideo.flv";

loadVideo(videoUrl);

最初のビデオではなく 2 つ目のビデオをロードする Optimizely バリエーションを作成
するには、以下のような Optimizely バリエーションを作成します。

/* _optimizely_evaluate=force */

window.videoUrl = "/static/media/video2.flv";

/* _optimizely_evaluate=safe */

そしてビデオをロードするコードを以下のように変更します。

if (typeof(window.videoUrl) == "undefined") {

window.videoUrl = "/static/media/originalvideo.flv";

}

loadVideo(window.videoUrl);

ここで、optimizely_evaluation コメントは Optimizely がロードされたら直ちに (DOM の準備ができたらではなく)Optimizely にこのコードを実行させます。また、windowオブジェクトに videoUrl 変数を追加することで、これをグローバルコンテキストで定義しています。

うまくいかなかい他のやり方は、セクションを以下のように書き換えることです。

<head>

     <script src="//cdn.optimizely.com/js/7144006.js"></script>

     <script src="/static/js/mediaplayer.js"></script>

     <script>

          if (typeof(window.videoUrl) == "undefined") {

              window.videoUrl = "/static/media/movie.flv";

          }

         mediaplayer.loadMovie(window.videoUrl);

     </script>

</head>

そして以下のコードで Optimizely バリエーションを作成するという方法です(上記の
とおり、これはうまくいきません)。

 

window.videoUrl = "/static/media/movie2.flv";

 

これがうまくいかないのは、このバリエーションコードは DOM の準備ができるまで実行されないからです。とはいえ、optimizely_evaluateフラグを使えばこのバリエーションコードをすぐに実行することができます。

変数を定義するのに varを使えないのはなぜでしょうか。Optimizely のバリエーショ ンコードはグローバルコンテキストで実行されないので、Optimizely のバリエーションコード内で varにより宣言された変数は、バリエーションコードの外側では参照で きないのです。そのため、Optimizely をスプリットテストツールとして使用する際に は、グローバル変数を window オブジェクト(または他の何らかのグローバルオブジ ェクト)に追加することでOptimizely のコンテクストの外から参照できるようにする必要があります。

The following two tabs change content below.

管理者

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

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