Zum Hauptinhalt springen
Um eine Website zu entwickeln, die fuer A/B-Test-Kampagnen einfach zu nutzen ist, ist es entscheidend, mehrere technische und strukturelle Elemente zu beruecksichtigen. Hier sind die wichtigsten Aspekte.

​
1. Saubere und semantische HTML-Struktur

  • Korrekte Verwendung von HTML-Tags: Verwenden Sie semantische Tags (<header>, <footer>, <section>, <article> usw.), um das Verstaendnis und die Manipulation von Inhalten zu verbessern.
  • Eindeutige Bezeichner: Fuegen Sie Elementen klare und relevante IDs (id="unique-id") oder Klassen (class="class-name") fuer praezises Targeting hinzu.
  • Vermeiden Sie unnoetige dynamische Klassen: Vermeiden Sie automatisch generierte Klassen, sofern sie nicht aussagekraeftig sind (z. B. aus bestimmten CSS-Frameworks).
  • Benutzerdefinierte Tags: Wenn Sie dynamische Klassen verwenden, fuegen Sie nicht-dynamische Attribute wie custom-id hinzu, um die Elementauswahl zu vereinfachen.
  • Explizite Namen: Verwenden Sie klare und beschreibende Namen fuer Klassen, IDs und Variablen (z. B. .cta-button, #main-header), damit sie auch fuer Aussenstehende verstaendlich sind.

​
2. Code-Modularitaet

  • Trennung der Zustaendigkeiten: Halten Sie HTML, CSS und JavaScript gut getrennt, um komplexe Abhaengigkeiten zu reduzieren. Fuer den JavaScript-Teil koennen Sie komplexe Logik im window-Scope verfuegbar machen, damit sie an verschiedenen Stellen der Website wiederverwendet werden kann. So koennen Sie beispielsweise das Hinzufuegen eines Produkts zum Warenkorb von einer bestimmten Seite aus ermoeglichen oder einen Formularschritt effizient validieren.
  • Mutation Observers: Ermoeglichen Sie die Verwendung von Mutation Observers, einer optimierten Methode zum Erkennen von Elementen auf der Seite und zum Ueberwachen von Aenderungen. Sehen Sie sich die spezifische API runWhenElementPresent an, die zum Erkennen von auf der Seite gerenderten Elementen verwendet wird, hier.
  • Logs: Erlauben Sie die Verwendung von console.log als bevorzugte Debug-Methode.
  • DataLayer (oder aequivalentes Objekt): Vermeiden Sie es, die Werte derselben Ebene des dataLayer zu aendern. Wenn die erforderlichen Informationen noch nicht verfuegbar sind, warten Sie, um den korrekten Wert direkt zu setzen, anstatt einen veralteten Wert nachtraeglich zu aktualisieren. Sehen Sie sich die spezifische API runWhenConditionTrue an, die zum Erkennen, wann Informationen auf der Seite geladen sind, verwendet wird, hier.
  • DOM-Handhabung: Vermeiden Sie es, das DOM nach dem Laden erneut zu rendern, da dies die von Kameleoon vorgenommenen Aenderungen ueberschreibt und es schwierig macht zu erkennen, wann die Seite vollstaendig geladen ist.

​
3. SPA (Single Page Application)

  • Cookies und LocalStorage (LS): Implementieren Sie eine klare Cookie- oder LS-Verwaltung, um beispielsweise verschiedene Schritte eines Formulars zu identifizieren.
  • Ereignis-Rendering: Um sicherzustellen, dass die Aenderungen von Kameleoon bestehen bleiben und nicht ueberschrieben werden, koennen Sie Kameleoon mitteilen, wann die Seite oder ein bestimmtes Element fertig gerendert ist, indem Sie eine der folgenden Methoden verwenden:
    • Definieren Sie eine Window-Variable, z. B. window.pageLoadForKam = true.
    • Loesen Sie ein Ereignis auf der Seite aus, das Kameleoon abhoeren kann, z. B. mit “pageLoaded” oder “contentUpdated”: window.addEventListener('pageLoaded', () => { runKameleoonVariationCode }).
    • Fuegen Sie dem <body>-Tag oder dem Zielelement eine bestimmte Klasse oder ein Attribut hinzu.
  • DataLayer (oder aequivalentes Objekt): Aktualisieren Sie die dataLayer-Werte nach jeder URL-Aenderung, einschliesslich Seitenuebergaengen innerhalb derselben URL (z. B. Formularschritte). Anstatt bei jeder Aenderung neue Ebenen zu stapeln, entfernen Sie die alten dataLayer-Eintraege, bevor Sie neue hinzufuegen. So wird sichergestellt, dass Kameleoon die neuesten Werte abruft, da es darauf wartet, dass der dataLayer definiert ist, bevor die Daten verarbeitet werden. Wenn veraltete Werte seitenuebergreifend bestehen bleiben, kann Kameleoon ausgefuehrt werden, bevor der dataLayer aktualisiert ist, was zum Abrufen veralteter Daten von der vorherigen Seite fuehrt. Andernfalls lesen Sie den Abschnitt “Benutzerdefinierte Einrichtung” in diesem Artikel, um die dataLayer-Informationsabfrage optimal zu handhaben.
Folgen Sie dem Leitfaden zu Einrichten eines Experiments auf einer Single-Page-Application fuer Best Practices.

​
4. Ereignisverwaltung

  • Mehrere Trigger: Ermoeglichen Sie die Verarbeitung von Ereignissen: click, mousedown, hover usw.