Infórmate sin compromiso, ¡Te llamamos gratis!

Webbing Barcelona catalán Webbing Barcelona castellano info@webbing.cat - Telf: +34 93 169 65 46
Consejos para realizar un Test AB

Test A/B: Consejos y cómo hacer uno

Cuando nuestra web ya está lanzada en la red y obteniendo una cantidad de tráfico considerable toca comenzar a implementar cambios enfocados ya no en conseguir más público sino en aspectos para mejorar la relación entre estos y el sitio, con nosotros, etc. Sin embargo, dichas modificaciones no deben realizarse a fuerza bruta, por ensayo y error, sin un plan. Resulta necesario, antes de hacer nada, realizar algunas pruebas, y ahí es donde entrará una de las mejores estrategias de marketing online, el test A/B.

¿Qué es un test A/B?

Google nos ofrece, una vez más, una herramienta inestimable, en este caso Google Optimize, que es la que nos permite realizar el test A/B.

Este test A/B, o Split Test, es un trabajo de experimentación el cual busca indicarnos si los cambios que realizamos en un sitio web van a tener el efecto que buscamos. Sus características principales incluyen:

  • El uso de la web en su versión original, que sería es punto denominado A.
  • El uso de variables del sitio, denominadas B.
  • Se establece un objetivo para el test que pueda medirse de acuerdo a las métricas disponibles (más tiempo de permanencia en el sitio, mayor conversión…).
  • Lo recomendable es introducir un único cambio por vez. Así se determina con la mayor exactitud lo que dicha modificación supone sin que se crucen valores.
  • La muestra con la que estudiar debe ser representativa de nuestro tráfico, es decir, realista.
  • Debemos establecer una duración determinada.

Optimizar un test A/B

Cómo hacer un test A/B

Aunque realmente damos con más herramientas que nos permiten hacer un test de este tipo, lo cierto es que, para no complicarnos más (no hace falta), trabajaremos con Google Optimize, que es un software completo y gratuito. El procedimiento para analizar si los cambios en tu sitio tendrían éxito pasa por:

  • Definir ciertos aspectos. El objetivo del test. Los elementos a modificar. La página del experimento. La métrica a utilizar para la medición final.
  • Entrar en nuestro perfil de Google Optimize.
  • Vincula la cuenta de Analytics para que se sincronicen las métricas.
  • Ir al menú “Experiencias”.
  • Pulsar en “Crear una nueva de tipo Prueba A/B” (o sólo “Prueba A/B”).
  • Ponle un nombre.
  • Indica la página a analizar.
  • Define una programación para este test. Puedes hacerlo por un total de 90 días como máximo.
  • Realiza, si lo deseas, algunas variantes. Para ello cuentas con un editor visual que te mostrará los cambios.
  • Ahora es momento de introducir nuestro objetivo para el examen.
  • Establece a quién va a afectar el cambio introducido en esta prueba. Puedes segmentar.
  • Obtendrás un código, fruto de la vinculación de Optimize y Analytics, que debes incluir en tu sitio web.
  • Ya puedes iniciar la prueba.

Accede a la pestaña de “Informes” para ver cómo van apareciendo resultados del test. Estos son los que debes encargarte de analizar para comprobar si estás teniendo el éxito esperado.

Sin duda, el test A/B resulta un muy buen recurso para comprobar si cualquier cambio que hayas pensado introducir mejora los resultados que esperas mejorar o no pues, si no llevásemos un control de este tipo sería muy difícil determinar qué aspecto es el que arroja unos u otros valores.

Preprocesadores CSS para diseño web

Preprocesadores de CSS: ¿Qué es Sass?

A la hora de programar toda ayuda es buena. Los profesionales de la rama cada vez nos vemos más colapsados pues, por suerte, el comercio digital es el presente y el futuro, de manera que todo el mundo quiere estar en Internet. Esto hace que, por supuesto, nosotros tengamos que utilizar recursos variados que se adapten a las peticiones de cada cliente. Y uno de ellos son los preprocesadores de CSS, de los que hablaremos a continuación.

¿Qué es un preprocesador CSS?

Volviendo con terminología de diseño como las diferencias entre UX y UI, vamos a ver qué es un preprocesador CSS:

Un preprocesador CSS es una herramienta de traducción de hojas de estilo que son comunes, todas ellas, a un código estándar que los navegadores pueden reconocer. Esto es, un útil para escribir en un código más básico, con bucles, condiciones, variables y funciones, que el CSS que después será convertido.

Cuentan con utilidades que no encontramos en el lenguaje CSS y que, por ende, los navegadores no pueden interpretar. Algunas son mixins, anidación de servidores, variables…

Preprocesadores CSS Mixin

Con este economizamos el tiempo gracias a que podemos, simplemente, escribimos menos código. También debemos destacar que tiene un mantenimiento sencillo y que es un recurso fácil de comprender, pues está muy bien organizado.

Como puntos negativos de esta herramienta encontramos el hecho de tener que aprender un nuevo lenguaje y que el código no sea tan común como se ve en otras circunstancias, pues requiere de compilación específica. Este, además, afecta directamente al flujo de desarrollo creado.

¿Qué Sass?

Sass es uno de estos preprocesadores mencionados. Hay otros que también tienen su sitio en el mercado, como es el caso de Stylus o de Less, si bien, queremos hablar en específico de Sass debido a que es el más utilizado de entre los preprocesadores actuales y tiene una demanda altísima.

Sass cuenta con una sintaxis de código que bien se puede dividir en dos grandes partes.

  • Sintaxis Sass. Difiere un poco de la sintaxis de CSS estándar, eliminando puntos y comas en algunos puntos, utilizando indentados…
  • Sintaxis SCSS. Se parece más a las de CSS, incluyendo algunos aspectos extra simplemente.

Código diseño CSS

A priori podría parecer que realizar estas modificaciones, alejándonos del CSS puro para aprender a usar código nuevo puede ser negativo, pues requiere de un mayor tiempo de aprendizaje, si bien, esta es la opción más acerada para el medio (y no tanto) plazo.

La solución pasa con centrarnos en esa parte de la sintaxis de Sass que se da en SCSS y que se acerca, por tanto, al estándar. De esta manera estamos utilizando código CSS validado y mantenemos nuestros conocimientos previos, que siguen siendo útiles en el caso que nos ocupa, así como la posibilidad de integrar códigos de estilo que ya pudiésemos tener.

La sintaxis SCSS nos permite trabajar diferentes aspectos de una variable que CSS no posibilita, pues, simplemente, se trata de declaraciones que aquí no existen. CSS tiene sus propias variables, pero trabajan con otra sintaxis.

0
Connecting
Please wait...
Enviar un mensaje

Lo sentimos, ahora mismo no estamos online. Déjanos un mensaje y te contestaremos lo antes posible.

Nombre
* Correo electrónico
* Mensaje
Teléfono
    Entra en el Chat

    ¿Necesitas ayuda o deseas un presupuesto? Háblanos por el Chat online y te contestaremos al momento.

    Nombre
    * Correo electrónico
    * ¿Qué pregunta tienes?
    * Teléfono
    ¡Estamos Online!
    ¿Qué te ha parecido nuestra atención?

    ¡Ayúdanos a mejorar! ¿Te ha resultado efectivo nuestro chat?

    ¿Cómo nos puntuarías?
      Uso de cookies

      Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra Política de cookies, pinche el enlace para mayor información.

      ACEPTAR
      Aviso de cookies