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.
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>
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>
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.
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>
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.
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);
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.
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.
