Zum Hauptinhalt springen
Die Entwicklung einer für A/B-Test-Kampagnen optimierten Website erfordert die Berücksichtigung mehrerer technischer und struktureller Elemente. Die folgenden Abschnitte beschreiben die wichtigsten Aspekte.

​
1. Saubere und semantische HTML-Struktur

  • Richtige Verwendung von HTML-Tags: Verwenden Sie semantische Tags (wie <header>, <footer>, <section> oder <article>), um das Verständnis und die Bearbeitung von Inhalten zu verbessern.
  • Eindeutige Bezeichner: Fügen Sie Elementen klare und relevante IDs (id="unique-id") oder Klassen (class="class-name") hinzu, um eine präzise Zielausrichtung zu ermöglichen.
  • Vermeiden Sie unnötige dynamische Klassen: Vermeiden Sie automatisch generierte Klassen, es sei denn, sie haben eine Bedeutung (wie z. B. solche aus bestimmten CSS-Frameworks).
  • Benutzerdefinierte Tags: Wenn Sie dynamische Klassen verwenden, fügen Sie nicht-dynamische Attribute wie custom-id hinzu, um die Auswahl von Elementen zu vereinfachen.
  • Explizite Namen: Verwenden Sie klare und beschreibende Namen für Klassen, IDs und Variablen (wie .cta-button oder #main-header), um deren Verständlichkeit sicherzustellen.

​
2. Code-Modularität

  • Trennung der Belange: Halten Sie HTML, CSS und JavaScript gut getrennt, um komplexe Abhängigkeiten zu reduzieren. Stellen Sie für JavaScript komplexe Logik im window-Scope bereit, um die Wiederverwendung in verschiedenen Teilen der Website zu ermöglichen. Die Bereitstellung von Logik ermöglicht das effiziente Hinzufügen eines Produkts zum Warenkorb von einer bestimmten Seite aus oder das Validieren eines Formularschritts.
  • Mutation Observers: Verwenden Sie Mutation Observers, um Elemente zu erkennen und Änderungen zu überwachen. Siehe die Kameleoon-API runWhenElementPresent, die zum Erkennen von auf der Seite gerenderten Elementen verwendet wird, hier.
  • Protokolle: Verwenden Sie console.log als bevorzugte Methode zum Debuggen.
  • DataLayer (oder gleichwertiges Objekt): Vermeiden Sie es, Werte derselben Schicht des dataLayer zu ändern. Wenn die erforderlichen Informationen noch nicht verfügbar sind, warten Sie, um den richtigen Wert direkt festzulegen, anstatt einen veralteten Wert nachträglich zu aktualisieren. Siehe die Kameleoon-API runWhenConditionTrue, die verwendet wird, um zu erkennen, wann Informationen auf der Seite geladen sind, hier.
  • DOM-Handhabung: Vermeiden Sie das erneute Rendern des DOM nach dem Laden. Das erneute Rendern überschreibt die von Kameleoon angewendeten Änderungen und erschwert die Erkennung des Ladevorgangs der Seite.

​
3. SPA (Single Page Application)

  • Cookies und LocalStorage (LS): Implementieren Sie eine klare Cookie- oder LS-Verwaltung, um verschiedene Schritte eines Formulars zu identifizieren.
  • Rendering von Events: Um sicherzustellen, dass Kameleoon-Änderungen bestehen bleiben und nicht überschrieben werden, informieren Sie Kameleoon, wenn die Seite oder ein bestimmtes Element das Rendering abgeschlossen hat, indem Sie eine der folgenden Methoden verwenden:
    • Definieren Sie eine Fenstervariable, wie window.pageLoadForKam = true.
    • Lösen Sie ein Event auf der Seite aus, auf das Kameleoon hören kann, wie „pageLoaded” oder „contentUpdated”: window.addEventListener('pageLoaded', () => { runKameleoonVariationCode }).
    • Fügen Sie dem <body>-Tag oder dem Zielelement eine bestimmte Klasse oder ein bestimmtes Attribut hinzu.
  • DataLayer (oder gleichwertiges Objekt): Aktualisieren Sie die dataLayer-Werte nach jeder URL-Änderung, einschließlich Seitenübergängen innerhalb derselben URL (wie Formularschritte). Anstatt bei jeder Änderung neue Schichten zu stapeln, entfernen Sie die alten dataLayer-Einträge, bevor Sie neue hinzufügen. Diese Entfernung stellt sicher, dass Kameleoon die neuesten Werte abruft, da es auf die dataLayer-Definition wartet, bevor die Daten verarbeitet werden. Wenn veraltete Werte über Seiten hinweg bestehen bleiben, kann Kameleoon ausgeführt werden, bevor der dataLayer aktualisiert wird, was zum Abrufen veralteter Daten von der vorherigen Seite führt. Andernfalls finden Sie im Abschnitt „benutzerdefinierte Einrichtung” des Single Page App-Artikels Informationen zur Handhabung der dataLayer-Informationsabfrage.
Weitere Informationen zu bewährten Praktiken finden Sie im Leitfaden zur Einrichtung eines Experiments auf einer Single-Page-App.

​
4. Event-Management

  • Mehrere Trigger: Ermöglichen Sie die Manipulation von Events wie click, mousedown oder hover.