Skip to main content
Cette page contient des instructions étape par étape pour installer Kameleoon, notamment la création d’un projet Web Experimentation pour votre site web ainsi que la configuration des paramètres de votre projet. (Les projets Feature Experimentation prennent en charge les plateformes Web / Backend et Application mobile.)

​
Vue d’ensemble

Avant de lancer des expériences sur votre site web ou votre application mobile, vous devez installer le script Kameleoon. Vous devez ajouter ce script, qui contient le code unique de votre projet, à la balise <head> de votre code source. Si votre forfait le permet, vous pouvez gérer plusieurs sites ou applications depuis votre compte Kameleoon, ce qui est utile pour les tests dans des environnements de staging ou de pré-production. Lorsque vous créez un projet, le formulaire de configuration vous guide à travers quatre étapes. Votre méthode d’installation détermine les options affichées : Si vous activez le suivi cross-domain, la checklist inclut également une tâche pour héberger le fichier HTML statique de Kameleoon sur votre domaine principal.

​
Configuration du projet

Dans l’application Kameleoon, cliquez sur Admin > Projets pour voir la liste de vos projets. Par défaut, votre compte dispose d’un projet pour le site web ou l’application mobile que vous avez saisi lors de votre inscription.

​
Configurer un projet existant

Pour modifier les paramètres d’installation d’un projet :
  1. Cliquez sur Admin > Projets.
  2. Cliquez sur Modifier sur la ligne du projet, puis cliquez sur l’onglet Setup.
  3. Dans la section Installation method ou Technical configuration, cliquez sur Edit. Le formulaire de configuration en trois étapes s’ouvre.

​
Créer un nouveau projet

Pour créer un nouveau projet :
  1. Cliquez sur Admin > Projets, puis cliquez sur Nouveau projet.
  2. Sélectionnez Web Experimentation, ou Tous les types de campagnes si vous exécutez également des feature flags et des expériences SDK depuis le même projet. Après la création du projet, vous ne pouvez plus changer son type. Cliquez sur Suivant.
  3. Saisissez le domaine principal du projet, choisissez une couleur et ajoutez éventuellement un nom, une description et des tags, puis cliquez sur Suivant.
  4. Sélectionnez la méthode d’installation et, pour l’extrait de code, le mode de chargement, puis cliquez sur Suivant.
  5. Configurez la prise en charge des sites web dynamiques (extrait de code uniquement), l’hébergement des ressources et les domaines, puis cliquez sur Suivant. Si vous avez sélectionné Shopify comme méthode d’installation, Kameleoon ignore cette étape.
  6. Terminez les tâches de la checklist, puis cliquez sur Terminer la configuration.
Pour terminer plus tard, cliquez sur Enregistrer pour plus tard à l’étape Installation method ou Technical configuration. Kameleoon enregistre le projet comme brouillon, et le projet apparaît sur la page Projets avec le statut Brouillon. Lorsque vous cliquez sur Terminer la configuration, Kameleoon enregistre le projet avec le statut Activé. Pour la liste complète des options, consultez Créer un projet.
Votre capacité à créer des projets supplémentaires dépend de votre forfait Kameleoon.

​
Choisir vos paramètres d’implémentation

À l’étape Installation method du formulaire de configuration, vous choisissez comment installer Kameleoon et comment Kameleoon se charge sur votre site web. Pour les détails techniques, notamment comment installer Kameleoon à l’aide d’un tag manager ou implémenter des types de scripts personnalisés, consultez l’article Implémentation standard.

​
Consentement

Avant d’installer le script Kameleoon sur votre site web, assurez-vous que votre configuration est conforme à la politique de gestion du consentement de votre organisation. Si vous utilisez une Consent Management Platform (CMP), vous pouvez l’intégrer à Kameleoon pour contrôler quand Kameleoon active les expériences et la collecte de données. Pour plus de détails, consultez l’article sur la gestion du consentement de Kameleoon.

​
Domaines et sous-domaines

Vous pouvez définir quels domaines et sous-domaines peuvent charger le script Kameleoon et accéder à ses fonctionnalités.
  • À l’étape Technical configuration, sous Domains and subdomains, saisissez un domaine et cliquez sur Add domain pour ajouter à la liste blanche des domaines pour le suivi cross-domain.
    • Cela vous permet d’utiliser l’éditeur graphique de Kameleoon et de stocker/récupérer les données visiteur entre domaines.
    • Si vous essayez d’utiliser Kameleoon sur un domaine non répertorié, le chargement échouera en raison des politiques de sécurité du navigateur (CORS).

​
Suivi cross-domain

Le suivi cross-domain vous permet de :
  • Suivre le même visiteur sur différents domaines et sous-domaines (par exemple, example.com et example.org).
  • Éviter de reclasser les utilisateurs comme « nouveaux visiteurs » lorsqu’ils passent d’un domaine à l’autre.
  • Offrir des expériences de personnalisation et d’expérimentation cohérentes sur l’ensemble des propriétés.
Vous devriez activer le suivi cross-domain si vous prévoyez d’unifier les données de session sur plusieurs domaines. Pour l’activer, activez Track visitors across listed subdomains sous Domains and subdomains.

​
Autorisations

Si vous ciblez des sous-domaines, vérifiez ces deux paramètres d’en-tête HTTP :
Apprenez-en plus sur Intelligent Tracking Prevention (ITP) d’Apple, qui restreint le suivi cross-site dans Safari, dans cette documentation ITP.

​
Hébergement des ressources

Vous pouvez choisir si Kameleoon héberge ses ressources publiques ou si vous préférez les héberger vous-même.
  • À l’étape Technical configuration, sous Resource hosting, activez Self-host the script file, Self-host images, ou les deux.
  • Saisissez l’URL de votre Content Delivery Network (CDN) ou de votre serveur dans Script file URL, Image base URL, ou les deux.
Apprenez-en plus sur l’hébergement des ressources ici.

​
Installer le script Kameleoon

Après avoir défini le domaine principal de votre projet, Kameleoon génère un script à installer. Vous le trouverez dans l’onglet Setup et dans la tâche Add JavaScript snippet to your website de l’étape Checklist.
  1. Cliquez sur Copier pour copier l’extrait de code.
  2. Collez-le immédiatement après la balise <head> dans le code source de votre site.
  3. Enregistrez et téléchargez vos pages mises à jour sur votre serveur.
  4. Dans Kameleoon, cliquez sur Marquer comme terminé.
Installez le script le plus tôt possible dans le processus de chargement de la page.

​
Prévention du scintillement

Lorsqu’une page web se charge, les utilisateurs peuvent voir brièvement la version originale avant que la variation ne soit appliquée. Ce flash momentané est appelé effet de scintillement (flickering). Le scintillement se produit lorsque les modifications de la variation sont retardées, créant un basculement visible entre le contenu original et le contenu modifié. Le scintillement peut affecter l’expérience utilisateur et la fiabilité des expériences, en particulier dans les A/B tests.

​
Recommandations pour éviter le scintillement

​
Implémentation

Placez le script Kameleoon le plus haut possible dans la balise <head>. Assurez-vous que le script se charge en moins d’une seconde, idéalement en dessous de 500 ms. Pour vérifier le temps de chargement de Kameleoon, utilisez l’onglet Network dans les outils de développement de votre navigateur.
Le moyen le plus efficace de garantir un chargement rapide est d’installer Kameleoon directement dans le code source HTML, plutôt que via un tag manager tel que Google Tag Manager. En option, vous pouvez utiliser le script anti-flicker comme couche de protection supplémentaire contre le scintillement. Pour plus d’informations, consultez la documentation développeur de Kameleoon. Si vous activez cette option, vous disposerez de plusieurs configurations pour contrôler le comportement de Kameleoon en cas de timeout. La durée du timeout est configurable dans le script installé et est fixée par défaut à 750 ms. Pour explorer les options disponibles, consultez la capture d’écran ci-dessous.
Le formulaire Settings avec le menu déroulant Behavior if timeout occurs dans la section Campaign display
Vous pouvez accéder au menu déroulant Behavior if timeout occurs en cliquant sur Admin > Projets, en cliquant sur Modifier sur la ligne de votre projet et en ouvrant l’onglet Settings. Cliquez sur Edit dans la section Campaign display.

​
Consentement

Si votre politique de consentement est définie sur consent required, un scintillement peut se produire lors de la première vue de page lorsque le visiteur n’a pas encore donné son consentement. Ce scintillement se produit si vous choisissez de bloquer partiellement ou complètement Kameleoon lorsque le consentement est inconnu. Pour éviter le scintillement, vous ne devez pas bloquer Kameleoon, afin que les expériences puissent s’afficher avant que le consentement ne soit donné sur la page d’arrivée du visiteur. Cette approche est entièrement conforme aux réglementations en matière de confidentialité telles que RGPD, CCPA et d’autres cadres majeurs au Royaume-Uni, au Canada et aux États-Unis, car aucun suivi ni stockage de données (cookies/localStorage) n’a lieu avant l’octroi du consentement. Pour explorer les options disponibles, consultez la capture d’écran ci-dessous.
L'onglet Consent avec les trois sections de politique de consentement
Pour accéder au menu déroulant Behavior when consent is unknown, cliquez sur Admin > Projets, cliquez sur Modifier sur la ligne de votre projet et ouvrez l’onglet Consent. Cliquez sur Edit dans la section For A/B tests and feature experiments ou For personalizations, puis sélectionnez Consent required dans Consent policy.

​
Ciblage

Utiliser les informations disponibles au chargement de la page
Pour de meilleures performances, basez le ciblage sur des données disponibles immédiatement au chargement de la page, telles que :
  • L’URL de la page
  • Le type de navigateur
  • Le type d’appareil
  • cookies/localStorage
Lorsque c’est possible, évitez de cibler des éléments qui se chargent tardivement, tels que les variables dataLayer. Comme celles-ci peuvent se charger de manière asynchrone, leur utilisation pour le ciblage peut retarder l’exécution de la variation. Si un segment dépend d’une condition JS personnalisée ou de custom data qui dépend elle-même du dataLayer, un scintillement peut également se produire. Pour minimiser le scintillement, assurez-vous que toutes les conditions utilisées pour le ciblage sont résolues le plus tôt possible dans le cycle de vie de la page. Pour en savoir plus sur toutes les conditions de ciblage dans le Segment Builder, consultez cet article.

​
Code de variation

Utiliser CSS plutôt que JavaScript pour les changements visuels
L’utilisation de CSS plutôt que de JavaScript garantit un rendu plus rapide et plus fluide. CSS devrait être utilisé pour :
  • Masquer ou modifier des éléments
  • Échanger des blocs
  • Modifier les styles ou le texte
Optimiser l’exécution JavaScript avec l’Activation API
Si JavaScript est nécessaire, utilisez l’Activation API de Kameleoon pour vous assurer que les variations sont appliquées au bon moment :
  • runWhenConditionTrue : Exécute le code lorsqu’une condition spécifique est remplie.
  • runWhenElementPresent : Garantit que la variation s’affiche dès que l’élément ciblé est chargé sur la page. L’utilisation de ces méthodes évite les retards causés par les éléments qui se chargent de manière asynchrone.
Gestion des single-page applications
Si votre expérience s’exécute sur une single-page application (SPA) ou une page mise à jour dynamiquement, des étapes d’implémentation spéciales sont nécessaires. Suivez ce guide sur la configuration d’une expérience sur une SPA pour connaître les meilleures pratiques.

​
FAQ

L’erreur Refus d’affichage dans un frame se produit lorsque vous activez le suivi cross-domain, ce qui nécessite que votre domaine principal héberge un iframe statique.Comment fonctionne l’iframe KameleoonL’iframe garantit la cohérence des données entre sous-domaines en lisant et en écrivant dans le localStorage du domaine hôte. Ce mécanisme permet à Kameleoon de suivre le même visiteur sans appels serveur supplémentaires. Pour plus de détails, consultez Unification des données de session entre sous-domaines.Kameleoon sécurise l’iframe à l’aide de trois mesures :
  1. Accès restreint : Seuls les domaines de la variable allowedDomains peuvent demander l’iframe.
  2. Vérification du sitecode : Seul le sitecode spécifié peut demander l’iframe.
  3. Stockage préfixé : Kameleoon n’accède qu’aux entrées préfixées par kameleoon.
Kameleoon collecte des données non personnelles. Consultez la liste des données collectées et gérez le consentement via les API de gestion du consentement de Kameleoon.Résoudre le problème d’affichageL’en-tête X-Frame-Options empêche les navigateurs d’afficher des pages dans des frames pour éviter le click-jacking. Pour plus d’informations, consultez la documentation Mozilla.Pour activer le suivi cross-domain, vous ne devez pas définir l’en-tête X-Frame-Options. Vous pouvez sécuriser l’iframe en fournissant une liste restreinte de domaines dans le fichier iframe hébergé.
Vous pouvez voir une erreur indiquant que le script https://xxxxxx.kameleoon.eu/kameleoon.js viole votre Content Security Policy (CSP).Si votre site restreint les ressources via les en-têtes CSP, mettez à jour votre politique pour autoriser les ressources Kameleoon. Consultez la liste complète des domaines Kameleoon à autoriser.
Navigateurs web pris en chargeKameleoon ne prend pas en charge certains anciens navigateurs. Si un visiteur utilise un navigateur non pris en charge, il voit la page d’origine au lieu de l’expérience. Le retour à la page d’origine n’affecte pas négativement les résultats de l’expérience.Le script Kameleoon prend en charge :
  • Chrome
  • Firefox
  • Microsoft Edge
  • Opera
  • Safari
Kameleoon assure la compatibilité avec les trois dernières versions de chaque navigateur.Navigateurs pris en charge par l’éditeur graphiquePour les navigateurs pris en charge par l’éditeur graphique, consultez Quels navigateurs l’éditeur graphique supporte-t-il ?.Compatibilité avec les sites en responsive designVous pouvez créer des expériences pour des sites en responsive design à l’aide de fonctionnalités d’édition avancées. Les principaux défis impliquent généralement le redimensionnement et le repositionnement des blocs de contenu.Comme les pages s’affichent en fonction de la résolution ou de l’appareil, soyez prudent lorsque vous déplacez des éléments. Les heat maps ne sont pas disponibles pour ces pages car elles n’ont pas de cadre fixe.Kameleoon fournit des outils avancés pour vous aider à déplacer des éléments et à éviter les problèmes de mise en page.
Lorsqu’un visiteur arrive sur votre site web, son navigateur télécharge le code du site et le script Kameleoon. Le temps de chargement de la page dépend de la longueur du code et des ressources externes. La mise en cache améliore les performances lors des visites suivantes en stockant les ressources statiques dans le cache du navigateur.Bien que la mise en cache améliore l’expérience utilisateur, elle peut retarder de nouvelles expériences pour les visiteurs récurrents qui ont une ancienne version du script dans leur cache.Pour résoudre ce problème, le script Kameleoon comprend un drapeau Expiration du cache (TTL : Time-to-live). Ce drapeau demande au navigateur de télécharger une nouvelle version du script toutes les 1,5 heures.
Certains navigateurs mobiles peuvent ignorer les paramètres TTL pour optimiser les performances, selon la politique du navigateur.
L’effet de scintillement (ou flickering) se produit lorsque la page d’origine s’affiche brièvement avant le chargement de la variation. Le scintillement peut se produire lorsque le script Kameleoon se charge après le contenu de la page, de sorte que le navigateur applique les modifications de la variation en dernier. Pour réduire le scintillement, placez le script Kameleoon aussi haut que possible dans le HTML <head>. Pour les directives complètes, consultez Prévention du scintillement.
Kameleoon entre rarement en conflit avec d’autres scripts.Kameleoon utilise du JavaScript pur et ne nécessite pas jQuery, évitant les conflits avec les sites utilisant jQuery. Il fonctionne indépendamment des langages côté serveur et évite les variables JavaScript globales pour minimiser les risques d’incompatibilité.jQueryKameleoon n’entre pas en conflit avec jQuery si vous l’utilisez sur votre site web. Cependant, Kameleoon utilise la bibliothèque Sizzle, qui est le moteur de sélecteur CSS utilisé par jQuery. Vous pouvez utiliser Sizzle lors de la création de vos expériences.