19

OptimizelyとVisualWebsiteOptimizerは、ユーザーが簡単なA/Bテストを実行できる2つの優れたサイトです。

彼らが行う最もクールなことの1つは、視覚的なDOM編集です。Webページを視覚的に操作し、変更をオフラインで保存できます。変更は、JSロードを介したランダムな訪問者ページビュー中に適用されます。

ビジュアルエディターはどのように機能しますか？

4

1 に答える 1

63

私の名前はPeteKoomenです。Optimizelyの共同創設者の1人なので、私たちの側で物事がどのように機能するかについて話すことができます。http://www.mypage.comで実験を作成するとします。

  1. （これはオプションです）Optimizelyアカウントスニペットをそのページに追加することから始めることができます。これは次のようになり、変更されることはありません。

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

  2. Optimizely Editorは、iframe内にhttp://www.mypage.comをロードし、window.postMessageを使用してページと通信します。これは、そのページに上記のようなスニペットがすでに含まれている場合にのみ機能します。そうでない場合、エディターはiframeされたページからのメッセージを待っている間にタイムアウトし、実際にスニペットをページに挿入するプロキシを介してメッセージを再度ロードします。この読み込みプロセスにより、エディターは次のようなページを操作できます。アカウントスニペットを含めるb。アカウントスニペットが含まれていない、またはc。ファイアウォールの後ろに座ります（c。スニペットが必要です）。

  3. この時点で、ユーザーは、テキストの変更、画像の交換、要素の移動など、ページに変更を加えることができます。エディターで行われる各変更は、次のようなJavaScriptの行としてエンコードされます。

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

  4. したがって、ページの「バリエーション」は、そのページで実行されると、目的のバリエーションが表示されるJavaScriptステートメントのセットと考えることができます。興味がある場合は、Optimizely Editorの右下隅にある[コードの編集]をクリックして、このコードを実際に直接表示および編集できます。

  5. これで、アカウントスニペットをこのページに追加して実験を開始すると、アカウントスニペットが指すJSファイルは、各着信訪問者を自動的にバケット化し、ページの読み込み中に対応するJavaScriptを実行します。

訪問者をバケット化し、ページの読み込み中にこれらの変更を可能な限り迅速に実行するためのロジックは他にもたくさんありますが、これは基本的な概要として役立つはずです。

ピート

于 2011-03-09T00:55:32.980 に答える