Expériences et variations

Une expérience compare la version actuelle d’une page (l’original) à une ou plusieurs variations : chaque visiteur voit l’une d’elles, et Kameleoon mesure laquelle convertit le mieux. Dans le panneau Kameleoon, onglet Expériences, tu crées l’expérience, ses variations et leur code, puis tu la lances.

La liste des expériences

L’onglet Expériences affiche les expériences du site, les plus récemment modifiées en premier (les expériences archivées n’apparaissent pas). Chaque carte montre :

le nom de l’expérience ;
son statut : Brouillon, En cours (avec un point animé), En pause, Arrêtée, Programmée ou Désactivée ;
le nombre de variations ;
son type Kameleoon (par exemple CLASSIC) ;
la date de dernière modification.

Clique sur une carte pour ouvrir le détail. Le lien Toutes les expériences te ramène à la liste.

Créer une expérience

Dans l’onglet Expériences, clique sur Nouvelle expérience.
Nom : un nom parlant, par exemple « Hero : titre orienté bénéfice ».
Page testée : l’adresse de la page du site publié sur laquelle l’expérience s’applique. Elle est pré-remplie avec l’adresse du site déclarée dans Kameleoon ; vérifie-la et ajoute le chemin de la page si besoin (https://mon-app.highwind.site/tarifs). Elle doit commencer par https:// (ou http://).
Hypothèse (facultatif) : ce que tu t’attends à observer, par exemple « Un titre centré sur le bénéfice augmentera les inscriptions. »
Clique sur Créer l’expérience.

L’expérience est créée en brouillon dans Kameleoon, avec une première variation, et son détail s’ouvre aussitôt. Rien ne change pour tes visiteurs tant que tu ne l’as pas lancée.

Le détail d’une expérience

Le détail rassemble tout ce qu’il faut pour piloter le test :

En-tête : le nom, le statut, l’hypothèse, puis l’identifiant (#123), le type et la page testée.
Demander à l’agent : prépare un message dans le chat à propos de cette expérience (voir plus bas).
Boutons d’action selon le statut : Lancer, Mettre en pause, Reprendre, Arrêter.
Variations et Répartition du trafic : l’Original puis chaque variation, avec sa part du trafic en pourcentage et une barre. Les variations portent la mention code : clique dessus pour ouvrir leur code.
Objectifs suivis : les objectifs mesurés par l’expérience, dont l’objectif principal. Voir Objectifs et résultats.
Résultats : le bouton Calculer les résultats et le tableau par objectif.

Lancer, mettre en pause, reprendre, arrêter

Les actions proposées dépendent du statut de l’expérience :

Statut	Actions disponibles
Brouillon	Lancer
En cours	Mettre en pause, Arrêter
En pause	Reprendre, Arrêter
Autres statuts	Aucune depuis le panneau

Chaque action demande une confirmation, car elle touche ton site en ligne : par exemple « Lancer « Hero : titre orienté bénéfice » ? Les visiteurs du site seront concernés. ». Clique sur le bouton de l’action pour confirmer, ou sur Annuler.

Ajouter une variation

Dans le détail de l’expérience, sous la liste des variations, clique sur Ajouter une variation.
Donne-lui un nom (Nom de la variation), puis valide avec le bouton +.
L’éditeur de code de la nouvelle variation s’ouvre.

Le trafic est alors réparti à parts égales entre l’original et toutes les variations : 50 / 50 avec une variation, environ 33 / 33 / 33 avec deux, et ainsi de suite. Pour une autre répartition, règle-la dans Kameleoon.

Écrire le code d’une variation

Une variation, c’est du JavaScript et du CSS que le tag Kameleoon exécute sur la page testée, pour les visiteurs qui tombent dans cette variation. Ton app elle-même ne change pas.

Dans le détail de l’expérience, clique sur une variation.
Modifie si besoin le Nom de la variation.
Choisis l’onglet JavaScript ou CSS et écris ton code dans l’éditeur (le même éditeur que l’onglet Code de Highwind, avec coloration syntaxique). L’identifiant de la variation (#456) est affiché à droite des onglets.
Clique sur Enregistrer, ou appuie sur Ctrl + S. Le message Enregistré dans Kameleoon confirme l’enregistrement.

Tant que tu n’as pas enregistré, Annuler les changements remet le code tel qu’il est dans Kameleoon. Le lien en haut (le nom de l’expérience) te ramène au détail.

Ce code s’exécute sur le site publié, là où le tag Kameleoon est installé : c’est là que tu vérifies le résultat, pas dans l’aperçu de Highwind.

Exemple : changer le titre principal et la couleur du bouton d’inscription.

// JavaScript de la variation
const title = document.querySelector('[data-section="hero"] h1');
if (title) title.textContent = "Lance ton site en 5 minutes";

/* CSS de la variation */
[data-cta="signup"] {
  background: #0f766e;
}

Faire écrire la variation par l’agent

Le bouton Demander à l’agent (dans le détail d’une expérience et dans l’éditeur d’une variation) bascule sur le Chat et pré-remplit la zone de saisie avec la mention Kameleoon et les identifiants utiles :

@Kameleoon Dans la variation « Variation 1 » (ID 456) de l'expérience « Hero : titre orienté bénéfice » (ID 123),

Le message n’est pas envoyé : complète-le, puis envoie-le.

@Kameleoon Dans la variation « Variation 1 » (ID 456) de l'expérience « Hero : titre orienté bénéfice » (ID 123),
remplace le titre du hero par « Lance ton site en 5 minutes » et passe le bouton « S'inscrire » en vert.

L’agent connaît le code de ton app : il écrit un JavaScript et un CSS qui ciblent les bons éléments, puis les enregistre dans la variation. Clique ensuite sur Actualiser dans le panneau et rouvre la variation pour relire son code.

Depuis le détail d’une expérience, le message commence par « Pour l’expérience « … » (ID 123), » : pratique pour demander plusieurs variations d’un coup, ou faire relier des objectifs.

Bien cibler une app React

Une app Highwind est une application React : la page se reconstruit quand l’état change ou quand le visiteur navigue. Quelques règles pour des variations fiables :

Cible des attributs stables. Évite les classes générées ou les sélecteurs fragiles (div > div:nth-child(3)). Demande à l’agent d’ajouter des attributs dédiés dans l’app, par exemple : « Ajoute data-cta="signup" sur le bouton d’inscription et data-section="hero" sur le hero », puis publie.
Préfère le CSS pour les changements de style : il s’applique même si React reconstruit l’élément.
Attends l’élément en JavaScript : il peut ne pas encore exister quand la variation s’exécute, ou être recréé après un nouveau rendu. Vérifie toujours qu’il existe avant de le modifier.
Active le support des sites dynamiques dans ton projet Kameleoon, pour que les variations se réappliquent à chaque navigation (voir Mise en place).

Voir aussi

Objectifs et résultatsMesurer tes variations et trouver la gagnante.

L'agent et KameleoonCréer des expériences et écrire des variations en discutant.

Le panneau KameleoonLecture seule, actualisation et onglets du panneau.

Publier ton appMettre en ligne les attributs data-… ajoutés pour tes variations.