JavaScript-API

Mit der JavaScript-API steuerst du eigene UI-Logik anhand der zugewiesenen Variante. HTML-Sichtbarkeit und CSS/JS aus dem Dashboard brauchst du dafür nicht zwingend — die API ergänzt sie.

Verwandt: Events & Parameter für Conversion-Events.

Methoden

Methode	Signatur	Rückgabe	Beschreibung
`getVariant`	`window.usertrax.getVariant(testKey)`	`string \| null`	Zugewiesene Varianten-ID für einen Test-Schlüssel, sonst `null`
`getAssignments`	`window.usertrax.getAssignments()`	`Object`	Map `{ [testKey]: variantKey }` aller aktuellen Zuweisungen
`applyElementVisibility`	`window.usertrax.applyElementVisibility()`	`void`	HTML-Sichtbarkeit manuell neu anwenden (z. B. nach eigenem DOM-Update)

Zuweisungen kommen aus dem Speicher des Trackers und fallen auf sessionStorage (usertrax_ab_<test_key>) zurück.

Beispiele

// Variante für einen bestimmten Test abfragen
const variant = window.usertrax.getVariant("button_color_test");
if (variant === "variant_red") {
  console.log("Benutzer sieht roten Button");
}

// Alle A/B-Test-Zuweisungen abrufen
const assignments = window.usertrax.getAssignments();
console.log("Aktuelle A/B-Tests:", assignments);

// Verschiedene Aktionen basierend auf Variante
const checkoutVariant = window.usertrax.getVariant("checkout_flow");

switch (checkoutVariant) {
  case "single_step":
    initSingleStepCheckout();
    break;
  case "multi_step":
    initMultiStepCheckout();
    break;
  default:
    initDefaultCheckout();
}

default deckt ab: Test inaktiv, noch nicht geladen, oder unbekannte Variante.

// Conversion mit A/B-Test-Kontext verfolgen
function trackPurchase(amount) {
  window.usertrax.push({
    event: "purchase",
    total: amount,
    currency: "EUR",
  });
  // A/B-Test-Daten werden automatisch hinzugefügt
}

Du musst ab_test_data nicht manuell setzen. Mehr zu Events: Conversion Tracking — Events.

Queue und Aufruf vor Script-Load

Conversions können vor dem Laden von cvs.js in die Queue gelegt werden — analog zum Schnellstart:

<script>
  window.usertrax = window.usertrax || [];
  // Events sind ok, solange usertrax noch ein Array ist:
  window.usertrax.push({ event: "page_view" });
</script>
<script src="https://usertrax.io/cvs.js" data-key="IHR_API_KEY" defer></script>

A/B-Methoden sind anders: getVariant und getAssignments existieren erst, nachdem das Script die API an window.usertrax gehängt hat. Vorher ist window.usertrax oft nur ein Array — Methodenaufrufe scheitern dann.

function whenUsertraxReady(cb) {
  if (typeof window.usertrax?.getVariant === "function") {
    cb();
    return;
  }
  const id = setInterval(() => {
    if (typeof window.usertrax?.getVariant === "function") {
      clearInterval(id);
      cb();
    }
  }, 50);
  setTimeout(() => clearInterval(id), 10000); // Timeout
}

whenUsertraxReady(() => {
  const v = window.usertrax.getVariant("button_color_test");
  // …
});

Für rein deklarative Varianten brauchst du diesen Warte-Schritt nicht: HTML-Attribute und Dashboard-CSS/JS wendet der Tracker selbst nach der Session-Init an.

SPA-Hinweis

Bei Client-Side-Routing wertet der Tracker Navigationen neu aus und kann die Element-Sichtbarkeit erneut anwenden. Wenn du Markup selbst nachlädst und die Attribute setzt, rufe bei Bedarf applyElementVisibility() auf — Details unter Fehlerbehebung → SPA.