> ## Documentation Index > Fetch the complete documentation index at: https://docs.kameleoon.com/llms.txt > Use this file to discover all available pages before exploring further. # Guide d'installation de Web Experimentation > Installez et configurez le script Kameleoon sur votre site web, y compris la configuration du projet, la configuration du domaine, les paramètres de consentement et la prévention du scintillement. 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 `` 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 : ```mermaid theme={null} flowchart LR MI[MAIN INFORMATION] --> IM[INSTALLATION METHOD] IM --> CS[CODE SNIPPET AND LOADING MODE] IM --> TM[TAG MANAGER] IM --> SH[SHOPIFY] CS --> TC[TECHNICAL CONFIGURATION] TM --> TC TC --> CL[CHECKLIST] SH --> CL ``` 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](https://app.kameleoon.com/), 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](https://docs.kameleoon.com/fr/user-manual/project-management/create-a-project.md#étapes-de-configuration-du-projet). > [!NOTE] > > 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](https://docs.kameleoon.com/fr/developer-docs/web-experimentation/implementation-and-deployment/standard-implementation.md). ## 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](https://docs.kameleoon.com/fr/user-manual/project-management/consent-management-policy.md) 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. > [!NOTE] > > 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 : * [Ne pas définir d'en-tête de réponse X-Frame-Options](#issue-refused-to-display-in-a-frame-because-it-set-x-frame-options-to-sameorigin) sur la page qui héberge l'iframe Kameleoon. * [Autoriser les ressources Kameleoon dans votre Content Security Policy](#issue-refused-to-load-the-script). > [!NOTE] > > Apprenez-en plus sur Intelligent Tracking Prevention (ITP) d'Apple, qui restreint le suivi cross-site dans Safari, dans cette [documentation ITP](https://docs.kameleoon.com/fr/developer-docs/web-experimentation/technical-concepts/itp-management.md). ## 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](https://docs.kameleoon.com/fr/developer-docs/web-experimentation/self-hosting/simple-self-hosting-and-on-premises-options.md). ## 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 ``** 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é**. > [!NOTE] > > 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 ``. 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. ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/get-started/web-installation/dev-tools.png) 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](https://docs.kameleoon.com/fr/developer-docs/web-experimentation/technical-concepts/flicker-management-and-performance.md) 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](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/manage-your-projects/edit-project-settings.png) 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**. Si Kameleoon se charge en retard, la page peut s'afficher avant que le code de variation ne soit appliqué. Dans ce cas, les optimisations décrites ci-dessous seront inefficaces. #### 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](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/manage-your-projects/consent-tab.png) 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](https://docs.kameleoon.com/fr/user-manual/assets/segments/create-a-segment.md) 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](https://docs.kameleoon.com/fr/developer-docs/apis/activation-api-js/api-reference/api-reference.md) 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](https://docs.kameleoon.com/fr/user-manual/experimentation/web-experimentation/advanced-experiment-types/set-up-experiment-single-page-app.md) guide sur la configuration d'une expérience sur une SPA pour connaître les meilleures pratiques. ## FAQ > [accordion] Problème : Refus d'affichage dans un frame (X-Frame-Options) > > 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 Kameleoon** > > L'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](https://docs.kameleoon.com/fr/developer-docs/web-experimentation/technical-concepts/unify-session-data-storage-across-subdomains.md). > > 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](https://docs.kameleoon.com/fr/developer-docs/privacy-and-compliance/data-collection-backend.md#liste-des-données-collectées) et gérez le consentement via les [API de gestion du consentement de Kameleoon](https://docs.kameleoon.com/fr/developer-docs/privacy-and-compliance/consent-management.md). > > **Résoudre le problème d'affichage** > > L'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](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options). > > 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é. > [accordion] Problème : Refus de chargement du script > > Vous pouvez voir une erreur indiquant que le script `https://xxxxxx.kameleoon.eu/kameleoon.js` viole votre [Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/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](https://docs.kameleoon.com/fr/developer-docs/web-experimentation/implementation-and-deployment/standard-implementation.md#what-are-the-kameleoon-domains-that-i-need-to-whitelist). > [accordion] Kameleoon fonctionne-t-il avec tous les navigateurs web ? > > **Navigateurs web pris en charge** > > Kameleoon 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 graphique** > > Pour les navigateurs pris en charge par l'éditeur graphique, consultez [Quels navigateurs l'éditeur graphique supporte-t-il ?](https://docs.kameleoon.com/fr/user-manual/experimentation/web-experimentation/graphic-based-experiments/edit-a-variation.md#which-browsers-does-the-graphic-editor-support). > > **Compatibilité avec les sites en responsive design** > > Vous 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. > [accordion] Quel est le temps d'expiration du cache (TTL) pour le script Kameleoon ? > > 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. > > > [!NOTE] > > > > Certains navigateurs mobiles peuvent ignorer les paramètres TTL pour optimiser les performances, selon la politique du navigateur. > [accordion] Qu'est-ce que l'effet de scintillement ? > > 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 ``. Pour les directives complètes, consultez [Prévention du scintillement](#prévention-du-scintillement). > [accordion] Kameleoon peut-il entrer en conflit avec d'autres scripts sur mon site ? > > 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é. > > **jQuery** > > Kameleoon n'entre pas en conflit avec jQuery si vous l'utilisez sur votre site web. Cependant, Kameleoon utilise la bibliothèque [Sizzle](http://sizzlejs.com/), qui est le moteur de sélecteur CSS utilisé par jQuery. Vous pouvez utiliser Sizzle lors de la création de vos expériences.