Cómo evitar el “flickering” con Target v2.x y Launch con carga asíncrona

Supongamos que tengo una web y quiero experimentar con los colores del banner principal, que ahora es amarillo, para ver si descubro alguno que convierta mejor y genere más clics. Para esto, usando Adobe Target genero una variación de la web en la que el banner es azul y creo un experimento en el que desvío hacia ella el 50% del tráfico. A este último grupo le llamaremos el grupo experimental.

Juan, un ser imaginario perteneciente al grupo experimental (sin saberlo, claro), entra a la web. Se carga la página y ve un banner amarillo, el cual después de una fracción de segundo, se vuelve azul. ¿Qué es lo que sucedió aquí? ¿No debería Juan ver únicamente el banner azul? A esta experiencia visual negativa es a lo que llamamos flickering y si esto sucede en tu web, es un claro indicio que Target no está correctamente implementado.

¿Por qué sucede el flickering?

El flickering sucede cuando la página web se renderiza antes de que la experiencia de Target se haya cargado y procesado. Por eso es que en un principio veríamos la página original y una fracción de segundo después se transformaría para mostrar la experiencia destinada al grupo experimental. 

Uno de los escenarios más comunes en el que esto puede suceder es cuando la librería de Target se carga de forma asíncrona, permitiendo que la página web se renderice antes de que pase el tiempo suficiente para que esta sea leída y procesada. 

¿Cómo se soluciona el flickering?

Como siempre, la solución depende del tipo de implementación.

Si la librería de Target está inyectada directamente en el código o insertada a través de una regla de Launch, el asegurarnos de que el script cargue de forma síncrona antes de que carguen los elementos del DOM que la experiencia modifica debería ser suficiente. Pero esto no siempre es posible.

¿Qué pasa por ejemplo, si por cuestiones de seguridad, no tenemos permitido cargar Launch o la librería de Target de forma síncrona? Muchas empresas prohíben la carga síncrona de herramientas de terceros, ya que un fallo en estas condicionaría la carga de toda la web. En este caso la solución es un poco más compleja.

Implementando Target v2.x a través de Launch

Atendiendo al problema de la carga asíncrona de las experiencias, Adobe ofrece una solución que pasa por implementar Target a través de Launch.

Es importante aclarar que la solución que aquí propongo, se logró sumando las recomendaciones oficiales de Adobe a la experimentación, y en más de una ocasión los resultados de la experimentación sugerían algo distinto a las recomendaciones. Es por esto que sugerimos que no se tome esta solución como la única, sino como una guía a seguir y que puede variar en casos particulares.

Presnippet

Para entender esta solución, explicaré primero el concepto del presnippet.

El presnippet es un trozo de código javaScript proporcionado por Adobe, el cual debe colocarse justo después de la carga de la librería de Launch en todas las webs en las que vaya a aplicarse una experiencia. El objetivo del presnippet es hacer que el contenido de la web no sea visible para el usuario antes de que cargue la experiencia y así evitar el flickering.

El presnippet se ve así:

Lo que hace este trozo de código es aplicar una opacidad de 0 a la web durante máximo 3 segundos (esta duración puede modificarse fácilmente cambiando los milisegundos en el parámetro timeout), haciendo invisible el contenido de la web mientras la experiencia de Target no haya sido cargada. Si en algún momento durante esos tres segundos la experiencia de Target se termina de cargar y procesar, la página con la experiencia cargada se volverá visible. En caso de que por cualquier motivo la librería de Target no cargue, la versión original de la página se volverá visible tras los tres segundos (o lo que nosotros decidamos) del timeout.

Extensión

Para poder realizar la implementación es imprescindible que instalemos la versión más actualizada de la extensión oficial de Target para Launch. La versión utilizada al momento de escribir este post es la siguiente:

Configuración de la regla

El siguiente paso es crear una regla a través de la cual cargaremos la librería de Target en las páginas en las que vayamos a aplicar alguna experiencia. La configuraremos de la siguiente forma:

• El evento que dispara la regla será “Library Loaded (Page Top)”:

• Las condiciones de la regla dependerán de dónde queremos aplicar Target. Esto puede ser en una url específica, grupos de urls, basado en alguna variable de la capa de datos o de cualquier otra de las muchas formas en las Launch nos permite filtrar. 
• La regla incluirá dos acciones, las cuales deberán seguir este orden y configurarse de la siguiente forma:

Primera Acción

Segunda Acción

La regla completa se debería ver así:

Una vez publicada la regla, si todo está configurado correctamente, las urls a las que aplique la experiencia deberían mostrarse con opacidad 0 durante una fracción de segundo tras lo cual se vuelven visibles con la experiencia ya cargada.

Buenas prácticas

• Es muy recomendable probar la regla en algún entorno previo de Launch o incluso en algún entorno previo de la misma web antes de publicar estos cambios. Una implementación mal configurada puede impactar considerablemente en la experiencia del usuario.

• Cuando vaya a implementarse Target en alguna web, es muy importante que el presnippet esté implementado en todas las páginas en las que vaya a cargarse alguna experiencia de Target y que no se incluya en aquellas en las que no se cargará la librería (Nótese la diferencia entre la carga de una experiencia y la carga de la librería). Si carga una experiencia de Target pero no está incluido el presnippet, el usuario experimentará flickering. Si está incluido el presnippet pero no está incluida la librería, la web tardará los 3 segundos (o el tiempo que se haya configurado) en hacerse visible.Es por esto que la implementación de los presnippets y la publicación de la regla debe hacerse de forma coordinada y de preferencia a una hora en la que el tráfico sea bajo.

• Si existen urls en las que cargue la librería de Target pero no se vaya a aplicar ninguna experiencia, no es necesario aplicar el presnippet. Sin embargo, es importante llevar un registro de las urls en las que está incluida la librería, ya que si en algún momento aplicamos a estas alguna experiencia sin incluir el presnippet, el usuario experimentará flickering.

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

*Fuente imagen destacada: Pexels