Skip to main content
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.
Kameleoon recommande la méthode Tag asynchrone avec anti-flicker pour Web Experimentation. Bien que cette méthode charge Kameleoon plus lentement que les autres méthodes, elle offre l’implémentation la plus sûre. Un script asynchrone garantit que Kameleoon ne bloque pas le chargement de votre site. La surcouche blanche “simule” un script chargé de manière synchrone pour empêcher le clignotement. Pour prioriser des temps de chargement plus rapides, utilisez plutôt le tag synchrone.
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).
Remplacez le placeholder 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.
Remplacez le placeholder 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.
Remplacez le placeholder 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.
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.

FAQ

Si votre site web restreint le chargement de ressources (scripts, images, médias, CSS) via l’en-tête HTTP standard Content-Security-Policy (CSP), mettez à jour la CSP de votre site pour permettre le chargement des ressources Kameleoon. La même politique couvre le fichier d’application Kameleoon et les SDK côté client.

Configuration simple (avec caractères génériques)

script-src l’emporte toujours sur default-src. N’utilisez pas cette configuration si vous utilisez déjà la configuration complète dans votre CSP.
Ajoutez le contenu suivant à la configuration de votre en-tête CSP :

Configuration complète (entièrement détaillée)

Kameleoon ajoute régulièrement de nouvelles fonctionnalités au produit, ce qui peut entraîner des URL supplémentaires. Listez explicitement tous les hôtes et types de ressources possibles (script, image, etc.) dans l’en-tête CSP.
Remplacez [your-site-code] par votre site code Kameleoon dans chaque ligne où il apparaît et ajoutez ceci à votre configuration :
Chaque URL de la politique CSP a un objectif spécifique :
Web Experimentation
  • https://[your-site-code].kameleoon.xx : Charge le script de l’application Kameleoon Web Experimentation, engine.js (précédemment nommé kameleoon.js).
  • https://(eu|na)-data.kameleoon.(eu|io) : Utilisé pour le suivi.
  • https://logger.kameleoon.io : Envoie les données de suivi pour la journalisation.
  • https://data.kameleoon.net : Requis si vous utilisez l’outil de simulation Kameleoon pour faire le QA des expériences sur plusieurs sous-domaines.
Feature Experimentation (SDK côté client)
  • https://client-config.kameleoon.com : Requis pour les versions de SDK < 2.1.0.
  • https://sdk-config.kameleoon.eu : Requis pour les versions de SDK >= 2.1.0.
  • https://events.kameleoon.com:8110 : Requis pour le streaming en temps réel, une option premium.
  • https://api.kameleoon.com : Authentifie les requêtes SDK (/oauth/token).
  • https://(eu|na)-data.kameleoon.(eu|io) : Utilisé pour le suivi.
  • https://logger.kameleoon.io : Envoie les données de suivi pour la journalisation.
Éditeurs graphiques
  • https://static.kameleoon.com : (déprécié) Charge les ressources statiques de l’ancien Éditeur graphique.
  • https://editor.kameleoon.com : (déprécié) Utilisé par l’ancien Éditeur graphique.
  • https://graphical-editor.kameleoon.com : Utilisé par le nouvel Éditeur graphique.
  • https://storage.kameleoon.(eu|io) : Charge les images utilisées dans les expériences créées avec les éditeurs graphiques.
Prompt-Based Experimentation (PBX)
  • https://aibuilder.kameleoon.com : Utilisé par l’éditeur basé sur prompt.
  • https://electra.kameleoon.com : Utilisé par l’éditeur basé sur prompt.
  • https://storage.kameleoon.(eu|io) : Charge les images dans l’éditeur basé sur prompt.
  • https://api.kameleoon.com : Charge les informations liées au compte.
  • https://sdk-config.kameleoon.eu : Contrôle les feature flags Kameleoon activés dans l’éditeur basé sur prompt.
  • wss://electra.kameleoon.com : Utilisé pour l’échange de données.
Simulation
  • https://api.kameleoon.com : Utilisé par l’ancienne simulation.
  • https://simulation.kameleoon.com : Utilisé par la nouvelle simulation.
Recommandation produit
  • https://static.products.kameleoon.com : Charge les ressources du module de recommandation produit.
  • https://api.products.kameleoon.com : API utilisée par le module de recommandation produit.
  • https://images.products.kameleoon.com : Charge les images de produits pour les recommandations.
API et intégrations
  • https://api.kameleoon.com : Requis si vous prévoyez d’utiliser l’API d’automatisation pour les tests directement depuis le navigateur.
  • https://customers.kameleoon.com : Requis si vous utilisez l’API SDK ou une intégration personnalisée développée par Kameleoon.
Ressources internes
Par défaut, engine.js n’inclut pas les chemins de simulation ni les informations spécifiques à l’application pour minimiser la taille du script. Pour fournir ces détails, chargez le script complet kameleoonFull.js, qui fournit à engine.js les données nécessaires sur les ressources internes et les instructions de chargement.
  • https://static.kameleoon.com : Charge les ressources internes.
  • https://static.experimentation.dev : Charge les ressources internes.
  • https://sdk-config.experimentation.dev : Contrôle les feature flags Kameleoon activés dans le produit Kameleoon.
  • https://eu-data.experimentation.dev : Envoie les données de suivi à des fins de journalisation.
Le domaine de vos scripts Kameleoon https://[your-site-code].kameleoon.xx peut varier d’un projet à l’autre. 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. Il en va de même si vous utilisez Kameleoon en mode hybride.
Le moteur JavaScript Kameleoon nécessite la fonction eval() pour ajouter du code personnalisé à Kameleoon, comme des données personnalisées et du JavaScript personnalisé, lors de la mise en œuvre de variations d’une page. La fonction eval() permet à Kameleoon d’exécuter dynamiquement ce code personnalisé au moment de l’exécution.Si vous utilisez une directive Content Security Policy (CSP) qui empêche l’utilisation de la fonction eval(), implémentez le snippet JavaScript suivant avant le tag d’installation Kameleoon :
Si votre CSP bloque eval(), l’implémentation du snippet de code ne supprimera pas ces restrictions. Pour assurer une fonctionnalité complète, ajustez la directive CSP concernée pour autoriser eval() ou des fonctions similaires. Sinon, certaines fonctionnalités avancées de ciblage ou de personnalisation dans Kameleoon resteront inaccessibles en raison de l’application des règles de sécurité du navigateur.
L’éditeur graphique Kameleoon (y compris le panneau de simulation) nécessite également la fonction eval(). Vous pouvez toutefois contourner cette exigence en installant l’extension Chrome Kameleoon et en activant le paramètre Dev Tools > Tag injection > Bypass policies pour outrepasser localement les politiques. Vous devez également fournir votre sitecode. L’activation du paramètre Bypass policies vous permet d’utiliser l’éditeur graphique dans un navigateur Chrome.
Paramètre Bypass policies dans l'extension Chrome
Certaines fonctionnalités de Kameleoon ne sont pas disponibles si une directive CSP bloque la fonction eval(). Ces limitations s’appliquent même si vous utilisez l’un des snippets de code ou des contournements mentionnés dans cette réponse. Les fonctionnalités suivantes resteront indisponibles, sauf si votre CSP autorise explicitement eval() :
  • Cibler un segment avec une condition JavaScript personnalisée (uniquement pris en charge lorsque la condition s’exécute de manière asynchrone).
Paramètre asynchrone de la condition de ciblage
  • Utiliser des données personnalisées avec du code JavaScript personnalisé.
  • Utiliser des canaux d’acquisition avec du code JavaScript personnalisé.
L’iframe qu’utilise Kameleoon pour unifier les données de session entre sous-domaines n’utilise pas la fonction eval(). Vous pouvez mettre en œuvre l’unification des données de session quelle que soit votre politique CSP concernant eval().
Malheureusement, non. Bien que SRI offre une fonctionnalité de sécurité utile, le fichier d’application Kameleoon change au fil du temps. Si ce n’était pas le cas, des fonctionnalités comme démarrer et arrêter des expériences instantanément sans redéploiement seraient impossibles. Comme le contenu du fichier change, le hash de la ressource change également, ce qui signifie que SRI ne peut pas être utilisé. Sinon, le navigateur bloquerait la ressource dès qu’elle serait mise à jour sur les serveurs.
Les scripts Kameleoon sont déjà courts, et utiliser une version minifiée n’affecte pas de manière significative le temps de chargement de la page, car le code est déjà compressé avec Brotli ou Gzip. Kameleoon ne recommande pas les versions minifiées, mais si vous en avez besoin, elles sont disponibles ci-dessous.

Chargement asynchrone avec anti-flicker

Unifier les données de session entre sous-domaines

Si vous utilisez le tag de données de session unifiées pour unifier les données de session entre sous-domaines avec soit le tag synchrone, soit le tag asynchrone sans anti-flicker :
Si vous utilisez le tag de données de session unifiées et le tag asynchrone avec anti-flicker, ajoutez les trois balises de script dans l’ordre suivant :
  1. Tag asynchrone avec anti-flicker.
  2. Tag de données de session unifiées.
  3. Tag d’installation Kameleoon.
Ne modifiez pas les tags d’installation. Leur code est largement testé et optimisé. Les modifier peut entraîner une configuration non fonctionnelle. Si un tag d’installation nécessite une modification, contactez votre Customer Success Manager Kameleoon pour coordonner l’intervention avec les développeurs. N’essayez pas d’effectuer des modifications indépendantes.
N’incluez aucun tag d’installation dans son propre script externe séparé. Par exemple, ne faites jamais ceci :
Bien que cela puisse techniquement fonctionner, cela affecte significativement les performances de Kameleoon et introduit un effet de clignotement notable. Cette configuration reproduit les problèmes de l’utilisation d’un tag manager sans aucun des avantages associés.