Zum Hauptinhalt springen
Diese Seite enthält eine schrittweise Anleitung zur Installation von Kameleoon, einschließlich der Erstellung eines Projekts für Ihre Website, mobile App oder beides sowie der Konfiguration Ihrer Projekteinstellungen.

​
Übersicht

Bevor Sie Experimente auf Ihrer Website oder mobilen App starten, müssen Sie das Kameleoon-Skript installieren. Dieses Skript, das Ihren eindeutigen Projektcode enthält, muss dem <head>-Tag Ihres Quellcodes hinzugefügt werden. Wenn Ihr Paket dies zulässt, können Sie mehrere Sites oder Apps von Ihrem Kameleoon-Konto aus verwalten, was für Tests in Staging- oder Pre-Production-Umgebungen nützlich ist. Es stehen mehrere Setup-Optionen zur Verfügung. Ihre Reihenfolge folgt diesem Muster:

​
Projektkonfiguration

In der Kameleoon-App sehen Sie eine Liste Ihrer Projekte. Standardmäßig haben Sie eine Projektkarte für die Website oder mobile App, die Sie bei der Anmeldung angegeben haben.

​
Ein bestehendes Projekt konfigurieren

So ändern Sie die Einstellungen eines Projekts:
  1. Klicken Sie auf der Projektkarte auf Setup.
  2. Überprüfen Sie die Projektkonfiguration und klicken Sie auf Modify setup.
  3. Klicken Sie im erscheinenden Pop-up erneut auf Modify, um auf Ihre Einstellungen zuzugreifen.

​
Ein neues Projekt erstellen

So erstellen Sie ein neues Projekt:
  1. Klicken Sie auf New project.
  2. Geben Sie die URL Ihrer Site ein sowie optional einen Namen und eine Beschreibung.
  3. Klicken Sie auf Add.
Eine neue Seite wird angezeigt, um Sie durch die Installation zu führen.
Ihre Möglichkeit, weitere Projekte zu erstellen, hängt von Ihrem Kameleoon-Paket ab.

​
Wählen Sie Ihre Implementierungseinstellungen

Bei der Einrichtung eines neuen Projekts werden Sie gebeten, Implementierungseinstellungen zu wählen. Technische Details, einschließlich der Installation von Kameleoon über einen Tag Manager oder der Implementierung benutzerdefinierter Skripttypen, finden Sie in diesem Artikel.

​
Einwilligung

Bevor Sie das Kameleoon-Skript auf Ihrer Website installieren, stellen Sie sicher, dass Ihre Konfiguration den Einwilligungsverwaltungsrichtlinien Ihrer Organisation entspricht. Wenn Sie eine Consent Management Platform (CMP) verwenden, können Sie diese in Kameleoon integrieren, um zu steuern, wann Experimente und Datenerfassung aktiviert werden. Einzelheiten finden Sie im Artikel zur Einwilligungsverwaltung von Kameleoon.

​
Domain-Konfiguration

Sie können festlegen, welche Domains und Subdomains das Kameleoon-Skript laden und auf seine Funktionen zugreifen dürfen.
  • Klicken Sie unter Domain configuration auf Add a domain/subdomain, um Domains für das Cross-Domain-Tracking auf die Whitelist zu setzen.
    • Damit können Sie den Graphic Editor von Kameleoon verwenden und Besucherdaten über Domains hinweg speichern/abrufen.
    • Wenn Sie versuchen, Kameleoon auf einer nicht aufgelisteten Domain zu verwenden, schlägt das Laden aufgrund der Browser-Sicherheitsrichtlinien (CORS) fehl.

​
Cross-Domain-Tracking

Cross-Domain-Tracking ermöglicht es Ihnen,:
  • denselben Besucher über verschiedene Domains und Subdomains hinweg zu verfolgen (z. B. example.com und example.org).
  • zu vermeiden, dass Benutzer als „neue Besucher” eingestuft werden, wenn sie zwischen Domains wechseln.
  • konsistente Personalisierungs- und Experiment-Erlebnisse über alle Properties hinweg anzubieten.
Sie sollten Cross-Domain-Tracking aktivieren, wenn Sie Sitzungsdaten über mehrere Domains hinweg vereinheitlichen möchten.

​
Berechtigungen

Wenn Sie Subdomains ansprechen, müssen Sie die folgenden HTTP-Header konfigurieren:
Erfahren Sie mehr über Apples Intelligent Tracking Prevention (ITP), das Cross-Site-Tracking in Safari einschränkt, in dieser ITP-Dokumentation.

​
Ressourcen-Hosting

Sie können wählen, ob Kameleoon seine öffentlichen Ressourcen hostet oder ob Sie diese selbst hosten möchten.
  • Wählen Sie eine Option aus dem Dropdown-Menü auf der Setup-Seite.
  • Wenn Sie Selbst-Hosting wählen, geben Sie die URL Ihres Content Delivery Network (CDN) an.
Erfahren Sie mehr über Ressourcen-Hosting hier.

​
Das Kameleoon-Skript installieren

Nachdem Sie die URL Ihrer Site definiert haben, generiert Kameleoon ein Skript zur Installation.
  1. Kopieren Sie den bereitgestellten Code-Schnipsel.
  2. Fügen Sie ihn unmittelbar nach dem <head>-Tag im Quellcode Ihrer Site ein.
  3. Speichern Sie Ihre aktualisierten Seiten und laden Sie sie auf Ihren Server hoch.
  4. Klicken Sie in Kameleoon auf Validate.
Für beste Ergebnisse installieren Sie das Skript so früh wie möglich im Ladeprozess der Seite.
Wenn Kameleoon das Skript nicht erkennen kann, stellen Sie sicher, dass es korrekt hinzugefügt wurde. Sie können die Überprüfung überspringen, wenn Sie sicher sind, dass das Skript vorhanden ist.

​
Flackern verhindern

Beim Laden einer Webseite sehen Benutzer möglicherweise kurzzeitig die Originalversion, bevor die Variation angewendet wird. Dieses kurze Aufblitzen wird als Flackereffekt oder Flickering bezeichnet. Flackern tritt auf, wenn die Änderungen der Variation verzögert werden, wodurch ein sichtbarer Wechsel zwischen dem Original- und dem geänderten Inhalt entsteht. Flackern kann die Benutzererfahrung und die Zuverlässigkeit von Experimenten beeinträchtigen, insbesondere bei A/B-Tests.

​
Richtlinien zur Vermeidung von Flackern

​
Implementierung

Platzieren Sie das Kameleoon-Skript so weit oben wie möglich im <head>-Tag. Stellen Sie sicher, dass das Skript in weniger als einer Sekunde geladen wird, idealerweise unter 500 ms. Verwenden Sie zur Überprüfung der Ladezeit von Kameleoon den Tab Network in den Entwicklertools Ihres Browsers.
Der effektivste Weg, ein schnelles Laden sicherzustellen, ist die direkte Installation von Kameleoon in Ihrem HTML-Quellcode, anstatt einen Tag Manager wie Google Tag Manager zu verwenden. Optional können Sie das Anti-Flicker-Skript als zusätzliche Schutzschicht gegen Flackern verwenden. Weitere Informationen finden Sie in der Entwicklerdokumentation von Kameleoon. Wenn Sie diese Option aktivieren, stehen Ihnen mehrere Konfigurationen zur Verfügung, um zu steuern, wie sich Kameleoon bei einem Timeout verhält. Die Timeout-Dauer ist im installierten Skript konfigurierbar und standardmäßig auf 1.000 ms eingestellt. Um die verfügbaren Optionen zu erkunden, sehen Sie sich den Screenshot unten an.
Sie können auf das Dropdown-Menü Behavior if timeout occurs zugreifen, indem Sie auf Admin > Configuration > General klicken.

​
Einwilligung

Wenn Ihre Einwilligungsrichtlinie auf consent required gesetzt ist, kann beim ersten Seitenaufruf ein Flackern auftreten, wenn der Besucher seine Einwilligung noch nicht erteilt hat. Dieses Flackern tritt auf, wenn Sie sich entscheiden, Kameleoon teilweise oder vollständig zu blockieren, wenn die Einwilligung unbekannt ist. Um Flackern zu vermeiden, sollten Sie Kameleoon nicht blockieren, sodass Experimente angezeigt werden können, bevor die Einwilligung auf der Landing-Page des Besuchers erteilt wird. Dieser Ansatz ist vollständig konform mit Datenschutzbestimmungen wie DSGVO, CCPA und anderen wichtigen Rahmenwerken im Vereinigten Königreich, in Kanada und in den USA, da vor der Einwilligung kein Tracking oder Datenspeicherung (cookies/localStorage) erfolgt. Um die verfügbaren Optionen zu erkunden, sehen Sie sich den Screenshot unten an.
Um auf das Dropdown-Menü Behavior when consent is unknown zuzugreifen, klicken Sie auf Admin > Configuration > Experiment/Personalization.

​
Targeting

Verwenden Sie früh ladende Informationen
Für optimale Leistung sollten Sie das Targeting auf Daten basieren, die sofort beim Laden der Seite verfügbar sind, wie z. B.:
  • Seiten-URL
  • Browser-Typ
  • Gerätetyp
  • cookies/localStorage
Wenn möglich, vermeiden Sie das Targeting von Elementen, die spät geladen werden, wie z. B. dataLayer-Variablen. Da diese asynchron geladen werden können, kann ihre Verwendung für das Targeting die Ausführung der Variation verzögern. Wenn ein Segment auf einer benutzerdefinierten JS-Bedingung oder Custom Data basiert, die wiederum vom dataLayer abhängt, kann ebenfalls Flackern auftreten. Um Flackern zu minimieren, stellen Sie sicher, dass alle für das Targeting verwendeten Bedingungen so früh wie möglich im Seitenlebenszyklus aufgelöst werden. Weitere Informationen zu allen Targeting-Bedingungen im Segment Builder finden Sie in diesem Artikel.

​
Variationscode

Verwenden Sie CSS anstelle von JavaScript für visuelle Änderungen
Die Verwendung von CSS anstelle von JavaScript sorgt für ein schnelleres und reibungsloseres Rendering. CSS sollte verwendet werden für:
  • Ausblenden oder Ändern von Elementen
  • Austausch von Blöcken
  • Ändern von Stilen oder Text
Optimieren Sie die JavaScript-Ausführung mit der Activation API
Wenn JavaScript erforderlich ist, verwenden Sie die Activation API von Kameleoon, um sicherzustellen, dass Variationen zum richtigen Zeitpunkt angewendet werden:
  • runWhenConditionTrue: Führt den Code aus, wenn eine bestimmte Bedingung erfüllt ist.
  • runWhenElementPresent: Stellt sicher, dass die Variation angezeigt wird, sobald das angesprochene Element auf der Seite geladen ist. Durch die Verwendung dieser Methoden werden Verzögerungen vermieden, die durch asynchron geladene Elemente verursacht werden.
Umgang mit Single-Page-Applications
Wenn Ihr Experiment auf einer Single-Page-Application (SPA) oder einer dynamisch aktualisierten Seite läuft, sind spezielle Implementierungsschritte erforderlich. Folgen Sie diesem Leitfaden zur Einrichtung eines Experiments auf einer SPA für Best Practices.