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.

Secciones de este artículo:

Descarga síncrona y asíncrona

Aunque la instalación síncrona es más sencilla y ofrece el máximo rendimiento de las experiencias, Optimize también puede funcionar de forma asíncrona, lo cual es una ventaja porque 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 sin bloquearlos. 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 en el contenido, la ocultación de la página 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; lo que ocurre es que se muestra 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 sentirse confusos 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 evitar que esto 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 (e incluso puede ocasionar que el sitio web no se cargue por completo). Sin embargo, una secuencia asíncrona puede ejecutarse en cualquier momento, incluso después de que la página sea visible, y nunca tiene efectos graves (por ejemplo, no bloquea la carga del sitio web), aunque puede provocar parpadeos.

El fragmento antiparpadeo oculta temporalmente su página web hasta que el contenedor de Optimize haya tenido tiempo suficiente para descargarse. Cuando se instala correctamente el fragmento, el rendimiento de la página web no se ve afectado, ya que el contenedor de Optimize se descarga a la vez que otras secuencias de comandos y recursos de la página que podrían impedir que se renderizara.

El fragmento antiparpadeo no es la única solución que aplica Optimize para evitar el parpadeo, ya que el parpadeo suele detenerse antes de que la página esté disponible en el navegador para que Optimize pueda modificarla.

Nota: El tiempo de espera del fragmento antiparpadeo no es el tiempo que tarda Optimize en mostrar la página, sino el tiempo de espera potencial del fragmento en el peor de los casos. 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 y otros recursos de la página no se descargan ni se ejecutan en el dispositivo del visitante antes de que se agote el tiempo de espera, la página deja de ocultarse y los experimentos de Optimize que puedan aplicarse más tarde se abandonan. En ese 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 evalúa 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, evalúa 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 a que ocurran los eventos de activación correspondientes.

Nota: La página de experimento que se 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 web tras el inicio del experimento (no tiene por qué ser su primera visita a la página), se le asigna una variante. Las variantes se asignan a IDs de cliente de Google Analytics de forma aleatoria y siguiendo las ponderaciones de variante que se hayan especificado. 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.

La asignación de la variante se almacena en una cookie propia específica (_gaexp) y se utilizará en futuras visitas del mismo visitante para ofrecerle una experiencia coherente. Esto no significa que el visitante vaya a ver necesariamente la misma variante en visitas posteriores, cada vez que se vuelvan a evaluar las reglas; pero si coinciden, el usuario verá la misma variante. No obstante, las conversiones de esa o de cualquier otra página se atribuirán a esa variante independientemente de las reglas.

Si un visitante se ve expuesto a varios experimentos en ejecución (en cualquier página), esas asignaciones se concatenan en la misma cookie. Debido a las limitaciones de los navegadores en cuanto al tamaño de las cookies, hay un número máximo de experimentos simultáneos que se pueden asignar a un usuario. Cuando la cookie de un visitante supera dicho límite, se le excluye del tráfico del experimento y no se le muestran variantes de experimentos adicionales. Una vez finalizado el experimento, se borran las asignaciones de variantes y el visitante puede añadirse a experimentos adicionales.

Una vez que un visitante se ha asignado a un experimento, el tiempo de ejecución permitirá que Google Analytics haga un seguimiento de la información de la variante necesaria. En el caso de los experimentos activados con la configuración de carga de página predeterminada (y que no utilizan la activación personalizada), la asignación de variantes se realiza antes del hit de página vista de Google Analytics y del experimento, y el seguimiento del experimento se hace utilizando ese hit. En otros casos (o si no ha seguido la instalación de Optimize recomendada), se aplicará un hit de datos adicional de Google Analytics para asegurar el seguimiento del experimento.

Aunque se cambien los valores porcentuales de participación del experimento, las asignaciones de los visitantes no varían. Aunque seleccione 0 como valor de participación de una variante, seguirá recibiendo tráfico: el correspondiente a los visitantes asignados a dicha variante antes del cambio de la ponderación.

Los experimentos son independientes entre sí. Una misma visita puede formar parte de varios experimentos, por lo que debe asegurarse de que no haya influencia de unas en otras. 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 aunque no sean del todo correctas. La visita se mide como parte de la variante del experimento, aunque no existan algunos de los selectores de CSS de sus variantes o los cambios de JavaScript generen excepciones.

Por último, puede que algunas de las reglas de segmentación se evalúen en el servidor, 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 con 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

Si utiliza eventos personalizados para activar el experimento, las reglas de segmentación no se evalúan una vez, cuando se carga la página, sino cada vez que se envía un evento de activación. La primera vez que las reglas coincidan, se asignará el visitante a una variante, se enviará un hit de Google Analytics (normalmente, un hit de datos) para asegurar el seguimiento del experimento y se aplicarán los cambios de la variante.

Sin embargo, a diferencia del caso de la activación de carga de página predeterminada, este no será el final del tiempo de ejecución. Normalmente, deberá enviar más eventos de activación cada vez que se produzca un cambio significativo en el estado de la página (es decir, en la URL o el árbol DOM). Cuando esto suceda, habrá dos posibilidades:

  • Las reglas de segmentación siguen coincidiendo y, en ese caso, la variante se reactiva: el tiempo de ejecución vuelve a activar los cambios de la variante, pero los aplica solo a los elementos nuevos que no estaban disponibles en la ejecución anterior.

  • Las reglas de segmentación no coinciden y, en ese caso, la variante se desactiva: los cambios se revierten y los elementos se devuelven al estado en el que estaban antes de aplicarse. En cada evento, todas las desactivaciones tienen lugar antes de las activaciones, de modo que la página vuelve a su estado original para poder aplicar correctamente el nuevo experimento. Tenga en cuenta que los cambios de JavaScript no se pueden deshacer de forma automática.

Recursos relacionados

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

¿Necesitas más ayuda?

Inicia sesión si quieres ver otras opciones de asistencia para solucionar tu problema.