A/B-Experimente

Das Modul "A/B-Experimente" ermöglicht es einerseits Konfigurationen von Makaira datengetrieben zu testen und andererseits im Frontend verschiedene Versionen auszuspielen. So können zum Beispiel unterschiedliche Buyboxes oder verschiedene Seitenstrukturen gegeneinander getestet werden.

Dafür werden die Besucher deiner Website in zwei Gruppen geteilt - eine A-Gruppe, die die Original-Einstellung ausgespielt bekommt und eine B-Gruppe, die eine abweichende Konfiguration ausgespielt bekommt. Wir sprechen hier auch von A- und B-Szenario.

Durch gleichzeitiges Tagging der Nutzer im Makaira Tracking kann anschließend die optimale Konfiguration gefunden werden.  Für die Detailauswertung stehen folgen Metriken zur Verfügung:

  • Bestellungen
  • Conversions
  • Bounce Rate
  • Besuchsdauer
  • Umsatz

Aktuell stehen neben reinen Frontend-Tests der Rankingmix sowie das Machine Learning/Personalisierung für A/B-Tests zur Verfügung. Weitere Makaira-Features werden Stück für Stück auf A/B-Test-Kompatibilität weiterentwickelt.

Voraussetzungen

Einrichtung eines A/B-Tests

  1. Im Makaira zu "A/B-Experimente" wechseln
  2. Neues A/B-Experiment erstellen
  3. alle notwendigen Test-Informationen hinterlegen
  4. Verteilung des Traffics wählen (minimal 1% muss beim original-Traffic verbleiben)
    ACHTUNG: Traffic-Verteilung kann nach Einrichtung nicht mehr geändert werden, damit die Daten korrekt ausgewertet werden können! 
  5. Speichern.

Konfiguration des "B-Szenarios"

Diese Sektion ist nur relevant, falls Du eine Makaira-Konfiguration A/B-testen möchtest

Die Standardkonfiguration, die du wie gewohnt im Makaira hinterlegen kannst bildet immer das "A-Szenario"

Das "B-Szenario" kannst du bearbeiten, indem du auf die A/B-Experiment-Liste gehst und dort auf "Konfigurieren" klickst. Nun wechselt Makaira in die Konfigurations-Oberfläche für das "B-Szenario" – erkennbar durch einen gelben Rahmen. Hier kannst du lediglich die Konfiguration ändern, die du für das A/B-Testing gewählt hast, das Menü wird entsprechend ausgedünnt.

Wenn du fertig mit der Konfiguration bist, kannst du mit "Bearbeitung beenden" am oberen Rand zurückkehren.

Start des A/B-Experiments

Bevor du das A/B-Experiment startest, prüfe noch einmal ob alle Einstellungen im original (A-Variante) und in der B-Variante (siehe "Konfiguration des B-Szenarios") korrekt hinterlegt sind. Nachträgliche Änderungen können zu Verfälschten Test-Ergebnissen führen!

Aktuell kann nur ein Experiment pro Instanz laufen!

Wenn du bereit bist, klicke auf "Experiment starten". Nun werden deinen Kunden basierend auf der Traffic-Einteilung, die du vorgenommen hast A- oder B-Szenarien ausgespielt.

Du kannst jederzeit erkennen, ob ein A/B-Experiment läuft, da in der Menüleiste oben ein gelbes Badge ausgespielt wird.

Wenn du der Meinung bist, dass du genug Daten gesammelt hast, kannst du das Experiment über den Button "Experiment stoppen" wieder anhalten. Ab diesem Moment wird nur noch das Original (das A-Szenario) ausgespielt.

Auswertung des A/B-Experiments

So lange ein A/B-Experiment läuft und nach dessen Beendigung kannst du jederzeit die Experiment-Ergebnisse einsehen. Klicke dafür einfach auf das kleine Statistik-Symbol in der A/B-Experiment-Übersicht.

Hier kannst du wählen nach welchen Messgrößen du die Ergebnisse darstellen möchtest:

  • Bestellungen
  • Conversions
  • Bounce Rate
  • Besuchsdauer
  • Umsatz

Es werden zu jeder Zeit alle Messgrößen erhoben, so lange das Tracking korrekt eingerichtet wurde (siehe Voraussetzungen).

A/B-Testing im Frontend

Storefront

In der Storefront steht eine Helfer-Funktion zur Verfügung, die es erlaubt auf Grundlage der dem Nutzer zugeordneten Gruppe Elemente anzuzeigen oder zu verstecken.

Voraussetzung ist, dass die zu verwendenden Experiment-IDs und Varianten-IDs bei der Implementierung bekannt sind.

Beispiel:

function ExperimentTestComponent() {
  const { isInExperiment } = useAbTesting()
  
  if (isInExperiment({ id: 99, variation: 'FrontendExperiment' })) {
    return <span>Text for Variation</span>
  } else {
    return <span>Text for Original</span>
  }
}