Pruebas A/B en TypeScript: cómo no adivinar con el café molido

La vida antes de las pruebas A/B: por qué falla la intuición

¿Alguna vez ha discutido con un diseñador sobre qué botón es mejor: el rojo o el azul? ¿O con un gerente sobre qué título atraerá más clics? Antes, estos debates se resolvían con voz alta o jerarquía. Hoy tenemos las pruebas A/B en TypeScript: un método científico que convierte las conjeturas en datos.

Imagínese: lanza una tienda en línea. Parece que si agrega reseñas a la ficha del producto, las ventas aumentarán. ¿Y si quita el carrusel de imágenes y deja una sola foto grande? Sin las pruebas divididas, nunca sabrá la verdad. Aquí es donde TypeScript viene al rescate: el tipado estricto y las herramientas modernas hacen que las pruebas A/B sean confiables y convenientes.

Qué son las pruebas A/B en palabras sencillas

Una prueba A/B (también llamada test dividido) es un experimento en el que se muestran dos versiones diferentes de un mismo elemento a dos grupos de usuarios. El grupo de control (A) ve la versión actual, el grupo experimental (B) ve la versión modificada. Luego comparamos métricas: conversión, tiempo en el sitio, clics.

¿Por qué es importante? Porque incluso los gerentes de producto experimentados se equivocan en el 70% de los casos. El testeo de hipótesis mediante pruebas A/B permite tomar decisiones basadas en datos, no en la intuición. TypeScript añade seguridad de tipos y facilidad de desarrollo.

Cómo funcionan las pruebas A/B en aplicaciones TypeScript

En las aplicaciones TypeScript, las pruebas A/B generalmente se implementan mediante:

• Distribución de usuarios: qué variante mostrar a un usuario específico
• Seguimiento de eventos: recopilación de datos sobre las acciones del usuario
• Análisis de resultados: cálculo de la significancia estadística

Veamos cada etapa con un ejemplo. Supongamos que queremos probar un nuevo título en la página de inicio de sesión. Así es como se ve en el código:

// Definimos los tipos para el experimentotype ExperimentVariant = 'control' | 'variant';type ExperimentConfig = {  id: string;  variants: ExperimentVariant[];  weights: number[]; // la suma debe ser 100};

// Configuración de la prueba A/Bconst headlineExperiment: ExperimentConfig = {  id: 'headline_test_2024',  variants: ['control', 'variant'],  weights: [50, 50] // 50% ve el título antiguo, 50% el nuevo};

// Función de distribución aleatoriafunction assignVariant(config: ExperimentConfig): ExperimentVariant {  const random = Math.random() * 100;  let cumulativeWeight = 0;    for (let i = 0; i < config.variants.length; i++) {    cumulativeWeight += config.weights[i];    if (random < cumulativeWeight) {      return config.variants[i];    }  }    return config.variants[0]; // fallback}

// Usoconst userVariant = assignVariant(headlineExperiment);console.log(`El usuario recibirá la variante: ${userVariant}`);

Segmentación de usuarios: para evitar confusiones

Es importante que un mismo usuario vea siempre la misma variante. De lo contrario, los datos se corromperán. Para ello, usamos el identificador de usuario o cookies:

function getStableVariant(  userId: string,   config: ExperimentConfig): ExperimentVariant {  // Usamos un hash del userId para una distribución determinista  const hash = simpleHash(userId + config.id);  const normalizedHash = hash % 100;    let cumulativeWeight = 0;  for (let i = 0; i < config.variants.length; i++) {    cumulativeWeight += config.weights[i];    if (normalizedHash < cumulativeWeight) {      return config.variants[i];    }  }    return config.variants[0];}

function simpleHash(str: string): number {  let hash = 0;  for (let i = 0; i < str.length; i++) {    const char = str.charCodeAt(i);    hash = ((hash << 5) - hash) + char;    hash |= 0; // Conv