A/B-Testing in TypeScript: Wie man nicht im Kaffeesatz lesen muss

Leben vor A/B-Tests: Warum Intuition trügt

Haben Sie schon einmal mit einem Designer darüber gestritten, welcher Button besser ist – rot oder blau? Oder mit einem Manager, welche Überschrift mehr Klicks bringt? Früher wurden solche Streitigkeiten mit lauter Stimme oder der Position in der Hierarchie entschieden. Heute haben wir A/B-Testing in TypeScript – eine wissenschaftliche Methode, die Vermutungen in Daten verwandelt.

Stellen Sie sich vor: Sie betreiben einen Online-Shop. Es scheint, dass das Hinzufügen von Bewertungen auf der Produktkarte die Verkäufe steigert. Und wenn Sie die Bilderkarussell entfernen und nur ein großes Foto behalten? Ohne Split-Testing werden Sie nie die Wahrheit erfahren. Genau hier kommt TypeScript ins Spiel – starke Typisierung und moderne Werkzeuge machen A/B-Tests zuverlässig und komfortabel.

Was ist A/B-Testing in einfachen Worten

Ein A/B-Test (auch Split-Test genannt) ist ein Experiment, bei dem zwei Benutzergruppen verschiedene Versionen desselben Elements gezeigt werden. Die Kontrollgruppe (A) sieht die aktuelle Version, die experimentelle Gruppe (B) die geänderte. Anschließend vergleichen wir Metriken: Conversion, Verweildauer auf der Website, Klicks.

Warum ist das wichtig? Weil selbst erfahrene Produktmanager in 70% der Fälle falsch liegen. Hypothesentests mit A/B-Tests ermöglichen es, Entscheidungen auf der Grundlage von Daten zu treffen, nicht von Intuition. TypeScript fügt dem Typsicherheit und Entwicklungskomfort hinzu.

Wie A/B-Testing in TypeScript-Anwendungen funktioniert

In TypeScript-Anwendungen wird A/B-Testing normalerweise implementiert durch:

• Benutzerzuweisung – welche Variante einem bestimmten Benutzer angezeigt wird
• Event-Tracking – Erfassung von Daten über Benutzeraktionen
• Analyse der Ergebnisse – Berechnung der statistischen Signifikanz

Betrachten wir jede Phase anhand eines Beispiels. Angenommen, wir möchten eine neue Überschrift auf der Anmeldeseite testen. So sieht das im Code aus:

// Typen für das Experiment definierentype ExperimentVariant = 'control' | 'variant';type ExperimentConfig = {  id: string;  variants: ExperimentVariant[];  weights: number[]; // Summe muss 100 sein};

// Konfiguration des A/B-Testsconst headlineExperiment: ExperimentConfig = {  id: 'headline_test_2024',  variants: ['control', 'variant'],  weights: [50, 50] // 50% sehen alte Überschrift, 50% - neue};

// Funktion zur zufälligen Zuweisungfunction 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}

// Verwendungconst userVariant = assignVariant(headlineExperiment);console.log(`Benutzer erhält Variante: ${userVariant}`);

Benutzersegmentierung: Um Verwirrung zu vermeiden

Es ist wichtig, dass ein Benutzer immer dieselbe Variante sieht. Sonst werden die Daten verfälscht. Dazu verwenden wir eine Benutzer-ID oder Cookies:

function getStableVariant(  userId: string,   config: ExperimentConfig): ExperimentVariant {  // Verwenden Sie einen Hash der userId für eine deterministische Verteilung  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