domingo, junio 16, 2024
No menu items!
InicioMarketingCreando una experiencia sin fricciones al experimentar en SPA

Creando una experiencia sin fricciones al experimentar en SPA

Muchos sitios web se crean 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 responsivos. Dichos sitios web le permiten optimizar el contenido que ve su visitante para crear experiencias atractivas y √ļnicas. Si su equipo de desarrollo le dice que su sitio web est√° creado 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 de c√≥mo nosotros, en VWO, hacemos que la experimentaci√≥n en sitios web din√°micos sea efectiva y f√°cil con soporte incorporado para pruebas SPA para que usted se concentre √ļnicamente 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 realiza experimentos en un SPA, los cambios que realiza en su página de destino no son visibles para los usuarios finales. Como resultado, no puedes probar y validar tus ideas tan rápido como quisieras y esto te 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, sólo 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.

Seg√ļn c√≥mo interact√ļa el visitante 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 visitante. Digamos que si un visitante 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 visitante sin afectar el rendimiento. Algunos ejemplos m√°s en los que hay cambios din√°micos en un SPA son los siguientes:

  • Elementos de una lista de resultados de b√ļsqueda que se pueden ampliar 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.
ūüĒ• Leer:  20 formas en las que ahorr√© como dep√≥sito para comprar mi primera propiedad de inversi√≥n cuando ten√≠a 20 a√Īos

Si bien esto es bueno para la experiencia del usuario, 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 resulta dif√≠cil. 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 la página web se carga cuando un visitante 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 garantice que su variación de prueba reemplace la vista original para que los visitantes vean la variación que usted desea que vean. Entonces, al configurar una prueba en un SPA (supongamos que está probando el contenido dentro de un cuadro emergente), esperará que el control y la variación de la prueba se vean así:

Cómo desea que se reflejen los cambios de su prueba en SPA

Pero, en ausencia de soporte SPA, los cambios realizados en la variación volverán al control, haciendo que ambos parezcan idénticos. Más o menos así:

Los cambios de prueba arrojan un error en SPA

Esta es sólo 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 renderizado 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 la prueba A/B.

En segundo lugar, los marcos más recientes como React, Gatsby, Next.js, Vue.js, Angular, etc., utilizan el concepto de renderizado basado 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 recarga automáticamente a su forma original, por lo que los visitantes nunca ven la variación. Esto crea una experiencia subóptima para los visitantes del sitio web.

ūüĒ• Leer:  ¬ŅC√≥mo pueden los datos GPS mejorar el rendimiento de la cadena de suministro? La cadena de suministro moderna es una red compleja de piezas m√≥viles, desde los fabricantes hasta

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

Ahora que hemos discutido el problema, hablemos de la soluci√≥n. El soporte avanzado de SPA nativo de VWO en su editor visual, que forma 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 su sitio web

Si bien los elementos dinámicos se definieron 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 &39;X&39; (Cerrar) en la &39;Página del carrito&39;, aparece una alerta como ventana emergente. Ahora, le gustaría probar los cambios de copia en el cuadro de acción para ver si los mensajes procesables y el llamado a la acción podrían evitar que las personas cierren la página del carrito. El cuadro de alerta no está presente inicialmente en el código del sitio web, pero el marco SPA lo agrega cuando el visitante hace clic en el botón &39;X&39; (Cerrar). Aquí, el botón que abre la ventana emergente en la que está ejecutando la prueba se denomina elemento de destino.

VWO garantiza que el cambio que desea probar se aplique a la ventana emergente tan pronto como se carga. Todo lo que tienes que hacer es habilitar una configuración con solo hacer clic en 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 el cambio que desea probar se aplique al elemento de destino tan pronto como se carga en un SPACómo garantiza VWO que el cambio que desea probar se aplique al elemento de destino tan pronto como se carga en un SPA

¬ŅC√≥mo garantiza VWO que los cambios se apliquen correctamente?

F√°cil.

VWO vigila 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 &39;X&39; 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 recarga, sino que el visitante simplemente interact√ļa con una secci√≥n del sitio web.

Seamos 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, en función del comportamiento del usuario, se agregan, eliminan o modifican elementos. Un árbol DOM es como un depósito de todos los componentes del sitio web (botones, pancartas, ventanas emergentes, widgets, etc.) y mantiene una instantánea del estado actual del sitio web.

ūüĒ• Leer:  Las 13 principales herramientas de investigaci√≥n de productos para vendedores de Amazon en 2024.

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, se aplican cambios antes de que se muestren al visitante. Esto mejora la confiabilidad de las campa√Īas, asegurando que los cambios en las variaciones se apliquen por completo.

¬ŅC√≥mo gestiona VWO los cambios obstaculizados por la representaci√≥n del marco??

VWO mantiene el bot√≥n CTA oculto hasta que se completa la representaci√≥n del marco. VWO comprueba repetidamente si el renderizado est√° realizado. 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 conocimientos.

2. Probar cualquier otro elemento de la p√°gina de 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 afrontar 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) mediante la prueba y los vuelve a aplicar para garantizar la regularidad en la experiencia del usuario.

No se requieren acciones expl√≠citas para permitir esta mejora en VWO. Esta es una caracter√≠stica incorporada disponible para todas las campa√Īas de VWO creadas con el Editor visual, independientemente del marco en el que est√© construido su sitio web.

Veamos algunos ejemplos de casos de uso de cambios que maneja el editor visual VWO.

1. Supongamos que ha eliminado un botón de CTA secundario (digamos 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 (digamos Agregar al carrito). Este es un caso de uso de prueba en el que se elimina un elemento del sitio web. Aunque haya eliminado el botón, persiste en el DOM virtual creado por marcos como React y generará un error cuando se cargue 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 visitantes. Observe c√≥mo puede realizar cambios en un campo de formulario en un SPA y aseg√ļrese de que los visitantes de la muestra para la variaci√≥n vean esos cambios en lugar de ver el control.

¬ŅC√≥mo utilizar VWO para su aplicaci√≥n de p√°gina √ļnica?

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 sitios web de SPA.

Con una integraci√≥n tan sencilla como esta, puedes empezar 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 e interesantes actualizaciones de productos.

Recomendamos

Populares