Pour implémenter Kameleoon sur votre site web, ajoutez un tag d’installation JavaScript au code source HTML de vos pages.
Implémenter Kameleoon dans le code source HTML
Pour Web Experimentation, ajoutez toujours le tag Kameleoon dans la section <head> du code source HTML. Placer le tag dans la section <body>, en particulier à la fin de la page, augmente le risque de clignotement. Ajoutez le tag aussi haut que possible dans la section <head>, idéalement immédiatement après la balise d’ouverture <head>. Cette position permet au navigateur de charger le fichier d’application Kameleoon avant les autres ressources. Le CSS ou d’autres scripts placés avant le tag Kameleoon augmentent le risque de clignotement.
Si vous utilisez le mode hybride (à la fois un SDK et le tag d’installation JavaScript), vous pouvez placer le tag plus tard dans le body, par exemple juste avant la balise de fermeture </body>. Le clignotement ne se produit pas lors de l’utilisation d’un SDK web.
Si votre site web utilise plusieurs sous-domaines, incluez le code supplémentaire données de session unifiées entre sous-domaines dans le script d’implémentation. Kameleoon a besoin de ce code pour utiliser les données de session sur tous les sous-domaines pour un ciblage comportemental avancé. Ajouter un script ou une ressource à votre site web augmente la charge. Kameleoon priorise la performance et optimise son code pour obtenir les meilleurs résultats possibles.
Tag asynchrone avec anti-flicker
Cette méthode charge le script Kameleoon de manière asynchrone et inclut le code anti-clignotement. Kameleoon utilise une “règle CSS bloquante” pour masquer le contenu de la page et la supprime dès que le code d’application est chargé (généralement en moins de 50 ms) ou lorsque le timeout spécifié (par défaut 750 ms) expire. Cette protection garantit que Kameleoon ne provoque jamais l’arrêt de votre site web ou le maintien d’une page vide indéfiniment.
Ajustez le timeout à l’aide de la variable JavaScript kameleoonLoadingTimeout dans le snippet d’installation.
Si un timeout se produit et que le code Kameleoon finit par se charger, vous pouvez configurer les étapes suivantes dans les paramètres de confirmation avancés de votre projet. Vous avez deux options :
- Désactiver entièrement Kameleoon pour ce visiteur.
- Exécuter normalement le code de Kameleoon (ce qui peut provoquer un clignotement).
<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 par le site code de votre projet.
Les domaines des scripts Kameleoon varient selon le projet. Les projets utilisent soit kameleoon.eu soit kameleoon.io selon leur date de création. Utilisez le domaine affiché dans l’application Kameleoon pour votre projet.
Le compteur de timeout démarre lorsque le navigateur exécute le code, pas lorsqu’il commence à télécharger engine.js. Définir un timeout trop bas (par exemple 100 ms) peut ne pas laisser suffisamment de temps au navigateur pour télécharger et exécuter le fichier, en particulier sur des connexions lentes ou lorsque d’autres scripts sont en file d’attente.
Placez le tag d’installation Kameleoon à l’intérieur de la balise <head> ou au début de la balise <body>. Le placer plus tard dans le <body> peut provoquer le chargement, la disparition puis la réapparition de la page, car le code anti-clignotement nécessite d’être exécuté à l’intérieur du <head> pour fonctionner correctement.
Tag synchrone
Cette méthode charge le script Kameleoon de manière synchrone pour empêcher le clignotement. Cependant, cette approche bloque le chargement de la page jusqu’à ce que le navigateur télécharge et exécute le code Kameleoon, ce qui peut affecter les performances.
<script>window.kameleoonQueue = window.kameleoonQueue || [];</script>
<script type="text/javascript" src="//SITE_CODE.kameleoon.io/engine.js" fetchpriority="high"></script>
SITE_CODE par le site code de votre projet.
Les domaines des scripts Kameleoon varient selon le projet. Les projets utilisent soit kameleoon.eu soit kameleoon.io selon leur date de création. Utilisez le domaine affiché dans l’application Kameleoon pour votre projet.
Tag asynchrone sans anti-flicker
Ce tag installe le fichier d’application Kameleoon de manière asynchrone sans prévention anti-flicker. Utilisez ce tag si le clignotement n’est pas un problème, par exemple lors de l’utilisation du mode hybride.
<script>
window.kameleoonQueue = window.kameleoonQueue || [];
</script>
<script type="text/javascript" src="//SITE_CODE.kameleoon.io/engine.js" fetchpriority="high" async></script>
SITE_CODE par le site code de votre projet.
Les domaines des scripts Kameleoon varient selon le projet. Les projets utilisent soit kameleoon.eu soit kameleoon.io selon leur date de création. Utilisez le domaine affiché dans l’application Kameleoon pour votre projet.
Implémenter Kameleoon dans un Tag Manager
Kameleoon prend en charge tous les principaux Tag Management Systems (TMS). Pour éviter le clignotement, installez Kameleoon directement dans le code source de votre page. Utiliser un TMS retarde le chargement, ce qui entraîne souvent un clignotement notable, en particulier si le TMS se charge en bas de la page HTML.
Kameleoon ne fournit pas de support technique pour les problèmes de clignotement causés par les implémentations TMS. Les environnements TMS ne permettent pas le chargement synchrone de JavaScript externe.
Pour les implémentations TMS, utilisez le tag JavaScript asynchrone.
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);
Les domaines des scripts Kameleoon varient selon le projet. Les projets utilisent soit kameleoon.eu soit kameleoon.io selon leur date de création. Utilisez le domaine affiché dans l’application Kameleoon pour votre projet.
Certains TMS offrent un support côté serveur, ce qui vous permet d’installer Kameleoon sans causer de problèmes. Cette configuration équivaut à intégrer le code d’installation directement dans votre HTML.
Choisir le bon déclencheur
Lors de l’implémentation de Kameleoon via un TMS, utilisez un déclencheur spécifique pour garantir que le script s’exécute le plus tôt possible. Choisissez le déclencheur qui se déclenche le plus tôt sur chaque page pour votre TMS spécifique.
Ne configurez pas votre TMS pour mettre en cache ou combiner le script Kameleoon. Le fichier d’application contient des données de configuration dynamiques nécessaires à l’exécution des expériences et personnalisations. Mettre ce fichier en cache empêche les expériences de démarrer ou de s’exécuter correctement.Évitez d’utiliser la technologie de prévention anti-flicker dans un TMS, car elle n’est pas conçue pour fonctionner correctement dans cet environnement.
