Mise en place

Cette page te guide de bout en bout : installer Kameleoon sur ton site, préparer ton projet Kameleoon, puis connecter ton compte pour que l’agent et le panneau Kameleoon puissent travailler avec. Compte une dizaine de minutes.

Ce qu’il te faut : un projet Highwind (de préférence déjà publié) et un compte Kameleoon avec un projet (site) pour ton app.

1. Récupérer le code du site

Le code du site identifie ton projet Kameleoon. Il est public : il apparaît de toute façon dans le code de ton site, ce n’est pas un secret.

1. Dans Kameleoon, ouvre Admin → Projets.
2. Repère ton projet et copie la valeur de la colonne Sitecode (tu la trouves aussi dans l’en-tête du projet, avec un bouton pour la copier).

Un code de site est fait uniquement de lettres et de chiffres.

2. Ajouter Kameleoon à ton app

1. Dans le chat de ton projet, tape @ (ou ouvre le menu + → Connecteurs) et choisis Kameleoon, l’entrée de la catégorie Analytics. Complète ta demande, par exemple :

   @Kameleoon Ajoute Kameleoon pour que je puisse faire des A/B tests sur le site.

2. Envoie le message. L’agent ajoute le connecteur et une carte L’agent a besoin de ta connexion Kameleoon apparaît dans le chat.

3. Choisis une connexion déjà enregistrée dans ton compte (Utiliser une connexion de ton compte) ou colle le code du site dans le champ Code du site, puis valide. Highwind vérifie que le code correspond bien à un projet Kameleoon, sans rien modifier de ton côté.

4. L’agent installe le tag Kameleoon. Quand il a fini, clique sur Publier pour mettre le tag en ligne.

Deux entrées « Kameleoon » dans le menu

Le menu des connecteurs propose deux Kameleoon : celui de la catégorie Analytics est le connecteur de l’app (le tag sur ton site) ; celui de la catégorie Contexte pour l’agent est la source de contexte (ton compte, voir l’étape 5). Pour installer Kameleoon sur ton site, choisis le premier.

Tu peux aussi relier le connecteur depuis les paramètres du projet, et changer le code du site plus tard dans Paramètres du projet → Secrets (valeur KAMELEOON_SITE_CODE).

Ce que l’agent met dans index.html

Par défaut (A/B tests et personnalisations construits dans Kameleoon), l’agent place tout en haut du <head>, avant tout autre script :

• un petit script anti-scintillement : la page reste masquée le temps que Kameleoon applique la variation, au plus 750 ms, pour que le visiteur ne voie jamais l’original « clignoter » avant la variation ;
• le tag engine.js de ton projet, chargé depuis kameleoon.io, avec un repli automatique sur kameleoon.eu (les projets plus anciens sont hébergés sur ce domaine).

L’agent n’utilise jamais l’ancien tag kameleoon.js, qui n’est plus pris en charge. Sur un site à fond sombre, il adapte la couleur du masque anti-scintillement au fond du site.

Voir le code installé

SITE_CODE est remplacé par ton code de site.

<script>
  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 src="https://SITE_CODE.kameleoon.io/engine.js" fetchpriority="high" async onerror="this.onerror=null;var s=document.createElement('script');s.src='https://SITE_CODE.kameleoon.eu/engine.js';s.async=true;document.head.appendChild(s)"></script>

Pour les feature flags décidés dans le code, l’agent peut utiliser le SDK JavaScript de Kameleoon à la place du tag : demande-le explicitement (voir L’agent et Kameleoon).

3. Préparer ton projet Kameleoon

Trois réglages se font dans Kameleoon. L’agent te les rappelle dans son résumé.

Activer le support des sites dynamiques

Une app Highwind est une application React d’une seule page : quand le visiteur change de page, le navigateur ne recharge pas tout. Pour que Kameleoon réapplique tes expériences à chaque navigation :

1. Dans Kameleoon, ouvre Admin → Projets, puis ton projet.
2. Va dans Setup → Technical configuration.
3. Active Enable support for dynamic websites (support des sites dynamiques).

Attention

Sans ce réglage, une expérience peut ne s’appliquer qu’à la première page vue, et pas après une navigation dans le site.

Choisir la politique de consentement

Dans l’Union européenne, Kameleoon ne doit suivre un visiteur qu’avec son accord. L’agent relie le bandeau cookies de ton site à Kameleoon : quand le visiteur accepte, le bandeau appelle enableLegalConsent() ; quand il refuse, disableLegalConsent(). Un visiteur n’est jamais laissé dans un état indéterminé.

Dans Kameleoon, ouvre Admin → Projets → Consent et choisis la politique qui correspond à ce fonctionnement (consentement géré par ton site).

Astuce

Si ton site n’a pas encore de bandeau cookies, demande-le en même temps : « Ajoute un bandeau cookies relié au consentement Kameleoon ».

Déclarer l’adresse du site publié

Kameleoon n’applique tes expériences que sur les domaines déclarés pour le site. Dans les réglages de ton projet Kameleoon, ajoute l’adresse de ton app publiée : par exemple mon-app.highwind.site, ou ton domaine personnalisé. Tu peux aussi déclarer un domaine générique comme *.highwind.site.

Astuce

Le panneau Kameleoon propose cette adresse comme Page testée quand tu crées une expérience. Avec un domaine générique (*.highwind.site), l’adresse proposée n’est pas celle de ton app : corrige-la avant de créer l’expérience.

4. Récupérer tes identifiants API

Pour que l’agent et le panneau accèdent à ton compte, il faut tes identifiants API Kameleoon.

1. Dans Kameleoon, clique sur ton profil (en haut à droite), puis Mon profil (My profile).
2. Clique sur Voir mes identifiants API (See my API credentials), ou Générer s’il n’y en a pas encore.
3. Garde sous la main le client ID et le client secret.

Attention

Ces identifiants donnent les mêmes droits que ton compte Kameleoon. Ne les colle que dans le formulaire de Highwind prévu pour ça, jamais dans le chat.

5. Connecter la source Kameleoon

1. Ouvre la page Connecteurs (menu principal, ou menu + du chat → Gérer les connecteurs).
2. Dans la catégorie Contexte pour l’agent, ouvre Kameleoon.
3. Colle ton Client ID et ton Client secret, puis clique sur Connecter. Highwind vérifie les identifiants auprès de Kameleoon et les enregistre chiffrés.
4. La fiche affiche : « Connecté : l’agent peut lire tes sites, expériences, feature flags et objectifs Kameleoon. »

Autoriser l’agent à modifier

Une fois connectée, la fiche montre l’interrupteur Autoriser l’agent à modifier. Il est désactivé par défaut.

• Désactivé : l’agent et le panneau ne font que lire. Le panneau est en Lecture seule.
• Activé : l’agent peut aussi créer et modifier (expériences, feature flags, objectifs…) quand tu le lui demandes explicitement, et le panneau permet de créer des expériences, des variations et des objectifs, et de lancer tes tests.

Même activé, l’agent ne change que ce que tu lui demandes, et jamais en mode Discussion. Voir L’agent et Kameleoon.

6. Ouvrir le panneau Kameleoon

Retourne dans ton projet (si le mode n’apparaît pas tout de suite, recharge la page de l’éditeur). Le sélecteur en haut du panneau de gauche affiche maintenant trois modes : Chat | Design | Kameleoon. Clique sur Kameleoon.

Le panneau apparaît quand trois conditions sont réunies :

• la source Kameleoon est connectée sur ton compte (celui du propriétaire du projet) ;
• le projet a un code de site (connecteur Kameleoon de l’app ajouté) ;
• ce code correspond à un site présent dans le compte Kameleoon connecté.

Si quelque chose bloque

Symptôme	Cause probable	Solution
Le code du site est refusé	Code mal copié, ou projet introuvable	Recopie la colonne Sitecode (lettres et chiffres uniquement).
Les identifiants sont refusés	Client secret mal copié, ou identifiants régénérés depuis	Génère-les à nouveau dans Kameleoon et reconnecte la source.
Pas de mode Kameleoon dans l’éditeur	Une des trois conditions manque	Vérifie la source, le code du site, puis recharge l’éditeur.
Le code du site appartient à un autre compte	Le site n’est pas visible avec tes identifiants	Connecte les identifiants du compte qui possède ce site.
Les expériences ne s’appliquent pas sur le site	Tag pas encore publié, domaine non déclaré, ou sites dynamiques non activés	Publie, déclare l’adresse du site, active le support des sites dynamiques.

Voir aussi

Le panneau KameleoonCe que tu vois et ce que tu peux faire dans le troisième mode de l'éditeur.

Fiche du connecteur KameleoonPermissions, usages et configuration du connecteur de l'app.

Source de contexte KameleoonCe que l'agent lit dans ton compte Kameleoon.

Publier ton appMettre le tag Kameleoon en ligne avec ta dernière version.