javascript - ¿Cómo maneja Optimizely & Visual Website Optimizer la edición visual de DOM?

wysiwyg

Question

Optimizely & Visual Website Optimizer son dos sitios geniales que permiten a los usuarios realizar pruebas A / B simples.

Una de las mejores cosas que hacen es la edición visual de DOM. Puede manipular visualmente una página web y guardar los cambios fuera de línea. Luego, los cambios se aplican durante una vista de página de visitante aleatoria a través de una carga JS.

¿Cómo funcionan los editores visuales?

Answer 1

Me llamo Pete Koomen y soy uno de los cofundadores de Optimizely, así que puedo hablar de cómo funcionan las cosas de nuestro lado. Digamos que quiere crear un experimento en http://www.mypage.com .

1. Podría (esto es opcional) comenzar agregando su fragmento de cuenta de Optimizely a esa página, que se ve así y nunca cambia:

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

2. El editor de Optimizely carga http://www.mypage.com dentro de un iframe y usa window.postMessage para comunicarse con la página. Esto solo funciona si esa página ya tiene un fragmento como el de arriba. Si ese no es el caso, el editor expirará mientras espera un mensaje de la página de iframe y lo cargará nuevamente a través de un proxy que realmente inserta el fragmento en la página. Este proceso de carga le permite al editor trabajar con páginas que a. Contiene un fragmento de cuenta b. no contiene un fragmento de cuenta, o c. siéntese detrás de un cortafuegos (c. requiere el fragmento).

3. Nuestro usuario en este punto puede hacer cambios en la página, como modificar texto, intercambiar imágenes o mover elementos. Cada cambio que se realiza con el editor se codifica como una línea de JavaScript que se parece a lo siguiente:

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

4. Por lo tanto, puede pensar en una "variación" de una página como un conjunto de declaraciones de JavaScript que, cuando se ejecutan en esa página, hacen que aparezca la variación deseada. Si tiene curiosidad, puede ver y editar este código directamente haciendo clic en "Editar código" en la esquina inferior derecha del Editor de Optimizely.

5. Ahora, cuando haya agregado el fragmento de su cuenta a esta página y haya comenzado su experimento, el archivo JS al que apunta el fragmento de su cuenta agrupará automáticamente a cada visitante entrante y luego ejecutará el JavaScript correspondiente mientras se carga la página.

Hay mucha más lógica que incluye agrupar al visitante y ejecutar estos cambios lo más rápido posible durante la carga de la página, ¡pero esto debería servir como una descripción básica!

Pete