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

Question

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

Una de las mejores cosas que hacen es la edición visual DOM. Puede manipular visualmente una página web y guardar los cambios sin conexión. Los cambios se aplican luego durante una vista de página de visitante aleatoria a través de una carga JS.

¿Cómo funcionan los editores visuales?

Answer 1

Mi nombre es Pete Koomen, y soy uno de los cofundadores de Optimizely, por lo que puedo hablar de cómo funcionan las cosas de nuestro lado. Supongamos que desea crear un experimento en http://www.mypage.com.

1. Es posible (esto es opcional) empezar añadiendo su fragmento cuenta Optimizely a esa página, que se parece a esto y nunca cambia:

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

2. Las cargas Optimizely Editor http://www.mypage.com dentro de una iframe y usa window.postMessage para comunicarse con la página. Este solo funciona si esa página ya tiene un fragmento como el de arriba. Si ese no es el caso, el editor esperará mientras espera un mensaje de la página iframe'd, 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. contener un fragmento de cuenta b. no contiene un fragmento de cuenta, o c. sentarse detrás de un cortafuegos (c. requiere el fragmento.)

3. Nuestro usuario en este punto puede realizar cambios en la página, como modificar texto, intercambiar imágenes o mover elementos. Cada cambio que se hace con el editor se codifica como una línea de código JavaScript que se ve algo como lo siguiente:

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

4. Por lo tanto, se puede pensar en una "variante" de una página como una 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 su fragmento de cuenta a esta página y haya comenzado su experimento, el archivo JS señalado por su fragmento de cuenta dividirá automáticamente cada visitante entrante y luego ejecutará el JavaScript correspondiente mientras la página se carga .

Hay mucho más lógica que entra en bucketing el visitante y la ejecución de estos cambios tan pronto como sea posible durante la carga de la página, pero esto debería servir como una descripción básica!

Pete