Standardimplementierung

Um Kameleoon auf Ihrer Website zu implementieren, fuegen Sie dem HTML-Quellcode Ihrer Seiten ein JavaScript-Installations-Tag hinzu.

Kameleoon im HTML-Quellcode implementieren

Fuegen Sie das Kameleoon-Tag fuer Web Experimentation immer im <head>-Abschnitt Ihres HTML-Quellcodes hinzu. Das Platzieren des Tags im <body>-Abschnitt, insbesondere am Ende der Seite, erhoeht das Risiko von Flackern. Fuegen Sie das Tag so weit oben wie moeglich im <head>-Abschnitt ein, idealerweise unmittelbar nach dem oeffnenden <head>-Tag. Diese Position ermoeglicht es dem Browser, die Kameleoon-Anwendungsdatei vor anderen Ressourcen zu laden. CSS oder andere Skripte, die vor dem Kameleoon-Tag platziert werden, erhoehen das Risiko von Flackern.

Wenn Sie den Hybridmodus verwenden (sowohl ein SDK als auch das JavaScript-Installations-Tag), koennen Sie das Tag spaeter im Body platzieren, beispielsweise direkt vor dem schliessenden </body>-Tag. Bei Verwendung eines Web-SDK tritt kein Flackern auf.

Kameleoon empfiehlt fuer Web Experimentation die Methode Asynchrones Tag mit Anti-Flicker. Obwohl diese Methode Kameleoon langsamer laedt als andere Methoden, bietet sie die sicherste Implementierung. Ein asynchrones Skript stellt sicher, dass Kameleoon das Laden Ihrer Website nicht blockiert. Das weisse Overlay “simuliert” ein synchron geladenes Skript, um Flackern zu verhindern. Um schnellere Ladezeiten zu priorisieren, verwenden Sie stattdessen das synchrone Tag.

Wenn Ihre Website mehrere Subdomains verwendet, fuegen Sie den zusaetzlichen Code fuer vereinheitlichte Sitzungsdaten ueber Subdomains in das Implementierungsskript ein. Kameleoon benoetigt diesen Code, um Sitzungsdaten ueber alle Subdomains hinweg fuer erweitertes Verhaltens-Targeting zu nutzen.

Das Hinzufuegen eines Skripts oder einer Ressource zu Ihrer Website erhoeht die Last. Kameleoon legt Wert auf Leistung und optimiert seinen Code, um bestmoegliche Ergebnisse zu erzielen.

Asynchrones Tag mit Anti-Flicker

Diese Methode laedt das Kameleoon-Skript asynchron und enthaelt Anti-Flicker-Code. Kameleoon verwendet eine “blockierende CSS-Regel”, um den Seiteninhalt zu verbergen, und entfernt sie, sobald der Anwendungscode geladen wird (normalerweise unter 50 ms) oder wenn das angegebene Timeout (Standard 750 ms) abgelaufen ist. Dieser Schutzmechanismus stellt sicher, dass Kameleoon nie dazu fuehrt, dass Ihre Website abstuerzt oder unbegrenzt leer bleibt. Passen Sie das Timeout mit der JavaScript-Variable kameleoonLoadingTimeout im Installations-Snippet an.

Wenn ein Timeout auftritt und der Kameleoon-Code schliesslich geladen wird, koennen Sie die naechsten Schritte in den erweiterten Bestaetigungseinstellungen Ihres Projekts konfigurieren. Sie haben zwei Optionen:

Kameleoon fuer diesen Besucher vollstaendig deaktivieren.
Den Code von Kameleoon normal ausfuehren (was Flackern verursachen kann).

<script>
  // Duration in milliseconds to wait while the Kameleoon application file is loaded
  var kameleoonLoadingTimeout = 750;

  window.kameleoonQueue = window.kameleoonQueue || [];
  window.kameleoonStartLoadTime = Date.now();
  if (! document.getElementById("kameleoonLoadingStyleSheet") && ! window.kameleoonDisplayPageTimeOut) {
    var kameleoonS = document.getElementsByTagName("script")[0];
    var kameleoonCc = "html::after { content: ''; position: fixed; inset: 0; background: #fff; z-index: 2147483647; }";
    var kameleoonStn = document.createElement("style");
    kameleoonStn.type = "text/css";
    kameleoonStn.id = "kameleoonLoadingStyleSheet";
    if (kameleoonStn.styleSheet) {
      kameleoonStn.styleSheet.cssText = kameleoonCc;
    } else {
      kameleoonStn.appendChild(document.createTextNode(kameleoonCc));
    }
    kameleoonS.parentNode.insertBefore(kameleoonStn, kameleoonS);
    window.kameleoonDisplayPage = function(fromEngine) {
      if (!fromEngine) {
        window.kameleoonTimeout = true;
      }
      if (kameleoonStn.parentNode) {
        kameleoonStn.parentNode.removeChild(kameleoonStn);
      }
    };
    window.kameleoonDisplayPageTimeOut = window.setTimeout(window.kameleoonDisplayPage, kameleoonLoadingTimeout);
  }

</script>

<script type="text/javascript" src="//SITE_CODE.kameleoon.io/engine.js" fetchpriority="high" async></script> 

Ersetzen Sie den Platzhalter SITE_CODE durch den Site-Code Ihres Projekts.

Die Domains der Kameleoon-Skripte variieren je nach Projekt. Projekte verwenden je nach Erstellungsdatum entweder kameleoon.eu oder kameleoon.io. Verwenden Sie die in der Kameleoon App fuer Ihr Projekt angezeigte Domain.

Der Timeout-Zaehler startet, wenn der Browser den Code ausfuehrt, nicht wenn er beginnt, engine.js herunterzuladen. Ein zu niedrig eingestellter Timeout (z. B. 100 ms) bietet dem Browser moeglicherweise nicht genug Zeit, die Datei herunterzuladen und auszufuehren, insbesondere bei langsamen Verbindungen oder wenn andere Skripte in der Warteschlange stehen.

Platzieren Sie das Kameleoon-Installations-Tag innerhalb des <head>-Tags oder am Anfang des <body>-Tags. Eine spaetere Platzierung im <body> kann dazu fuehren, dass die Seite geladen wird, verschwindet und wieder erscheint, da der Anti-Flicker-Code zur korrekten Funktion innerhalb des <head> ausgefuehrt werden muss.

Synchrones Tag

Diese Methode laedt das Kameleoon-Skript synchron, um Flackern zu verhindern. Dieser Ansatz blockiert jedoch das Laden der Seite, bis der Browser den Kameleoon-Code heruntergeladen und ausgefuehrt hat, was die Leistung beeintraechtigen kann.

<script>window.kameleoonQueue = window.kameleoonQueue || [];</script>
<script type="text/javascript" src="//SITE_CODE.kameleoon.io/engine.js" fetchpriority="high"></script> 

Ersetzen Sie den Platzhalter SITE_CODE durch den Site-Code Ihres Projekts.

Asynchrones Tag ohne Anti-Flicker

Dieses Tag installiert die Kameleoon-Anwendungsdatei asynchron ohne Anti-Flicker-Schutz. Verwenden Sie dieses Tag, wenn Flackern kein Problem darstellt, beispielsweise bei Verwendung des Hybridmodus.

<script>
  window.kameleoonQueue = window.kameleoonQueue || [];
</script>
<script type="text/javascript" src="//SITE_CODE.kameleoon.io/engine.js" fetchpriority="high" async></script> 

Ersetzen Sie den Platzhalter SITE_CODE durch den Site-Code Ihres Projekts.

Kameleoon in einem Tag Manager implementieren

Kameleoon unterstuetzt alle wichtigen Tag-Management-Systeme (TMS). Um Flackern zu vermeiden, installieren Sie Kameleoon direkt im Quellcode Ihrer Seite. Die Verwendung eines TMS verzoegert das Laden, was haeufig zu spuerbarem Flackern fuehrt, insbesondere wenn das TMS am Ende der HTML-Seite geladen wird. Kameleoon bietet keinen technischen Support fuer Flackerprobleme, die durch TMS-Implementierungen verursacht werden. TMS-Umgebungen erlauben kein synchrones Laden von externem JavaScript. Verwenden Sie fuer TMS-Implementierungen das asynchrone JavaScript-Tag.

window.kameleoonStartLoadTime = new Date().getTime();
var scriptNode = document.createElement("script");
scriptNode.src = "//SITE_CODE.kameleoon.io/engine.js"; //replace the SITE_CODE variable by your Kameleoon project Sitecode.
scriptNode.type = "text/javascript";
scriptNode.async = true;
scriptNode.setAttribute("data-tagmanager", true);
document.head.appendChild(scriptNode);

Einige TMS bieten serverseitige Unterstuetzung, mit der Sie Kameleoon ohne Probleme installieren koennen. Diese Einrichtung entspricht dem direkten Einbetten des Installationscodes in Ihr HTML.

Den richtigen Trigger waehlen

Wenn Sie Kameleoon ueber ein TMS implementieren, verwenden Sie einen bestimmten Trigger, um sicherzustellen, dass das Skript so frueh wie moeglich ausgefuehrt wird. Waehlen Sie fuer Ihr spezifisches TMS den Trigger, der auf jeder Seite am fruehesten ausgeloest wird.

Konfigurieren Sie Ihr TMS nicht so, dass das Kameleoon-Skript zwischengespeichert oder kombiniert wird. Die Anwendungsdatei enthaelt dynamische Konfigurationsdaten, die fuer die Ausfuehrung von Experimenten und Personalisierungen erforderlich sind. Das Zwischenspeichern dieser Datei verhindert, dass Experimente starten oder korrekt ausgefuehrt werden.Vermeiden Sie die Verwendung von Anti-Flicker-Schutztechnologie innerhalb eines TMS, da sie nicht fuer den korrekten Betrieb in dieser Umgebung ausgelegt ist.

FAQ

Welche Kameleoon-Domains muss ich auf die Whitelist setzen?

Wenn Ihre Website das Laden von Ressourcen (Skripte, Bilder, Medien, CSS) über den standardmäßigen HTTP-Header Content-Security-Policy (CSP) einschränkt, aktualisieren Sie die CSP Ihrer Website, damit Kameleoon-Ressourcen geladen werden dürfen. Dieselbe Richtlinie gilt für die Kameleoon-Anwendungsdatei und die clientseitigen SDKs.

Einfache Einrichtung (mit Wildcards)

script-src hat immer Vorrang vor default-src. Verwenden Sie diese Einrichtung nicht, wenn Sie bereits die vollständige Einrichtung in Ihrer CSP verwenden.

Fügen Sie Ihrer CSP-Header-Konfiguration den folgenden Inhalt hinzu:

default-src https://*.kameleoon.com https://*.kameleoon.io https://*.kameleoon.eu https://*.kameleoon.net wss://*.kameleoon.com https://*.experimentation.dev;

Vollständige Einrichtung (vollständig detailliert)

Kameleoon fügt dem Produkt regelmäßig neue Funktionen hinzu, was zu zusätzlichen URLs führen kann. Listen Sie alle möglichen Hosts und Ressourcentypen (Skript, Bild usw.) explizit im CSP-Header auf.

Ersetzen Sie [your-site-code] durch Ihren Kameleoon-Site-Code in jeder Zeile, in der er erscheint, und fügen Sie Folgendes Ihrer Konfiguration hinzu:

script-src https://[your-site-code].kameleoon.xx https://static.kameleoon.com https://graphical-editor.kameleoon.com https://simulation.kameleoon.com https://client-config.kameleoon.com https://sdk-config.kameleoon.eu https://electra.kameleoon.com https://aibuilder.kameleoon.com https://static.experimentation.dev 'unsafe-eval';
style-src https://static.kameleoon.com https://static.products.kameleoon.com https://graphical-editor.kameleoon.com https://simulation.kameleoon.com https://electra.kameleoon.com https://aibuilder.kameleoon.com https://static.experimentation.dev 'unsafe-inline'; 
connect-src https://[your-site-code].kameleoon.xx https://static.kameleoon.com https://eu-data.kameleoon.io https://eu-data.kameleoon.eu https://na-data.kameleoon.io https://na-data.kameleoon.eu https://editor.kameleoon.com https://graphical-editor.kameleoon.com https://simulation.kameleoon.com https://api.kameleoon.com https://customers.kameleoon.com https://logger.kameleoon.io https://client-config.kameleoon.com https://sdk-config.kameleoon.eu https://api.products.kameleoon.com https://static.experimentation.dev https://sdk-config.experimentation.dev https://eu-data.experimentation.dev wss://electra.kameleoon.com https://events.kameleoon.com:8110;
img-src https://[your-site-code].kameleoon.xx https://storage.kameleoon.eu https://storage.kameleoon.io https://graphical-editor.kameleoon.com https://simulation.kameleoon.com https://static.kameleoon.com https://images.products.kameleoon.com https://static.experimentation.dev;
frame-src 'self' https://graphical-editor.kameleoon.com https://static.experimentation.dev;

Jede URL in der CSP-Richtlinie erfüllt einen bestimmten Zweck:

Web Experimentation

https://[your-site-code].kameleoon.xx: Lädt das Anwendungsskript von Kameleoon Web Experimentation, engine.js (früher kameleoon.js genannt).
https://(eu|na)-data.kameleoon.(eu|io): Wird für das Tracking verwendet.
https://logger.kameleoon.io: Sendet Tracking-Daten zur Protokollierung.
https://data.kameleoon.net: Erforderlich, wenn Sie das Kameleoon-Simulationstool zum QA von Experimenten über mehrere Subdomains hinweg verwenden.

Feature Experimentation (clientseitige SDKs)

https://client-config.kameleoon.com: Erforderlich für SDK-Versionen < 2.1.0.
https://sdk-config.kameleoon.eu: Erforderlich für SDK-Versionen >= 2.1.0.
https://events.kameleoon.com:8110: Erforderlich für Echtzeit-Streaming, eine Premium-Option.
https://api.kameleoon.com: Authentifiziert SDK-Anfragen (/oauth/token).
https://(eu|na)-data.kameleoon.(eu|io): Wird für das Tracking verwendet.
https://logger.kameleoon.io: Sendet Tracking-Daten zur Protokollierung.

Grafische Editoren

https://static.kameleoon.com: (veraltet) Lädt statische Ressourcen für den alten grafischen Editor.
https://editor.kameleoon.com: (veraltet) Wird vom alten grafischen Editor verwendet.
https://graphical-editor.kameleoon.com: Wird vom neuen grafischen Editor verwendet.
https://storage.kameleoon.(eu|io): Lädt Bilder, die in Experimenten verwendet werden, die mit den grafischen Editoren erstellt wurden.

Prompt-Based Experimentation (PBX)

https://aibuilder.kameleoon.com: Wird vom Prompt-basierten Editor verwendet.
https://electra.kameleoon.com: Wird vom Prompt-basierten Editor verwendet.
https://storage.kameleoon.(eu|io): Lädt Bilder im Prompt-basierten Editor.
https://api.kameleoon.com: Lädt kontobezogene Informationen.
https://sdk-config.kameleoon.eu: Steuert die im Prompt-basierten Editor aktivierten Kameleoon-Feature-Flags.
wss://electra.kameleoon.com : Wird für den Datenaustausch verwendet.

Simulation

https://api.kameleoon.com: Wird von der alten Simulation verwendet.
https://simulation.kameleoon.com: Wird von der neuen Simulation verwendet.

Produktempfehlung

https://static.products.kameleoon.com: Lädt Ressourcen für das Modul Produktempfehlung.
https://api.products.kameleoon.com: API, die vom Modul Produktempfehlung verwendet wird.
https://images.products.kameleoon.com: Lädt Produktbilder für Empfehlungen.

APIs und Integrationen

https://api.kameleoon.com: Erforderlich, wenn Sie die Automation API zum Testen direkt im Browser verwenden möchten.
https://customers.kameleoon.com: Erforderlich, wenn Sie die SDK API oder eine von Kameleoon entwickelte benutzerdefinierte Integration verwenden.

Interne Ressourcen

Standardmäßig enthält engine.js keine Simulationspfade oder anwendungsspezifischen Informationen, um die Skriptgröße zu minimieren. Um diese Details bereitzustellen, laden Sie das vollständige Skript kameleoonFull.js, das engine.js mit den notwendigen Daten zu internen Ressourcen und Ladeanweisungen versorgt.

https://static.kameleoon.com: Lädt interne Ressourcen.
https://static.experimentation.dev: Lädt interne Ressourcen.
https://sdk-config.experimentation.dev: Steuert die im Kameleoon-Produkt aktivierten Kameleoon-Feature-Flags.
https://eu-data.experimentation.dev: Sendet Tracking-Daten zu Protokollierungszwecken.

Die Domain für Ihre Kameleoon-Skripte https://[your-site-code].kameleoon.xx kann von Projekt zu Projekt variieren. Projekte verwenden je nach Erstellungsdatum entweder kameleoon.eu oder kameleoon.io. Verwenden Sie die Domain, die für Ihr Projekt in der Kameleoon-App angezeigt wird. Dasselbe gilt, wenn Sie Kameleoon im Hybridmodus verwenden.

Warum verwendet die Kameleoon-Engine (Anwendungsdatei engine.js) die eval()-Funktion?

Die Kameleoon-JavaScript-Engine benötigt die Funktion eval(), um benutzerdefinierten Code zu Kameleoon hinzuzufügen, etwa benutzerdefinierte Daten und benutzerdefiniertes JavaScript, wenn Variationen einer Seite implementiert werden. Die Funktion eval() ermöglicht es Kameleoon, diesen benutzerdefinierten Code zur Laufzeit dynamisch auszuführen.Wenn Sie eine Content-Security-Policy-(CSP)-Direktive verwenden, die die Verwendung der Funktion eval() verhindert, implementieren Sie das folgende JavaScript-Snippet vor dem Kameleoon-Installations-Tag:

<script>
window.kameleoonQueue = window.kameleoonQueue || [];

function excludeKameleoonEval() {
	Kameleoon.Utils.runProtectedScript = function (code, fileName) {
		const script = document.createElement("script");

		const wrappedCode = "(function () {\n" + code + "\n})();";
		script.innerHTML = wrappedCode;

		if (fileName) {
			script.innerHTML += "\n//# sourceURL=" + fileName;
		}

		document.head.appendChild(script);
	};
}

kameleoonQueue.push({
	level: "IMMEDIATE",
	command: excludeKameleoonEval
}); 
</script>

<!-- Add the Kameleoon installation tag here -->
<script src="//SITE_CODE.kameleoon.eu/engine.js" fetchpriority="high" async></script>

Wenn Ihre CSP eval() blockiert, heben Sie diese Einschränkungen durch die Implementierung des Code-Snippets nicht auf. Um die volle Funktionalität sicherzustellen, passen Sie die entsprechende CSP-Direktive an, sodass eval() oder ähnliche Funktionen zugelassen sind. Andernfalls bleiben bestimmte erweiterte Targeting- oder Anpassungsfunktionen in Kameleoon aufgrund der Durchsetzung von Browser-Sicherheitsmechanismen unzugänglich.

Der grafische Editor von Kameleoon (einschließlich des Simulationspanels) benötigt ebenfalls die Funktion eval(). Sie können diese Anforderung jedoch umgehen, indem Sie die Kameleoon-Chrome-Erweiterung installieren und die Einstellung Dev Tools > Tag injection > Bypass policies aktivieren, um die Richtlinien lokal zu überschreiben. Außerdem müssen Sie Ihren Sitecode angeben. Mit der Einstellung Bypass policies können Sie den grafischen Editor in einem Chrome-Browser verwenden.

Bypass-policies-Einstellung in der Chrome-Erweiterung

Einige Funktionen von Kameleoon sind nicht verfügbar, wenn eine CSP-Direktive die Funktion eval() blockiert. Diese Einschränkungen gelten auch dann, wenn Sie eines der in dieser Antwort genannten Code-Snippets oder Workarounds verwenden. Die folgenden Funktionen bleiben nicht verfügbar, sofern Ihre CSP eval() nicht ausdrücklich zulässt:

Ansprechen eines Segments mit einer benutzerdefinierten JavaScript-Bedingung (nur unterstützt, wenn die Bedingung asynchron ausgeführt wird).

Asynchrone Einstellung der Targeting-Bedingung

Verwendung benutzerdefinierter Daten mit benutzerdefiniertem JavaScript-Code.
Verwendung von Akquisitionskanälen mit benutzerdefiniertem JavaScript-Code.

Der Iframe, den Kameleoon verwendet, um Sitzungsdaten über Subdomains zu vereinheitlichen, verwendet nicht die Funktion eval(). Sie können die Vereinheitlichung von Sitzungsdaten unabhängig von Ihrer CSP-Richtlinie für eval() implementieren.

Kann ich Subresource Integrity (SRI) mit der Kameleoon-Anwendungsdatei verwenden?

Leider nein. Obwohl SRI eine nützliche Sicherheitsfunktion bietet, ändert sich die Kameleoon-Anwendungsdatei im Laufe der Zeit. Andernfalls wären Funktionen wie das sofortige Starten und Stoppen von Experimenten ohne erneute Bereitstellung unmöglich. Da sich der Dateiinhalt ändert, ändert sich auch der Ressourcen-Hash, was bedeutet, dass SRI nicht verwendet werden kann. Andernfalls würde der Browser die Ressource blockieren, sobald sie auf den Servern aktualisiert wird.

Kann ich minifizierte Versionen der Installations-Tags verwenden?

Kameleoon-Skripte sind bereits kurz, und die Verwendung einer minifizierten Version wirkt sich nicht spürbar auf die Seitenladezeit aus, da der Code bereits mit Brotli oder Gzip komprimiert ist. Kameleoon empfiehlt minifizierte Versionen nicht, aber falls erforderlich, sind sie unten verfügbar.

Asynchrones Laden mit Anti-Flicker

<script>
  var a=750;window.kameleoonQueue=window.kameleoonQueue||[];window.kameleoonStartLoadTime=Date.now();if(!document.getElementById("kameleoonLoadingStyleSheet")&&!window.kameleoonDisplayPageTimeOut){var b=document.getElementsByTagName("script")[0];var c="html::after { content: ''; position: fixed; inset: 0; background: #fff; z-index: 2147483647; }";var d=document.createElement("style");d.type="text/css";d.id="kameleoonLoadingStyleSheet";if(d.styleSheet){d.styleSheet.cssText=c}else{d.appendChild(document.createTextNode(c))}b.parentNode.insertBefore(d,b);window.kameleoonDisplayPage=function(e){if(!e){window.kameleoonTimeout=true}if(d.parentNode){d.parentNode.removeChild(d)}};window.kameleoonDisplayPageTimeOut=window.setTimeout(window.kameleoonDisplayPage,a)};
</script>
<script src="//SITE_CODE.kameleoon.eu/engine.js" fetchpriority="high" async></script>

Sitzungsdaten über Subdomains vereinheitlichen

Wenn Sie das Tag für vereinheitlichte Sitzungsdaten verwenden, um Sitzungsdaten über Subdomains zu vereinheitlichen, und dabei entweder das synchrone Tag oder das asynchrone Tag ohne Anti-Flicker einsetzen:

<script>
  window.kameleoonIframeURL="https://www.customerdomain.com/path/to/kameleoon-iframe.html";var f=document.createElement("a");window.kameleoonLightIframe=false;f.href=window.kameleoonIframeURL;window.kameleoonIframeOrigin=f.origin||(f.protocol+"//"+f.hostname);if(location.href.indexOf(window.kameleoonIframeOrigin)!=0){window.kameleoonLightIframe=true;var g=function(event){if(window.kameleoonIframeOrigin==event.origin&&event.data.slice&&event.data.slice(0,9)=="Kameleoon"){window.removeEventListener("message",g);window.kameleoonExternalIFrameLoaded=true;if(window.Kameleoon){Kameleoon.Utils.runProtectedScript(event.data);Kameleoon.Analyst.load()}else{window.kameleoonExternalIFrameLoadedData=event.data}}};if(window.addEventListener){window.addEventListener("message",g,false)}var h=document.createElement("iframe");h.src=kameleoonIframeURL;h.id="kameleoonExternalIframe";h.style="float: left !important; opacity: 0.0 !important; width: 0px !important; height: 0px !important;";document.head.appendChild(h)};
</script>

Wenn Sie das Tag für vereinheitlichte Sitzungsdaten und das asynchrone Tag mit Anti-Flicker verwenden, fügen Sie die drei Skript-Tags in der folgenden Reihenfolge hinzu:

Asynchrones Tag mit Anti-Flicker.
Tag für vereinheitlichte Sitzungsdaten.
Kameleoon-Installations-Tag.

<script>
  var a=750;window.kameleoonQueue=window.kameleoonQueue||[];window.kameleoonStartLoadTime=Date.now();if(!document.getElementById("kameleoonLoadingStyleSheet")&&!window.kameleoonDisplayPageTimeOut){var b=document.getElementsByTagName("script")[0];var c="html::after { content: ''; position: fixed; inset: 0; background: #fff; z-index: 2147483647; }";var d=document.createElement("style");d.type="text/css";d.id="kameleoonLoadingStyleSheet";if(d.styleSheet){d.styleSheet.cssText=c}else{d.appendChild(document.createTextNode(c))}b.parentNode.insertBefore(d,b);window.kameleoonDisplayPage=function(e){if(!e){window.kameleoonTimeout=true}if(d.parentNode){d.parentNode.removeChild(d)}};window.kameleoonDisplayPageTimeOut=window.setTimeout(window.kameleoonDisplayPage,a)};
</script>
<script>
  window.kameleoonIframeURL="https://www.customerdomain.com/path/to/kameleoon-iframe.html";var f=document.createElement("a");window.kameleoonLightIframe=false;f.href=window.kameleoonIframeURL;window.kameleoonIframeOrigin=f.origin||(f.protocol+"//"+f.hostname);if(location.href.indexOf(window.kameleoonIframeOrigin)!=0){window.kameleoonLightIframe=true;var g=function(event){if(window.kameleoonIframeOrigin==event.origin&&event.data.slice&&event.data.slice(0,9)=="Kameleoon"){window.removeEventListener("message",g);window.kameleoonExternalIFrameLoaded=true;if(window.Kameleoon){Kameleoon.Utils.runProtectedScript(event.data);Kameleoon.Analyst.load()}else{window.kameleoonExternalIFrameLoadedData=event.data}}};if(window.addEventListener){window.addEventListener("message",g,false)}var h=document.createElement("iframe");h.src=kameleoonIframeURL;h.id="kameleoonExternalIframe";h.style="float: left !important; opacity: 0.0 !important; width: 0px !important; height: 0px !important;";document.head.appendChild(h)};
</script>
<script src="//SITE_CODE.kameleoon.eu/engine.js" fetchpriority="high" async></script>

Kann ich das von Kameleoon bereitgestellte Installations-Tag ändern?

Ändern Sie keine Installations-Tags. Der Code der Installations-Tags ist umfassend getestet und optimiert. Eine Änderung kann zu einer nicht funktionierenden Einrichtung führen. Wenn ein Installations-Tag geändert werden muss, wenden Sie sich an Ihren Customer Success Manager, um die Änderung mit den Entwicklern abzustimmen. Versuchen Sie keine eigenständigen Änderungen.

Kann ich das Installations-Tag in einem separaten externen Skript hinzufügen?

Schließen Sie kein Installations-Tag in ein eigenes, separates externes Skript ein. Tun Sie zum Beispiel niemals Folgendes:

<script src="resources/scripts/kameloon-loader.js" fetchpriority="high" async></script>

Auch wenn dies technisch funktionieren kann, beeinträchtigt es die Leistung von Kameleoon erheblich und verursacht einen deutlich wahrnehmbaren Flackereffekt. Diese Einrichtung bringt die Probleme eines Tag Managers mit sich, ohne dass damit Vorteile verbunden sind.

Startseite

Web Experimentation

Feature Experimentation

Kernkonzepte

Datenschutz und Compliance

Entwicklertools

Kameleoon im HTML-Quellcode implementieren

Asynchrones Tag mit Anti-Flicker

Synchrones Tag

Asynchrones Tag ohne Anti-Flicker

Kameleoon in einem Tag Manager implementieren

Den richtigen Trigger waehlen

FAQ

Einfache Einrichtung (mit Wildcards)

Vollständige Einrichtung (vollständig detailliert)

Web Experimentation

Feature Experimentation (clientseitige SDKs)

Grafische Editoren

Prompt-Based Experimentation (PBX)

Simulation

Produktempfehlung

APIs und Integrationen

Interne Ressourcen

Asynchrones Laden mit Anti-Flicker

Sitzungsdaten über Subdomains vereinheitlichen

Startseite

Web Experimentation

Feature Experimentation

Kernkonzepte

Datenschutz und Compliance

Entwicklertools

​Kameleoon im HTML-Quellcode implementieren

​Asynchrones Tag mit Anti-Flicker

​Synchrones Tag

​Asynchrones Tag ohne Anti-Flicker

​Kameleoon in einem Tag Manager implementieren

​Den richtigen Trigger waehlen

​FAQ

​Einfache Einrichtung (mit Wildcards)

​Vollständige Einrichtung (vollständig detailliert)

Web Experimentation

Feature Experimentation (clientseitige SDKs)

Grafische Editoren

Prompt-Based Experimentation (PBX)

Simulation

Produktempfehlung

APIs und Integrationen

Interne Ressourcen

​Asynchrones Laden mit Anti-Flicker

​Sitzungsdaten über Subdomains vereinheitlichen

Kameleoon im HTML-Quellcode implementieren

Asynchrones Tag mit Anti-Flicker

Synchrones Tag

Asynchrones Tag ohne Anti-Flicker

Kameleoon in einem Tag Manager implementieren

Den richtigen Trigger waehlen

FAQ

Einfache Einrichtung (mit Wildcards)

Vollständige Einrichtung (vollständig detailliert)

Asynchrones Laden mit Anti-Flicker

Sitzungsdaten über Subdomains vereinheitlichen