Skip to main content
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.

​
FAQ

Die Auswirkungen auf SEO hängen von Ihrer Experimentkonfiguration ab.SEO-Auswirkungen identifizieren und beheben
  • Stellen Sie eine korrekte Installation sicher, um Leistungsprobleme zu vermeiden.
  • Weisen Sie den Variationen gleiche Traffic-Prozentsätze zu.
  • Vermeiden Sie es, Experimente länger als zwei Monate laufen zu lassen. Bots könnten längerfristige Experimente als inkonsistente Inhalte interpretieren.
  • Überwachen Sie die Leistung mit der Kameleoon Debug Assistant-Erweiterung und Lighthouse.
  • Vermeiden Sie wesentliche Änderungen an Seitenelementen, die SEO beeinträchtigen.
Redirect-Richtlinien
  • Leiten Sie nicht 100 % des Traffics auf eine neue URL um.
  • Definieren Sie für beide Seiten eine kanonische URL im HTML, die auf die Version verweist, die Suchmaschinen indexieren sollen.
  • Stellen Sie sicher, dass Ihr HTML kein noindex-Tag verwendet.
  • Verwenden Sie die native Variationsumleitung oder Kameleoon.API.Core.processRedirect("newURL"). Verwenden Sie nicht document.location.href.
Kameleoon-Weiterleitungen sind JavaScript-basiert und temporär.
Vermeiden Sie Black Hat SEO-Praktiken
  • Cloaking: Zeigen Sie Bots und Besuchern nicht unterschiedliche Inhalte.
  • Duplizierter Inhalt: Stellen Sie sicher, dass Redirect-Seiten nicht ohne kanonische Tags identisch mit dem Original sind.
  • Versteckte Redirects: Leiten Sie Besucher nicht auf unerwartete URLs um.
  • Versteckter Text: Verwenden Sie keinen Text, der nur für Suchmaschinen sichtbar ist.
Kameleoon filtert Bot-Traffic automatisch. Weitere Informationen finden Sie unter Wie filtert Kameleoon Bot-Traffic aus den Ergebnissen?.