HTML-Varianten

usertrax steuert die Sichtbarkeit von HTML-Elementen anhand von Datenattributen. So kannst du Inhaltsversionen testen, ohne eigenes JavaScript für Show/Hide zu schreiben.

Übersicht

Die HTML-Element-Sichtbarkeitsfunktion:

Zeigt/versteckt Elemente basierend auf A/B-Test-Varianten
Behandelt Fallback-Inhalte, wenn noch keine Variante zugewiesen ist
Funktioniert mit mehreren gleichzeitigen Tests
Beobachtet dynamisch eingefügte Elemente (z. B. in SPAs)
Benötigt keine JavaScript-Kenntnisse für den Grundfall

data-usertrax-ab-test-group muss dem Test-Schlüssel entsprechen, data-usertrax-ab-test-variant dem Varianten-Schlüssel aus dem Dashboard.

Datenattribute

Attribut	Beschreibung	Erforderlich
`data-usertrax-ab-test-group`	Eindeutiger Bezeichner für die Testgruppe (= Test-Schlüssel)	Ja
`data-usertrax-ab-test-variant`	Die Variante, zu der dieses Element gehört	Ja
`data-usertrax-ab-test-fallback`	Als Fallback markieren (sichtbar, solange noch keine Variante zugewiesen ist)	Nein

<!-- Fallback-Element (standardmäßig angezeigt) -->
<div
  data-usertrax-ab-test-group="pricing-display"
  data-usertrax-ab-test-variant="single-price"
  data-usertrax-ab-test-fallback
>
  <span class="price">99 €/Monat</span>
</div>

<!-- Alternative Variante (standardmäßig versteckt) -->
<div
  style="display: none"
  data-usertrax-ab-test-group="pricing-display"
  data-usertrax-ab-test-variant="price-range"
>
  <span class="price">89 – 129 €/Monat</span>
</div>

Seitenaufbau: Elemente mit data-usertrax-ab-test-fallback sind sichtbar; andere Varianten bleiben per display: none versteckt.
A/B-Test-Laden: Sobald die Zuweisung steht, zeigt der Tracker nur Elemente der zugewiesenen Variante.
Automatisch: Sichtbarkeitsänderungen übernimmt der Tracker — inkl. nach SPA-Navigation und bei nachgeladenem DOM.

Hero- und CTA-Beispiele

Hero-Headline
CTA-Button

<h1
  data-usertrax-ab-test-group="hero_headline"
  data-usertrax-ab-test-variant="control"
  data-usertrax-ab-test-fallback
>
  Conversions tracken. Ohne Cookies.
</h1>

<h1
  style="display: none"
  data-usertrax-ab-test-group="hero_headline"
  data-usertrax-ab-test-variant="benefit_first"
>
  Mehr Attribution. Weniger Banner-Friction.
</h1>

Beide Headlines sollten semantisch und SEO-seitig sinnvoll sein — nicht nur Keyword-Spam. Siehe Best Practices.

<div
  data-usertrax-ab-test-group="cta_button"
  data-usertrax-ab-test-variant="get_started"
  data-usertrax-ab-test-fallback
>
  <button type="button" data-usertrax="signup" class="btn-primary">
    Jetzt starten
  </button>
</div>

<div
  style="display: none"
  data-usertrax-ab-test-group="cta_button"
  data-usertrax-ab-test-variant="free_trial"
>
  <button type="button" data-usertrax="signup" class="btn-primary">
    Kostenlos testen
  </button>
</div>

data-usertrax="signup" sorgt dafür, dass der Klick als Conversion zählt — und die A/B-Zuweisung automatisch mitgeschickt wird.

Erweiterte Beispiele

Mehrere Testgruppen
Komplexe Layout-Variationen

<!-- Testgruppe 1: Header-Stil -->
<div
  data-usertrax-ab-test-group="header-style"
  data-usertrax-ab-test-variant="minimal"
  data-usertrax-ab-test-fallback
>
  <header class="header-minimal">
    <nav>Home | Über uns | Kontakt</nav>
  </header>
</div>

<div
  style="display: none"
  data-usertrax-ab-test-group="header-style"
  data-usertrax-ab-test-variant="featured"
>
  <header class="header-featured">
    <nav>Home | Über uns | Kontakt</nav>
    <div class="announcement">Neue Features verfügbar!</div>
  </header>
</div>

<!-- Testgruppe 2: CTA-Button -->
<div
  data-usertrax-ab-test-group="cta-button"
  data-usertrax-ab-test-variant="primary"
  data-usertrax-ab-test-fallback
>
  <button class="btn-primary">Jetzt starten</button>
</div>

<div
  style="display: none"
  data-usertrax-ab-test-group="cta-button"
  data-usertrax-ab-test-variant="secondary"
>
  <button class="btn-secondary">Kostenlos testen</button>
</div>

<!-- Layout-Variante A: Einzelspalte -->
<div
  data-usertrax-ab-test-group="page-layout"
  data-usertrax-ab-test-variant="single-column"
  data-usertrax-ab-test-fallback
>
  <div class="content-single">
    <h1>Willkommen</h1>
    <p>Einspaltiges Layout für bessere Lesbarkeit.</p>
    <div class="sidebar">Schnelllinks</div>
  </div>
</div>

<!-- Layout-Variante B: Zweispaltig -->
<div
  style="display: none"
  data-usertrax-ab-test-group="page-layout"
  data-usertrax-ab-test-variant="two-column"
>
  <div class="content-two-column">
    <div class="main-content">
      <h1>Willkommen</h1>
      <p>Zweispaltiges Layout für mehr Inhalt.</p>
    </div>
    <div class="sidebar">Zusätzliche Informationen</div>
  </div>
</div>

Anti-Patterns

FOUC ohne Fallback

<!-- Schlecht: beide Varianten versteckt, kein Fallback → kurzer Leerraum -->
<div style="display: none" data-usertrax-ab-test-group="hero" data-usertrax-ab-test-variant="a">
  …
</div>
<div style="display: none" data-usertrax-ab-test-group="hero" data-usertrax-ab-test-variant="b">
  …
</div>

<!-- Gut: Kontrolle als Fallback sichtbar, bis die Zuweisung steht -->
<div
  data-usertrax-ab-test-group="hero"
  data-usertrax-ab-test-variant="a"
  data-usertrax-ab-test-fallback
>
  …
</div>
<div style="display: none" data-usertrax-ab-test-group="hero" data-usertrax-ab-test-variant="b">
  …
</div>

Weitere Tipps gegen Flimmern: Fehlerbehebung.

Nicht übereinstimmende Schlüssel

<!-- Schlecht: Gruppe ≠ Test-Schlüssel im Dashboard (button_color_test) -->
<div data-usertrax-ab-test-group="buttonColor" …>

<!-- Gut: exakt gleicher String wie Test- und Varianten-Schlüssel -->
<div
  data-usertrax-ab-test-group="button_color_test"
  data-usertrax-ab-test-variant="variant_red"
  …
>

Groß-/Kleinschreibung und Unterstriche zählen. getAssignments() in der Konsole hilft beim Abgleich.

Best Practices für HTML-Element-Sichtbarkeit

<!-- Gut: Klar und beschreibend -->
data-usertrax-ab-test-group="hero-headline-test"

<!-- Vermeiden: Zu generisch -->
data-usertrax-ab-test-group="test1"

<!-- Gut: Konsistentes Namensmuster -->
data-usertrax-ab-test-variant="variant-control"
data-usertrax-ab-test-variant="variant-treatment"

<!-- Vermeiden: Inkonsistente Namen -->
data-usertrax-ab-test-variant="control"
data-usertrax-ab-test-variant="treatment_b"

<!-- Immer ein Fallback-Element einbeziehen -->
<div
  data-usertrax-ab-test-group="important-content"
  data-usertrax-ab-test-variant="default"
  data-usertrax-ab-test-fallback
>
  <p>Standard-Inhalt, der beim ersten Paint sichtbar ist</p>
</div>

Fehlerbehebung bei HTML-Sichtbarkeit

Element wird nicht angezeigt
Mehrere Elemente werden angezeigt

A/B-Test-Zuweisung prüfen:

console.log("Current variants:", window.usertrax.getAssignments());

Datenattribute überprüfen:

<!-- Sicherstellen, dass Gruppe und Variante exakt übereinstimmen -->
data-usertrax-ab-test-group="my-test"
data-usertrax-ab-test-variant="my-variant"

Auf doppelte Gruppen prüfen:

<!-- Sicherstellen, dass Gruppennamen eindeutig sind -->
data-usertrax-ab-test-group="unique-test-name"

Variantennamen überprüfen:

<!-- Sicherstellen, dass Variantennamen innerhalb einer Gruppe eindeutig sind -->
data-usertrax-ab-test-variant="variant-a"
data-usertrax-ab-test-variant="variant-b"

Ausführlicher: Fehlerbehebung.

Integration mit anderen Funktionen

CSS-Varianten
Event-Tracking

<!-- HTML-Sichtbarkeitssteuerung -->
<div
  data-usertrax-ab-test-group="layout"
  data-usertrax-ab-test-variant="compact"
  data-usertrax-ab-test-fallback
>
  <div class="content-compact">
    <h2>Kompaktes Layout</h2>
  </div>
</div>

<!-- CSS aus der A/B-Test-Konfiguration wird zusätzlich angewendet -->
<div
  style="display: none"
  data-usertrax-ab-test-group="layout"
  data-usertrax-ab-test-variant="expanded"
>
  <div class="content-expanded">
    <h2>Erweitertes Layout</h2>
  </div>
</div>

<!-- Elemente fügen automatisch A/B-Test-Daten zu Conversions hinzu -->
<div
  data-usertrax-ab-test-group="cta-style"
  data-usertrax-ab-test-variant="button"
  data-usertrax-ab-test-fallback
>
  <button data-usertrax="signup" class="btn-primary">Registrieren</button>
</div>

<div
  style="display: none"
  data-usertrax-ab-test-group="cta-style"
  data-usertrax-ab-test-variant="link"
>
  <a href="#" data-usertrax="signup" class="btn-link">Registrieren</a>
</div>