¿Qué es el client-side testing?
Client-side testing es el proceso de experimentación que renderiza variaciones a nivel del navegador.
Cuando un usuario visita una página web en un navegador, este realiza una solicitud al servidor, que responde enviando el archivo necesario. Luego, el navegador procesa el archivo y muestra la página web. Los elementos interactivos de la página se generan mediante JavaScript dentro de estos archivos.
El JavaScript también se usa para generar variaciones en experimentos como pruebas A/B, pruebas multivariantes y pruebas divididas. Este JavaScript puede ejecutarse a nivel del navegador o del servidor. En el client-side testing, se ejecuta en el navegador, mientras que el proceso de renderizado en el servidor se conoce como server-side testing.
Un caso de uso común es la entrega de variaciones de botones de Call to Action (CTA) en un test A/B. Una vez que el usuario entra en la prueba A/B, los selectores DOM identifican el elemento HTML (en este caso, el botón CTA), luego se ejecuta el JavaScript en el navegador para modificar el CTA y crear una variación. La modificación puede consistir en cambiar el estilo CSS, ocultar, eliminar, redimensionar o duplicar el elemento.
Ventajas de client-side testing
Fácil de adoptar
Existen herramientas de A/B testing del lado del cliente como VWO, que ofrecen un editor WYSIWYG, el cual no requiere codificación para crear variaciones. Esto facilita el testing, especialmente en empresas pequeñas que no cuentan con un equipo de desarrollo.
Bajo coste de inversión
Requiere una inversión financiera menor en comparación con el server-side testing. Es una opción preferida para empresas con presupuestos ajustados o que están comenzando en la optimización.
Permite probar con frecuencia
Permite usar herramientas intuitivas para crear variaciones, lo cual facilita a los equipos de optimización CRO probar nuevas hipótesis con frecuencia.
Limitaciones del client-side testing
Puede reducir la velocidad del sitio web
El JavaScript se ejecuta en el navegador, lo cual puede aumentar el tiempo de carga del contenido principal (LCP) en comparación con el renderizado del lado del servidor.
Efecto de parpadeo (flickering)
En el client-side testing, puede aparecer fugazmente el contenido original antes de cargar la variación, lo que se conoce como efecto de parpadeo. Esto ocurre cuando el navegador carga las variaciones mediante JavaScript.
Limitado a pruebas de UI/UX
Dado que el JavaScript se ejecuta en el navegador, el alcance de la experimentación se limita. Pruebas complejas, como las de algoritmos de búsqueda de productos, no son viables con client-side testing. Este tipo de pruebas complejas y dinámicas solo son posibles mediante el server-side testing.
No permite realizar experimentos omnicanal
Las pruebas del lado del cliente no pueden ejecutarse simultáneamente en la web y en una app. Para experimentación omnicanal, la mejor opción es el server-side testing.
Ciclo de vida del client-side testing
a. Análisis del comportamiento
La optimización comienza con la comprensión del flujo y comportamiento actual de los usuarios. Generalmente, este análisis incluye el estudio de los datos de visitantes mediante herramientas analíticas, el análisis de heatmaps dinámicos, la comprensión de los recorridos por los embudos y la visualización de grabaciones de sesiones.
b. Creación de una hipótesis
A partir del análisis de comportamiento, se formula una hipótesis que señala el elemento a experimentar y el efecto esperado sobre un KPI.
c. Client-side testing
Se realiza un A/B testing o test multivariante del lado del cliente para rastrear y comparar el rendimiento de la variación frente a la página original (control). El experimento finaliza con una versión ganadora. Es importante destacar que los tests multi-armed bandit están ganando popularidad porque dirigen progresivamente más tráfico a la variación con mejor rendimiento antes de alcanzar la significación estadística.
d. Implementación
Al final, la variación ganadora se implementa en el sitio web en vivo, exponiendo a todos los visitantes a la nueva experiencia.
e. Documentación
Todo el proceso de client-side testing se documenta incluyendo aprendizajes, errores corregidos y resultados. Esto sirve como referencia para futuras campañas de optimización.
Resumen de client-side testing
El client-side testing consiste en renderizar variaciones de experimentación a nivel del navegador utilizando JavaScript para modificar elementos como botones de Call to Action (CTA). Es fácil de adoptar, requiere poca inversión y permite realizar tests con frecuencia, aunque puede afectar la velocidad del sitio, provocar efectos de parpadeo (flickering) y está limitado a UI/UX testing.
El ciclo de vida del client-side testing incluye el análisis del comportamiento, la creación de hipótesis, el A/B testing del lado del cliente y la implementación de la variación ganadora. Las pruebas complejas y dinámicas solo son posibles mediante el server-side testing.
Puedes comenzar a hacer client-side testing con VWO de forma gratuita. Más información sobre el paquete inicial VWO Testing en la página de planes y precios.