Skip to main content
Diese Seite enthält eine schrittweise Anleitung zur Installation von Kameleoon, einschließlich der Erstellung eines Web-Experimentation-Projekts für Ihre Website sowie der Konfiguration Ihrer Projekteinstellungen. (Feature-Experimentation-Projekte unterstützen sowohl die Plattform Web / Backend als auch Mobile App.)

​
Ü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. Wenn Sie ein Projekt erstellen, führt Sie das Setup-Formular durch vier Schritte. Ihre Installationsmethode entscheidet, welche Optionen Sie sehen: Wenn Sie Cross-Domain-Tracking einschalten, enthält die Checkliste zusätzlich eine Aufgabe, die statische HTML-Datei von Kameleoon auf Ihrer Hauptdomain zu hosten.

​
Projektkonfiguration

Klicken Sie in der Kameleoon-App auf Admin > Projects, um eine Liste Ihrer Projekte zu sehen. Standardmäßig enthält Ihr Konto ein Projekt für die Website oder mobile App, die Sie bei der Anmeldung angegeben haben.

​
Ein bestehendes Projekt konfigurieren

So ändern Sie die Installationseinstellungen eines Projekts:
  1. Klicken Sie auf Admin > Projects.
  2. Klicken Sie auf Edit in der Zeile des Projekts und dann auf den Setup-Tab.
  3. Klicken Sie im Abschnitt Installation method oder Technical configuration auf Edit. Das dreistufige Setup-Formular öffnet sich.

​
Ein neues Projekt erstellen

So erstellen Sie ein neues Projekt:
  1. Klicken Sie auf Admin > Projects und dann auf New project.
  2. Wählen Sie Web Experimentation oder All campaign types, wenn Sie auch Feature Flags und SDK-Experimente im selben Projekt ausführen. Nach der Erstellung des Projekts können Sie seinen Typ nicht mehr ändern. Klicken Sie auf Next.
  3. Geben Sie die Hauptdomain des Projekts ein, wählen Sie eine Farbe und fügen Sie optional einen Namen, eine Beschreibung und Tags hinzu. Klicken Sie dann auf Next.
  4. Wählen Sie die Installationsmethode und beim Code-Schnipsel den Lademodus, dann klicken Sie auf Next.
  5. Konfigurieren Sie die Unterstützung für dynamische Websites (nur beim Code-Schnipsel), das Ressourcen-Hosting und die Domains, dann klicken Sie auf Next. Wenn Sie Shopify als Installationsmethode gewählt haben, überspringt Kameleoon diesen Schritt.
  6. Erledigen Sie die Aufgaben in der Checkliste und klicken Sie dann auf Complete setup.
Um später fortzufahren, klicken Sie im Schritt Installation method oder Technical configuration auf Save for later. Kameleoon speichert das Projekt als Entwurf, und das Projekt erscheint auf der Seite Projects mit dem Status Draft. Wenn Sie auf Complete setup klicken, speichert Kameleoon das Projekt als Enabled. Die vollständige Liste der Optionen finden Sie unter Ein Projekt erstellen.
Ihre Möglichkeit, weitere Projekte zu erstellen, hängt von Ihrem Kameleoon-Paket ab.

​
Wählen Sie Ihre Implementierungseinstellungen

Im Schritt Installation method des Setup-Formulars wählen Sie, wie Sie Kameleoon installieren und wie Kameleoon auf Ihrer Website geladen wird. Technische Details, einschließlich der Installation von Kameleoon über einen Tag Manager oder der Implementierung benutzerdefinierter Skripttypen, finden Sie im Artikel Standard-Implementierung.

​
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.

​
Domains und Subdomains

Sie können festlegen, welche Domains und Subdomains das Kameleoon-Skript laden und auf seine Funktionen zugreifen dürfen.
  • Geben Sie im Schritt Technical configuration unter Domains and subdomains eine Domain ein und klicken Sie auf Add domain, 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. Um es zu aktivieren, schalten Sie Track visitors across listed subdomains unter Domains and subdomains ein.

​
Berechtigungen

Wenn Sie Subdomains ansprechen, überprüfen Sie diese zwei HTTP-Header-Einstellungen:
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.
  • Schalten Sie im Schritt Technical configuration unter Resource hosting die Option Self-host the script file, Self-host images oder beide ein.
  • Geben Sie die URL Ihres Content Delivery Network (CDN) oder Servers in Script file URL, Image base URL oder beiden ein.
Erfahren Sie mehr über Ressourcen-Hosting hier.

​
Das Kameleoon-Skript installieren

Nachdem Sie die Hauptdomain Ihres Projekts definiert haben, generiert Kameleoon ein Skript zur Installation. Sie finden es auf dem Setup-Tab und in der Aufgabe Add JavaScript snippet to your website des Schritts Checklist.
  1. Klicken Sie auf Copy, um den Code-Schnipsel zu kopieren.
  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 Mark as completed.
Installieren Sie das Skript so früh wie möglich im Ladeprozess der Seite.

​
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 750 ms eingestellt. Um die verfügbaren Optionen zu erkunden, sehen Sie sich den Screenshot unten an.
Das Settings-Formular mit dem Dropdown Behavior if timeout occurs im Abschnitt Campaign display
Sie können auf das Dropdown-Menü Behavior if timeout occurs zugreifen, indem Sie auf Admin > Projects klicken, auf Edit in der Zeile Ihres Projekts klicken und den Settings-Tab öffnen. Klicken Sie auf Edit im Abschnitt Campaign display.

​
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.
Der Consent-Tab mit den drei Abschnitten der Einwilligungsrichtlinie
Um auf das Dropdown-Menü Behavior when consent is unknown zuzugreifen, klicken Sie auf Admin > Projects, klicken Sie auf Edit in der Zeile Ihres Projekts und öffnen Sie den Consent-Tab. Klicken Sie auf Edit im Abschnitt For A/B tests and feature experiments oder For personalizations und wählen Sie dann Consent required in Consent policy.

​
Targeting

Verwenden Sie Informationen, die beim Laden der Seite verfügbar sind
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.

​
FAQ

Der Fehler Anzeige in einem Frame verweigert tritt auf, wenn Sie Cross-Domain-Tracking aktivieren, wofür Ihre Hauptdomain ein statisches iframe hosten muss.Wie das Kameleoon-iframe funktioniertDas iframe stellt die Datenkonsistenz über Subdomains hinweg sicher, indem es im localStorage der Host-Domain liest und schreibt. Dadurch kann Kameleoon denselben Besucher ohne zusätzliche Serveraufrufe verfolgen. Weitere Informationen finden Sie unter Vereinheitlichung von Sitzungsdaten über Subdomains hinweg.Kameleoon sichert das iframe mit drei Maßnahmen:
  1. Eingeschränkter Zugriff: Nur Domains in der Variablen allowedDomains können das iframe anfordern.
  2. Sitecode-Überprüfung: Nur der angegebene Sitecode kann das iframe anfordern.
  3. Präfixierter Speicher: Kameleoon greift nur auf Einträge zu, die mit kameleoon präfixiert sind.
Kameleoon erfasst keine personenbezogenen Daten. Siehe die Liste der erfassten Daten und verwalten Sie die Einwilligung über Kameleoons APIs zur Einwilligungsverwaltung.Das Anzeigeproblem behebenDer Header X-Frame-Options verhindert, dass Browser Seiten in Frames rendern, um Clickjacking zu vermeiden. Weitere Informationen finden Sie in der Mozilla-Dokumentation.Um Cross-Domain-Tracking zu aktivieren, dürfen Sie den Header X-Frame-Options nicht setzen. Sie können das iframe sichern, indem Sie eine eingeschränkte Liste von Domains in der gehosteten iframe-Datei bereitstellen.
Möglicherweise sehen Sie einen Fehler, der besagt, dass das Skript https://xxxxxx.kameleoon.eu/kameleoon.js Ihre Content Security Policy (CSP) verletzt.Wenn Ihre Site Ressourcen über CSP-Header einschränkt, aktualisieren Sie Ihre Richtlinie, um Kameleoon-Ressourcen zuzulassen. Siehe die vollständige Liste der zuzulassenden Kameleoon-Domains.
Unterstützte WebbrowserKameleoon unterstützt einige ältere Browser nicht. Wenn ein Besucher einen nicht unterstützten Browser verwendet, sieht er die Originalseite anstelle des Experiments. Der Rückfall auf die Originalseite wirkt sich nicht negativ auf die Experimentergebnisse aus.Das Kameleoon-Skript unterstützt:
  • Chrome
  • Firefox
  • Microsoft Edge
  • Opera
  • Safari
Kameleoon stellt die Kompatibilität mit den letzten drei Versionen jedes Browsers sicher.Vom Graphic Editor unterstützte BrowserInformationen zu den Browsern, die der Graphic Editor unterstützt, finden Sie unter Welche Browser unterstützt der Graphic Editor?.Kompatibilität mit responsive WebsitesSie können mit erweiterten Bearbeitungsfunktionen Experimente für responsive Websites erstellen. Die größten Herausforderungen sind typischerweise das Anpassen der Größe und das Neupositionieren von Inhaltsblöcken.Da Seiten je nach Auflösung oder Gerät angezeigt werden, sollten Sie beim Verschieben von Elementen vorsichtig sein. Heat Maps sind für diese Seiten nicht verfügbar, da sie keinen festen Rahmen haben.Kameleoon stellt erweiterte Tools zur Verfügung, um Sie beim Verschieben von Elementen zu unterstützen und Layout-Probleme zu vermeiden.
Wenn ein Besucher auf Ihrer Website landet, lädt sein Browser den Site-Code und das Kameleoon-Skript herunter. Die Seitenladezeit hängt von der Codelänge und externen Ressourcen ab. Caching verbessert die Leistung bei nachfolgenden Besuchen, indem statische Ressourcen im Browser-Cache gespeichert werden.Caching verbessert zwar die Benutzererfahrung, kann jedoch neue Experimente für wiederkehrende Besucher verzögern, die eine ältere Version des Skripts in ihrem Cache haben.Um dieses Problem zu beheben, enthält das Kameleoon-Skript ein Flag für die Cache-Ablaufzeit (TTL: Time-to-live). Das Flag weist den Browser an, alle 1,5 Stunden eine neue Version des Skripts herunterzuladen.
Einige mobile Browser ignorieren die TTL-Einstellungen möglicherweise, um die Leistung zu optimieren, je nach Browser-Richtlinie.
Der Flackereffekt, auch Flickering genannt, tritt auf, wenn ein Besucher kurz die Originalseite sieht, bevor die Variation geladen wird. Flackern kann auftreten, wenn das Kameleoon-Skript nach dem Seiteninhalt geladen wird, sodass der Browser die Änderungen der Variation zuletzt anwendet. Um Flackern zu reduzieren, platzieren Sie das Kameleoon-Skript so weit oben wie möglich im HTML-<head>. Vollständige Richtlinien finden Sie unter Flackern verhindern.
Kameleoon gerät nur selten mit anderen Skripten in Konflikt.Kameleoon verwendet reines JavaScript und benötigt kein jQuery, wodurch Konflikte mit Sites vermieden werden, die jQuery verwenden. Es arbeitet unabhängig von serverseitigen Sprachen und vermeidet globale JavaScript-Variablen, um Inkompatibilitätsrisiken zu minimieren.jQueryKameleoon kommt nicht in Konflikt mit jQuery, wenn Sie es auf Ihrer Website verwenden. Kameleoon verwendet jedoch die Bibliothek Sizzle, die die CSS-Selektor-Engine ist, die jQuery verwendet. Sie können Sizzle beim Erstellen Ihrer Experimente verwenden.