Eventos de activación

Activar un experimento con un evento personalizado

Las aplicaciones web de una sola página y de páginas dinámicas suelen cargar más datos tras su carga inicial, y Optimize admite esta opción mediante una función denominada eventos de activación.

Secciones de este artículo:

Cómo funciona

Los eventos de activación permiten que los experimentos de Optimize funcionen en páginas dinámicas, incluidas las subsecciones dinámicas de las aplicaciones de una sola página. Optimize admite la activación de estados posteriores, además de la reactivación y la desactivación de una lista de cambios.

Los eventos de activación de Optimize permiten orientar los experimentos a eventos que haya enviado al dataLayer del sitio web. El nombre de un evento se puede usar en todo el sitio web junto con reglas de segmentación de Optimize adicionales para centrarse en acciones concretas.

Activar un experimento en un evento personalizado

Optimize le permite estructurar nuevos experimentos combinando los eventos y reglas de segmentación adicionales sin tener que cambiar constantemente el código de cliente del sitio web.

Pestaña de segmentación de la página de detalles de un experimento en Optimize

La pestaña de segmentación de la página de detalles de un experimento permite activarlo cuando se produce un evento personalizado.

Cuando esto suceda, el experimento no se ejecutará hasta que se active un evento de dataLayer con el nombre del evento facilitado. Puede activar un evento de este tipo cuando la página esté en el estado correcto ejecutando el siguiente código JavaScript en la página:

dataLayer.push({'event': 'optimize.activate'});

Cuando el evento segmentado se active, se evaluarán el resto de condiciones de segmentación y el experimento cambiará al estado activo (se aplicará la lista de cambios) solo si se dan todas las condiciones.

Ejemplo

Si tiene varias llamadas AJAX que se deben devolver antes de que la página esté lista para el experimento, puede activar un evento tras cada llamada AJAX e incluir una regla de segmentación de JavaScript adicional que compruebe el valor de una variable determinada. El experimento no se activará hasta que se dé la regla de segmentación de JavaScript adicional y se devuelva una llamada AJAX.

Reactivar una lista de cambios

Se puede configurar un experimento para que se cumplan todas las condiciones de segmentación y el evento segmentado se active varias veces.

Si activa el evento segmentado varias veces y se cumplen el resto de condiciones de segmentación, la lista de cambios se reactivará. Cuando ocurra, Optimize comprobará la página para ver si ha cargado elementos adicionales que se deben modificar según la lista de cambios del experimento, y actualizará los nuevos elementos que se hayan cargado. Los elementos existentes no se modificarán.

Ejemplo

Supongamos que tenemos una página con un carrito de la compra dinámico en la que el usuario puede hacer clic en productos para añadirlos al carrito. Imaginemos un experimento que:

  • Inserta una imagen después de añadir cada producto al carrito.
  • Inserta un mensaje de oferta global por encima del cuerpo de la página cuando el usuario tiene al menos un producto en el carrito.

La página lanza el evento de activación (por ejemplo. shoppingCartChanged) cada vez que un usuario añade o elimina productos del carrito. Tanto la condición de la página como los cambios aplicados pueden ser parte del experimento.

En el ejemplo anterior, la condición de segmentación incluiría "¿Hay algún producto en el carrito?"

La primera vez que el usuario añada un producto, se activará la lista de cambios y Optimize:

  • Insertará una imagen después de añadir el producto al carrito por primera vez.
  • Insertará el mensaje de oferta global al principio de la página.

La segunda vez que el usuario añada un producto al carrito, la lista de cambios se reactivará y Optimize:

  • Insertará una imagen después de añadir el segundo producto al carrito.

La segunda vez que el usuario añade un producto al carrito, Optimize no incluye un segundo mensaje de oferta en la página, ni Optimize añade otra imagen después del primer producto. El único elemento modificado es el producto recién añadido que no estaba presente cuando se aplicó por primera vez la lista de cambios del experimento.

Desactivar una lista de cambios

Los eventos de activación se pueden usar para deshacer los cambios de un experimento. En el ejemplo del carrito de compra anterior, no interesa mostrar un código de oferta a un usuario que ya no cumple la condición de segmentación del experimento. De forma similar, muchas aplicaciones web de una sola página comparten componentes en varias secciones del sitio web, pero los cambios en el experimento podrían tener que restringirse a una sola sección.

Si se lanza un evento tras la activación de un experimento y las condiciones de segmentación ya no se cumplen, Optimize deshará los cambios asociados al experimento que se hayan aplicaron previamente. Así, la página recupera el estado que tenía antes de activarse el experimento y aplicarse la lista de cambios.

En el ejemplo anterior, al quitar el último producto del carrito desaparece el mensaje de oferta global.

Los cambios de JavaScript no se pueden deshacer de forma automática.

Aplicaciones de una sola página y páginas virtuales

Los criterios de segmentación se pueden usar para definir páginas virtuales en aplicaciones web de una sola página. La condición que se debe utilizar depende de la estructura del sitio web pero, para la mayoría de los desarrolladores de aplicaciones web de una sola página, los fragmentos de URL son la opción más sencilla.

A veces las aplicaciones web no asignan una página virtual a un fragmento de URL. Algunos sitios web utilizan intersticiales de registro en el boletín informativo ya que resultan perfectos para las pruebas A/B. Con estos intersticiales (y otros elementos similares) se pueden realizar experimentos añadiendo otras condiciones de segmentación al experimento de Optimize. La segmentación variable de JavaScript se puede usar para comprobar la presencia de contenido o elementos concretos.

La desactivación es muy útil para aplicaciones de una sola página que usan reglas de CSS para realizar cambios de estilo en componentes que se reutilizan en varias páginas. Las etiquetas <STYLE> de una página virtual se retirarán desde <HEAD> cuando la aplicación cambie a otra página virtual.

Activación en una aplicación de una sola página

Para reactivar una lista de cambios, no es necesario conectarse otra vez al servidor de Optimize. Un método de activación sencillo y eficaz es lanzar un evento cuando se produce un cambio en la página.

Por ejemplo, una aplicación AngularJS puede implementar eventos de activación en siete líneas de código lanzando un evento después de cada bucle de resumen.

El siguiente fragmento de código de ejemplo lanza un evento después de cada bucle de resumen en una aplicación AngularJS:

myapp.run(function($rootScope, $timeout) {
   $rootScope.$watch(function(){
     $timeout(function(){
       dataLayer.push({'event': 'optimize.activate'});
     },0,false);
   })
})
¿Te ha resultado útil esta información?
¿Cómo podemos mejorar esta página?