Funcionamiento del entorno de ejecución de Optimize

Descubra qué ocurre en el navegador de los visitantes de su sitio web al usar Optimize y cómo se aplican los cambios.

Cada vez que un usuario visita un sitio web en el que se está haciendo un experimento con Optimize, se ejecutan tres pasos que se explican a continuación.

En este artículo:

Descarga asíncrona

La secuencia de comandos del contenedor de Optimize es asíncrona, por lo que no afecta al funcionamiento habitual del sitio web. El contenedor de Optimize se descarga en paralelo con otras secuencias de comandos y recursos de la página y no los bloquea. Las secuencias que se descargan primero se ejecutan sin retrasos.

No obstante, es importante priorizar Optimize, ya que suele modificar el contenido de la página.

Por eso, recomendamos colocar el código de Optimize en la parte superior de la sección <HEAD>. Así, esta herramienta se ejecutará lo antes posible, sin que otras secuencias de comandos y bibliotecas de la página la bloqueen.

Si Optimize no se sitúa en el lugar correcto, pueden producirse parpadeos, la ocultación puede prolongarse más de lo debido y los tiempos de espera del contenedor pueden agotarse (si utiliza el fragmento antiparpadeo).

Fragmento antiparpadeo

El parpadeo es un problema habitual que surge cuando el código JavaScript modifica una página HTML; consiste en mostrar temporalmente al usuario la versión original de la página antes de que cambie.

Si este error se produjera cuando se ha instalado el código de Optimize, los visitantes podrían confundirse e incluso darse cuenta de que forman parte de un experimento, lo que afectaría negativamente al sitio web y a los resultados del experimento. Por eso, Optimize cuenta con una serie de mecanismos diseñados para garantizar que esto no suceda.

Uno de los principales recursos que se pueden usar para evitar este problema es el fragmento antiparpadeo, necesario debido a la naturaleza asíncrona de Optimize.

Una secuencia de comandos síncrona puede impedir que el navegador analice y muestre la página (y, en el peor de los casos, puede ocasionar que el sitio web deje de funcionar). Sin embargo, una secuencia asíncrona puede ejecutarse en cualquier momento, incluso después de que la página sea visible, y no tiene efectos graves en el sitio web, aunque puede provocar parpadeos.

El fragmento antiparpadeo es un mecanismo que permite asegurarse de que la página se oculte temporalmente hasta que el contenedor de Optimize haya tenido tiempo suficiente para descargarse. Cuando se instala correctamente en una página normal, la ocultación de la página no tiene efectos negativos destacables, ya que el contenedor de Optimize se descarga a la vez que las secuencias de comandos y los recursos de la página que impedirían que se renderizara.

Esta no es la única solución que la herramienta aplica para evitar el parpadeo, ya que la página suele dejar de ocultarse antes de estar disponible en el navegador para que Optimize pueda modificarla.

Es importante tener en cuenta que el tiempo de espera de ocultación de la página no es el tiempo que tarda Optimize en mostrar la página, sino un valor máximo. El valor recomendado de este parámetro no guarda relación con el rendimiento del sitio web ni de Optimize, sino principalmente con la velocidad de la conexión de los visitantes (por ejemplo, por su recepción de la señal de red).

Si el contenedor de Optimize no se descarga junto con los otros recursos de la página ni se ejecuta en el dispositivo del visitante (dependiendo de las condiciones y la velocidad de red) antes de que el tiempo de espera se agote, la página deja de ocultarse y los experimentos de Optimize no se llevan a cabo, aunque el contenedor se descargue después. En este caso, la visita se excluye del tráfico del experimento.

Una vez que el contenedor de Optimize se descarga, la página deja de ocultarse globalmente y el contenedor analiza las reglas del experimento para asegurarse de que solo se mantengan ocultos los elementos involucrados en las variantes de experimento seleccionadas. Esto puede suceder incluso si esos elementos aún no se encuentran en la página.

Page-hiding-snippet-flow-diagram

Análisis de las reglas de segmentación

Cuando el contenedor de Optimize se descarga, analiza las reglas de segmentación de todos los experimentos que estén configurados para activarse con la opción de carga de página predeterminada. Los experimentos que tienen configurada una activación distinta de la predeterminada deben esperar que ocurran los eventos de activación correspondientes.

La página de experimento que use como modelo para iniciar el Editor de Optimize no tiene efecto alguno en la segmentación, aunque se asigne en un principio como regla de segmentación predeterminada. Para ver exactamente qué reglas se aplican a un experimento, consulte la pestaña Segmentación de la página de detalles de ese experimento.

Cuando un visitante llega por primera vez a una página tras el inicio del experimento (no tiene por qué ser su primera visita al sitio web), se le asigna una variante. La asignación es aleatoria, en función de las ponderaciones de las variantes, y se basa en el ID de cliente de Google Analytics. El visitante permanece en la variante asignada hasta el final del experimento y las acciones que se produzcan en cualquier momento posterior (es decir, los objetivos) se atribuyen a esa variante.

Cambiar las ponderaciones del experimento no implica que se reasignen los visitantes. Si modifica el valor de la ponderación de una variante a 0, seguirá recibiendo tráfico: el correspondiente a los visitantes asignados a dicha variante antes del cambio.

Los experimentos son independientes entre sí. Una misma visita puede formar parte de varios experimentos, por lo que debe asegurarse de que no haya efectos secundarios. Por tanto, aunque no hay ningún problema en poner en marcha varios experimentos en la misma página, deben realizarse en distintas áreas de la página y deben evitarse los sesgos (por ejemplo, que la variante de un experimento promocione la variante de otro).

Nota: Las variantes de Optimize se aplican de la mejor manera posible. La visita se mide como parte de la variante del experimento, aunque no existan ninguno o algunos de los selectores de CSS de sus variantes, o los cambios de JavaScript contengan errores y generen excepciones.

Por último, puede que en el servidor se analicen algunas de las reglas de segmentación, lo que puede ocasionar que el experimento se elimine por completo del contenedor descargado.

Targeting rule evaluation flow diagram

Aplicación de las variantes A/B y PMV seleccionadas

Cuando el contenedor escoge sus variantes, intenta aplicarlas. Una variante es una lista de cambios que se muestran en el Editor de Optimize y que se suelen aplicar en orden. Cuando no hay conflictos, se realizan algunas optimizaciones.

Cada cambio está orientado a un selector de CSS, que puede corresponder a uno o varios elementos. El Editor de Optimize detecta si un cambio tiene como objetivo varios elementos.

Es frecuente que el elemento de un cambio no esté disponible en la página mientras se está ejecutando Optimize. En tal caso, Optimize se asegura de que permanezca oculto cuando pase a estar disponible. Para ello, añade una regla de CSS y, a continuación, pausa la ejecución de la lista de cambios.

En cuanto el elemento en cuestión está disponible, Optimize aplica el cambio, elimina la regla de ocultación de CSS y trata de aplicar el siguiente cambio de la lista del mismo modo.

Una vez que el navegador cambia el estado de la página a "preparada" (después del evento DOMContentElement), Optimize hace todo lo posible por aplicar los cambios restantes. Si en ese momento no se puede localizar el elemento de un cambio, Optimize lo pasa por alto y continúa.

Nota: Los cambios de estilo suelen implementarse con reglas de CSS, por lo que no tienen que seguir el proceso anterior. Se aplican inmediatamente en cuanto se carga Optimize y no es necesario ocultar nada más.

Los cambios de JavaScript también tienen un selector de CSS objetivo y se ejecutan cuando el navegador habilita el elemento de ese selector.

No es recomendable implementar en Optimize una variante completa con un único cambio de JavaScript (es decir, mediante jQuery) en la sección <BODY>, ya que el código puede ejecutarse más tarde de lo previsto. Intente restringir el selector objetivo de JavaScript a los elementos que quiera modificar o al elemento de contenedor superior más pequeño posible.

Por último, en el Editor de Optimize se pueden seleccionar varios elementos haciendo clic en ellos mientras se mantiene pulsada la tecla Mayús. Por ello, es posible que un cambio tenga un selector de CSS con varios elementos como objetivo, que pueden aparecer en una misma página en distintos momentos. Optimize los cambia a medida que aparecen, pero al final del proceso deja de ocultarlos.

Application of variants flow diagram

¿Te ha resultado útil esta información?
¿Cómo podemos mejorar esta página?