AB Tasty vuelve a expandir los límites de la tecnología para simplificar la optimización de la experiencia de usuario en todo tipo de sitios web.
Estamos orgullosos de anunciar el lanzamiento de la nueva versión de nuestra solución para A/B testing y personalización que es ahora compatible con React.js, Angular.js y cualquier otro framework que permite interfaces dinámicas.
Ahora, realizar campañas de testing o personalización en Single Page Applications (SPA) es más fácil que nunca, y sin necesidad de escribir una línea de código. Esto ha sido posible gracias al extraordinario trabajo de nuestro equipo de I+D que está compuesto por especialistas en estos frameworks.
Esta nueva funcionalidad se integra directamente en AB Tasty y no requiere de ningún tipo de intervención por parte del usuario. Todos estos avances hacen que podamos seguir siendo fieles a nuestra promesa original de simplicidad y eficiencia. Con esta nueva actualización obtendrás los siguientes beneficios:
- Compatibilidad con todos los frameworks presentes y futuros.
- Rendimiento mejorado con unos mejores tiempos de ejecución y un descenso en el tamaño de nuestro tag.
- Eliminación definitiva del efecto flickering.
6 años de innovación continua
¿Cómo funciona una solución de A/B testing?
Para comprender los retos que proponen los nuevos frameworks JavaScript con respecto al A/B testing o la personalización web, debemos entender cómo funcionan las soluciones de optimización de conversiones.
Cuando un usuario accede a una página web, el servidor donde esta se aloja envía el contenido el formato HTML. El navegador, posteriormente, interpretará este código y generará lo que se conoce como Document Object Model (DOM), es decir, la estructura final de la página. Parte del código que envía el servidor también incluye el script de la solución de A/B testing, cuya función es modificar el DOM, lo cual se realiza antes de que la página se muestre.
El DOM puede, por tanto, ser modificado usando, por ejemplo, jQuery, otra librería JavaScript más antigua. Se pueden añadir, cambiar o eliminar elementos de una página como su texto, imágenes o la organización de los mismos.
¿Como impactan los frameworks JavaScript en el A/B testing ?
Los frameworks JavaScript o librerías como React.js, Vue.js o Ember.js, han ganado importancia en los últimos años debido a las mejoras que ofrecen en la experiencia de usuario como el no refrescar la página, una navegación muy interactiva, menor transferencia de datos, etc. Se han convertido en un elemento clave del desarrollo web y son usados por un número creciente de sitios web entre los que se encuentran Facebook, AirBnB, American Express, Spotify, y muchos más.
Sin embargo, la forma en la que estos frameworks funcionan suponen un problema para las herramientas de A/B testing tradicionales del lado del cliente ya que no hay recarga de página cuando un usuario interactúa con el contenido, lo que significa que el código de la solución solo se carga una vez y no es consciente de los cambios introducidos por estos frameworks. Cualquier interacción por parte del usuario activa un cambio en el estado de la aplicación, lo que significa que lo que se muestra en pantalla depende de los datos disponibles y el activador. Cuando se utiliza React.js, un problema común es que los componentes visuales se renderizan cada vez que el estado cambia, de forma que los cambios de la herramienta de A/B testing no permanecen en la página, ya que son eliminados por React.
¿Cómo realizar test A/B en sitios que usan React o Angular ?
Si utilizas Single Page Application en tus páginas o usas alguno de los frameworks JavaScript mencionados anteriormente, realizar test A/B puede ser complicado y necesitar de mucha intervención por parte de desarrolladores. Algunas soluciones necesitan que identifiques los estados que quieres segmentar para activar el código de tu test de forma condicional a través de una API una vez que el usuario se encuentre en el estado determinado. Otras soluciones requieren que se realicen modificaciones en el código de tu aplicación o incluso requieren código personalizado para cada nuevo test.
Este tipo de soluciones puede que se adapten a la organización de tu equipo de trabajo y al conocimiento de estos, pero complica el proceso para aquellos usuarios que quieren lanzar test sin involucrar al equipo de desarrolladores. Todas las soluciones mostradas anteriormente requieren de la intervención de desarrolladores para que generar código. Esto no es nada ideal si lo que buscas es agilidad.
AB Tasty revoluciona la optimización de Single Page Applications
Desde la creación de AB Tasty, nuestra misión ha sido la misma: simplificar el proceso del A/B testing y la personalización y hacer que sean accesibles a todos los equipos, sin importar su nivel de conocimiento técnico. Esta idea está siempre presente en cada acción que tomamos y consideramos que es nuestro deber adaptarnos a las innovaciones y tendencias en lugar de hacer que nuestros usuarios se adapten a estas.
Hace un tiempo, anticipamos la necesidad de soportar nuevos frameworks JavaScript y el impacto que estos tendrían en una solución de A/B testing tradicional, por lo que empezamos a trabajar en una solución innovadora que hiciera a AB Tasty compatible con las nuevas tendencias pero permaneciendo fácil de usar.
Debido a que estos frameworks han venido para quedarse, centramos nuestros esfuerzos en ofrecerte la mejor solución posible. Para conseguirlo, hemos contratado a un ejército de desarrolladores expertos para que se dediquen a este tema (12, para ser más exactos) y, tras meses de arduo trabajo han conseguido una solución al problema bastante buena.
Esta solución se basa en nuestra capacidad de comprobar y aplicar modificaciones en navegadores modernos 60 veces por segundo. Cada 16ms, antes incluso de que el navegador empiece a renderizar la página, comprobamos si existen modificaciones a mostrar y si se da el caso las aplicamos. Esto es un framework totalmente independiente. Por tanto, si la interacción de un usuario genera que un componente de React se vuelva a renderizar, aplicamos la modificación antes de que el navegador empiece a hacerlo. Funciona de la misma forma para Vue.js, Ember.js o cualquier otro framework JavaScript.
Para hacer esto posible, nuestros ingenieros tuvieron que escribir un nuevo meta-lenguaje para describir el contenido de las variaciones e interpretarlo. Esto nos permite almacenar el contenido como JavaScript, mantener un historial con todas las modificaciones y aplicarlas bajo demanda, por ejemplo, cuando se produce un cambio de estado. Esto hace que sea posible realizar test en cualquier tipo de página.
¿Cuáles son los beneficios?
Compatibilidad con todos los frameworks
AB Tasty funciona con React.js y cualquier otro framework JavaScript o librería como Ember.js, Vue.js, Angular.js, Meteor.js, etc. Tampoco importa si usas uno de ellos para todo tu sitio web o si lo usas en áreas específicas como la página del carrito o el embudo de conversión.
Rendimiento
¡Al fin una solución que no requiere jQuery y que elimina cualquier efecto flickering!Al aplicar los cambios continuamente cada 16ms, más rápido incluso que lo que un ojo humano puede detectar, eliminamos el efecto flickering de forma permanente, lo cual podría ser un problema para la experiencia de usuario. Además de la eliminación del efecto flickering, con esta nueva actualización también conseguimos que el tiempo de carga sea menor gracias a un nuevo tag JavaScript que no requiere jQuery.
No es necesaria ninguna acción por tu parte, ni siquiera en los casos más específicos como la recarga de un componente en la interfaz sin modificar la URL. No es necesario notificar a AB Tasty del cambio de estado a través de una API como hacen otras soluciones de A/B testing. Tampoco tendrás que modificar el tag de AB Tasty que ya tienes en tu sitio web.
Retrocompatibilidad
Al usar nuestro nuevo framework (v.2.3) puedes estar tranquilo de que tus campañas se mostrarán correctamente, incluso si no usas ninguno de los frameworks JavaScript anteriormente mencionados o usas versiones anteriores.
