Cómo VWO crea una experiencia de visitante sin fricciones al ejecutar experimentos en una aplicación de una sola página (SPA)

Una inmersión profunda en cómo el soporte nativo de VWO para sitios web dinámicos le facilita la experimentación a medida que crea experiencias perfectas para sus visitantes.

Muchos sitios web se construyen como aplicaciones de página única (SPA), ya que tienen pocas ventajas clave sobre los sitios web estáticos tradicionales: los sitios web dinámicos son rápidos, compactos y receptivos. Dichos sitios web le permiten optimizar el contenido que ve su usuario para crear experiencias atractivas y únicas. Si escucha de su equipo de desarrollo que su sitio web está construido con React, Vue, AngularJS, Ember o Backbone, probablemente esté trabajando con un SPA, y este artículo es relevante para usted.

En este artículo, hablamos sobre cómo nosotros, en VWO, hacemos que la experimentación en sitios web dinámicos sea efectiva y fácil con el soporte integrado para pruebas de SPA para que usted se concentre solo en los esfuerzos de optimización de la experiencia de su sitio web y nada más.

Pero primero, hablemos del problema que te trajo aquí en primer lugar.

Desafíos de ejecutar experimentos en sitios web dinámicos

Probablemente esté aquí porque cuando ejecuta experimentos en un SPA, los cambios que realiza en su página de destino no son visibles para los usuarios finales. Como resultado, no puede probar y validar sus ideas tan rápido como desea y esto lo frustra.

En primer lugar, comprendamos que los SPA son diferentes de los sitios web tradicionales. La página web completa se carga cada vez que alguien visita un sitio web convencional. En SPA, sin embargo, solo se actualizan algunas secciones de la página. Esto se debe a que, en los SPA, los recursos como HTML, CSS, Scripts, etc., que crean la apariencia de su página web, solo se cargan una vez.

En función de cómo interactúa el usuario con diferentes partes de la página web, lo que ve en una sección específica de la página cambia dinámicamente en respuesta a la acción del usuario. Digamos, si un usuario hace clic en un botón, se abre una ventana emergente. Esta ventana emergente es el cambio dinámico realizado por el marco según la interacción del usuario sin afectar el rendimiento. Algunos ejemplos más donde hay un cambio dinámico en un SPA son los siguientes:

• Elementos en una lista de resultados de búsqueda que se pueden expandir para ver sus detalles.
• En un formulario, algunos campos aparecen en la página solo cuando un visitante selecciona un valor predefinido de un menú desplegable.
• El sitio web utiliza algunos componentes como un calendario, un selector de color, etc. que se recargan cada vez que el usuario necesita usarlos.

Si bien esto es bueno para la experiencia del usuario, se vuelve difícil ejecutar una campaña de prueba con cambios realizados en cualquiera de estos elementos dinámicos (como listas de resultados de búsqueda, menús desplegables, widgets, ventanas emergentes, pancartas, etc.) en sus páginas web. Esto se debe a que las modificaciones realizadas en un componente deben aplicarse cada vez que algo cambia dinámicamente en el sitio web.

Piénselo de esta manera: está ejecutando una prueba en una página web. Cada vez que se carga la página web (por un usuario que visita la página) o la página crea un elemento dinámico como se describe anteriormente, el marco SPA muestra el estado original (diferente de la variación que desea mostrar como parte de su prueba).

Lo que necesita es una plataforma de experimentación que asegure que su variación de prueba reemplace la vista original para que los usuarios vean la variación que usted quiere que vean. Entonces, mientras configura una prueba en un SPA (digamos que está probando el contenido dentro de un cuadro emergente), esperará que el control y la variación de la prueba se vean así:

Pero, en ausencia de compatibilidad con SPA, los cambios realizados en la variación volverán al control, haciendo que ambos se vean idénticos. Bastante así:

Esta es solo una versión simplificada de lo que está sucediendo. Si está interesado en comprender técnicamente lo que sucede detrás de la pantalla, siga leyendo, de lo contrario, puede pasar a la siguiente sección del artículo.

Algunos marcos de sitios web como GatsbyJS, Next.js, ReactJS, etc., utilizan la representación del lado del servidor y almacenan una instantánea de su página web original tal como debería cargarse. Entonces, cuando modifica un elemento en la página con fines de prueba, el marco detecta el cambio como un "problema" y revierte la página a su estado original tal como aparece en la instantánea almacenada. Esto, a su vez, dificulta su prueba A/B.

En segundo lugar, los últimos frameworks como React, Gatsby, Next.js, Vue.js, Angular, etc., utilizan el concepto de representación basada en estado. Por ejemplo, en React, cada vez que se implementa un cambio en uno de los estados debido a la variación de la prueba A/B, la interfaz del sitio web se vuelve a cargar automáticamente a su forma original, por lo que los usuarios nunca ven la variación. Esto crea una experiencia subóptima para los visitantes del sitio web.

Cómo VWO hace que la experimentación en aplicaciones de una sola página sea sencilla

Ahora que hemos discutido el problema, hablemos de la solución. El soporte de SPA nativo avanzado de VWO en su editor visual, que es parte de VWO Testing, garantiza que las modificaciones realizadas en un experimento se apliquen en los SPA para garantizar la confiabilidad de las campañas y brindar una experiencia sin fricciones a sus visitantes.

1. Probar elementos dinámicos en tu sitio web

Si bien los elementos dinámicos se han definido en la sección anterior, veámoslos de cerca con un ejemplo específico. Considere que tiene un sitio web de comercio electrónico. Al hacer clic en el botón 'X' (Cerrar) en la 'Página del carrito', aparece una alerta como una ventana emergente. Ahora, le gustaría probar los cambios de copia en el cuadro de acción para ver si los mensajes accionables y la llamada a la acción pueden evitar que las personas cierren la página del carrito. El cuadro de alerta no está inicialmente presente en el código del sitio web, pero el marco SPA lo agrega cuando el visitante hace clic en el botón 'X' (Cerrar). Aquí, el botón que abre la ventana emergente en la que está ejecutando la prueba se denomina elemento de destino.

VWO se asegura de que el cambio que desea probar se aplique a la ventana emergente tan pronto como se cargue. Todo lo que tiene que hacer es habilitar una configuración con el clic de un botón. Puede leer más sobre esta configuración en nuestro artículo de la base de conocimientos.

¿Cómo garantiza VWO que los cambios se aplican correctamente?

Fácil.

VWO observa los elementos de la página (videos, imágenes, tablas, secciones, etc.) en busca de cambios realizados en ellos en cualquier momento. Por lo tanto, cuando se carga el elemento de destino (el botón Cerrar 'X' en el ejemplo anterior), VWO lo detecta y aplica la modificación que realizó en la Variación. Esto sucede incluso si la página web no se vuelve a cargar, pero el usuario solo interactúa con una sección del sitio web.

Pongámonos un poco técnicos y exploremos más a fondo. Puede omitir esto cómodamente y pasar al siguiente punto si los detalles técnicos no son para usted.

En un sitio web dinámico, según el comportamiento del usuario, se agregan, eliminan o modifican elementos. Un árbol DOM es como un repositorio de todos los componentes del sitio web (botones, pancartas, ventanas emergentes, widgets, etc.) y mantiene una instantánea del estado actual del sitio web.

La biblioteca de VWO utiliza Mutation Observer, una interfaz de navegador que permite a VWO observar cambios en el árbol DOM de un SPA. Esto ayuda a detectar cualquier elemento nuevo agregado, eliminado o modificado en la página. En tal caso, VWO aplica los cambios en los elementos automáticamente. Entonces, cada vez que los elementos se cargan dinámicamente, los cambios se aplican antes de que se muestren al visitante. Esto mejora la confiabilidad de las campañas, asegurando que los cambios en las variaciones se aplican por completo.

¿Cómo gestiona VWO los cambios obstaculizados por la representación del marco ?

VWO mantiene oculto el botón CTA hasta que se completa la representación del marco. VWO comprueba repetidamente si se ha realizado el renderizado. Una vez que se completa la representación del marco, la campaña VWO comienza a ejecutarse.

Puede leer más sobre estas configuraciones en nuestro artículo de la base de conocimiento.

2. Probar cualquier otro elemento de página en su sitio web

Cuando se carga una página, los marcos SPA modernos revierten los elementos modificados a su estado original cada vez que se carga el sitio web. Entonces, si está probando la página, todas sus modificaciones se revertirán al original. No solo los elementos dinámicos, sino todos los elementos de la página, VWO realiza un seguimiento de los cambios que ha realizado para enfrentar el desafío de realizar pruebas con el marco SPA. Al aplicar estos cambios a su página web, VWO detecta todos los cambios realizados en la página (inserción, eliminación y modificación de nodos DOM) por la prueba y los vuelve a aplicar para garantizar la regularidad en la experiencia del usuario.

No se requieren acciones explícitas para habilitar esta mejora en VWO. Esta es una función incorporada disponible para todas las campañas VWO creadas con el Editor visual, independientemente del marco en el que se construya su sitio web.

Veamos algunos ejemplos de casos de uso de cambios que maneja VWO Visual Editor.

1. Supongamos que eliminó un botón de CTA secundario (diga "Agregar a la lista de deseos") de su sitio web de comercio electrónico para probar si este cambio afecta la cantidad de clics en el CTA principal (diga "Agregar al carrito"). Este es un caso de uso de prueba en el que elimina un elemento en el sitio web. Aunque haya eliminado el botón, persiste en el DOM virtual creado por marcos como React y arrojará un error cuando se carga el sitio web.

2. Ahora imagine que su sitio web de comercio electrónico tiene un flujo de registro que muestra un cuadro de entrada de texto para capturar las direcciones de correo electrónico de los visitantes además del botón 'Enviar ahora'. Cuando realiza cambios en la apariencia del cuadro de entrada de texto, los componentes de estilo del sitio web asociados con él cambian. El editor visual de VWO garantiza que los últimos cambios aplicados sean los que ven los usuarios. Observe cómo puede realizar cambios en un campo de formulario en un SPA y asegúrese de que los visitantes muestreados para la variación vean esos cambios en lugar de ver el control.

¿Cómo utilizar VWO para su solicitud de una sola página?

Para usar VWO para su SPA, simplemente necesita agregar el VWO SmartCode en la sección principal de su sitio web y disfrutar del soporte predeterminado para los sitios web de SPA.

Con una integración tan simple como esta, puede comenzar de inmediato. Regístrese para una prueba gratuita, explore las capacidades de VWO o solicite una demostración con nuestros expertos en productos. También puede obtener más información sobre nuestras últimas y emocionantes actualizaciones de productos.