Optimizely_poweredbyGaprise_clear

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

2020-06-04 16:28:00 [Optimizely Classic]実験のビルド
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 に読み込まれてから初めて発生します。

目次

1.条件文
2.ページフラッシュの抑制
3.例：実験 JAVASCRIPT でグローバル変数を宣言し、変更する
  

条件文

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 のコンテクストの外から参照できるようにする必要があります。
キーワード検索
カテゴリ一覧

お問い合わせ

すべてのデバイス、チャンネル、すべてのユーザーとのタッチポイントで
最適な顧客体験を提供できます。