Passer au contenu principal
Cette page contient des instructions étape par étape pour installer Kameleoon, notamment la création d’un projet pour votre site web, votre application mobile ou les deux, ainsi que la configuration des paramètres de votre projet.

​
Vue d’ensemble

Avant de lancer des expériences sur votre site web ou votre application mobile, vous devez installer le script Kameleoon. Ce script, contenant le code unique de votre projet, doit être ajouté à 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. Plusieurs options de configuration sont disponibles. Leur séquence suit ce modèle :

​
Configuration du projet

Dans l’application Kameleoon, vous verrez la liste de vos projets. Par défaut, vous disposez d’une carte de 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’un projet :
  1. Cliquez sur Setup sur la carte du projet.
  2. Vérifiez la configuration du projet et cliquez sur Modify setup.
  3. Dans la fenêtre contextuelle qui apparaît, cliquez à nouveau sur Modify pour accéder à vos paramètres.

​
Créer un nouveau projet

Pour créer un nouveau projet :
  1. Cliquez sur New project.
  2. Saisissez l’URL de votre site et, éventuellement, un nom et une description.
  3. Cliquez sur Add.
Une nouvelle page apparaîtra pour vous guider tout au long de l’installation.
Votre capacité à créer des projets supplémentaires dépend de votre forfait Kameleoon.

​
Choisir vos paramètres d’implémentation

Lors de la configuration d’un nouveau projet, il vous sera demandé de choisir des paramètres d’implémentation. Pour les détails techniques, notamment comment installer Kameleoon à l’aide d’un tag manager ou implémenter des types de scripts personnalisés, veuillez consulter cet article.

​
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 les expériences et la collecte de données sont activées. Pour plus de détails, consultez l’article sur la gestion du consentement de Kameleoon.

​
Configuration des domaines

Vous pouvez définir quels domaines et sous-domaines peuvent charger le script Kameleoon et accéder à ses fonctionnalités.
  • Sous Domain configuration, cliquez sur Add a domain/subdomain pour ajouter à la liste blanche des domaines pour le suivi cross-domain.
    • Cela vous permet d’utiliser le Graphic editor 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.

​
Autorisations

Si vous ciblez des sous-domaines, vous devez configurer les en-têtes HTTP suivants :
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.
  • Sélectionnez une option dans le menu déroulant de la page de configuration.
  • Si vous choisissez l’auto-hébergement, fournissez l’URL de votre Content Delivery Network (CDN).
Apprenez-en plus sur l’hébergement des ressources ici.

​
Installer le script Kameleoon

Après avoir défini l’URL de votre site, Kameleoon génère un script à installer.
  1. Copiez l’extrait de code fourni.
  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. Cliquez sur Validate dans Kameleoon.
Pour de meilleurs résultats, installez le script le plus tôt possible dans le processus de chargement de la page.
Si Kameleoon ne parvient pas à détecter le script, vérifiez qu’il a été correctement ajouté. Vous pouvez choisir d’ignorer la vérification si vous êtes certain que le script est présent.

​
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 à 1 000 ms. Pour explorer les options disponibles, consultez la capture d’écran ci-dessous.
Vous pouvez accéder au menu déroulant Behavior if timeout occurs en cliquant sur Admin > Configuration > General.

​
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.
Pour accéder au menu déroulant Behavior when consent is unknown, cliquez sur Admin > Configuration > Experiment/Personalization.

​
Ciblage

Utiliser des informations chargées tôt
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.