Demo : Feature Experimentation

Ce tutoriel pratique pour les developpeurs montre comment fonctionne Feature Experimentation sur la plateforme Kameleoon. Vous commencerez avec une application d’exemple et suivrez des instructions pas a pas pour configurer un ensemble de feature flags dans l’application Kameleoon, les activer dans l’application d’exemple et voir comment les feature flags affectent la page du visiteur. L’exemple est ecrit en TypeScript, mais vous n’avez pas besoin de connaitre TypeScript pour suivre ce tutoriel. L’experience avec n’importe quel langage de programmation moderne devrait suffire pour comprendre les points importants.

​

Prerequis

Avant de commencer, vous devez creer quelques comptes :

• Inscrivez-vous pour obtenir un compte d’essai Kameleoon gratuit de 30 jours. Vous devrez terminer ce tutoriel dans les 30 jours suivant la demande du compte, mais le tutoriel ne devrait prendre qu’environ 30 minutes a realiser.
• Un compte GitHub.

​

Executer l’application d’exemple

Vous pouvez exécuter l’application d’exemple soit dans GitHub Pages, soit sur votre machine locale. Connectez-vous à votre compte GitHub avant de commencer l’une ou l’autre méthode.

​

Déployer sur GitHub Pages

En déployant sur GitHub Pages, vous n’avez pas besoin de configurer un serveur web.

1. Dans le depot Bouncing ball sur GitHub, cliquez sur Fork. Suivez les instructions pour creer votre propre fork de l’application d’exemple dans github.com/<your_username>/bouncing-ball. (Remplacez <your_username> dans tout ce tutoriel par le nom de votre compte GitHub.)
2. Dans votre nouveau depot https://github.com/<your_username>/bouncing-ball sur GitHub, cliquez sur l’onglet Actions et cliquez sur le bouton pour activer les workflows.
3. Dans l’onglet Settings, cliquez sur Pages, cliquez sur le menu deroulant Source, puis cliquez sur GitHub Actions.
4. Dans l’onglet Actions, cliquez sur Deploy static content to Pages > Run workflow > Run workflow.

Une fois le processus de build et de deploiement termine (cela peut prendre une minute ou deux), vous devriez pouvoir voir l’application de demonstration s’executer dans un navigateur a l’adresse https://<your_username>.github.io/bouncing-ball ! Elle devrait ressembler a ceci :

​

Exécuter l’application localement

Vous pouvez aussi exécuter l’application d’exemple sur votre machine locale plutôt que de la déployer sur GitHub Pages. Travailler localement facilite l’observation des sorties de débogage dans la console de votre navigateur pendant que vous suivez ce tutoriel.

1. Clonez votre fork : git clone https://github.com/<your_username>/bouncing-ball.git.
2. Installez les dépendances : npm install.
3. Démarrez le serveur de développement local : npm run dev.
4. Ouvrez l’URL affichée par le terminal, par exemple http://localhost:5173.

Utilisez cette URL locale à la place de https://<your_username>.github.io/bouncing-ball pour le reste de ce tutoriel, y compris comme URL du site lorsque vous créez votre projet Kameleoon.

​

Réduire l’intervalle d’interrogation de la configuration

Pour accelerer les modifications du projet, l’intervalle de mise a jour auquel le SDK verifie les changements de configuration dans le compte Kameleoon peut etre ajuste par programmation :

1. Dans votre depot GitHub, dans l’onglet Code, ouvrez le fichier src/main.ts.
2. Cliquez sur le bouton Edit this file (avec l’icone crayon).
3. Trouvez et modifiez le fichier /src/main.ts. Trouvez la ligne suivante :
   const client = new KameleoonClient({ siteCode });
   
   Remplacez la ligne par le code suivant :
   const configuration = {   updateInterval: 1,};const client = new KameleoonClient({ siteCode, configuration });
   
   Le nouveau code ajoute une configuration avec un updateInterval de 1. Cette valeur reduit la frequence a laquelle le SDK interroge les modifications de configuration a une fois par minute (au lieu de la valeur par defaut de 60 minutes). Cette interrogation frequente n’est pas recommandee pour un environnement de production en raison de l’impact sur les performances, mais elle est utile pour le tutoriel. Kameleoon propose egalement une option streaming premium qui transmet immediatement les modifications de configuration au SDK.
4. Cliquez sur Commit changes….

​

Configurer un projet Kameleoon

Vous aurez besoin des identifiants de votre compte d’essai Kameleoon avant de commencer cette section.

1. Connectez-vous a l’application Kameleoon en utilisant les identifiants de votre compte d’essai.
2. Dans le menu de gauche, deroulez Admin et cliquez sur Projects > New project.
3. Dans la boite de dialogue, cliquez sur Site: Feature flags dans le premier menu deroulant, et collez https://<your_username>.github.io/bouncing-ball (ou votre URL locale, si vous exécutez l’application localement) comme URL of site. N’oubliez pas de remplacer <your_username> par le nom de votre compte GitHub. Cliquez sur Add.
4. Copiez le site code affiche sur la page suivante.
   
5. Dans votre depot GitHub, dans l’onglet Code, modifiez le fichier src/constants. Remplacez la valeur siteCode par le site code que vous venez de copier et cliquez sur Commit changes.

Si vous verifiez de nouveau votre application dans le navigateur (https://<your_username>.github.io/bouncing-ball, ou votre URL locale), vous devriez constater que tous les cercles rebondissants ont disparu. C’est parce que les cercles ont ete ajoutes par un feature flag Kameleoon dans un projet different. Vous venez de changer le site code afin que le site soit maintenant controle par votre projet Kameleoon, que vous n’avez pas encore entierement configure. Pas d’inquietude, vous allez ajouter vos propres cercles a l’application avec vos propres feature flags.

​

Configurer les feature flags

Les feature flags permettent de deployer de nouvelles fonctionnalites a une audience limitee et de tester leur efficacite avant un deploiement complet. La configuration peut etre geree par des developpeurs ou d’autres membres de l’equipe. Comprendre comment les feature flags sont configures dans l’interface Kameleoon aide a utiliser efficacement les variables dans l’application.

1. Dans l’application Kameleoon, dans le menu Activate, cliquez sur Feature flags.
2. Cliquez sur New feature flag.
3. Remplissez les champs avec les valeurs suivantes :
   • Nom : Bouncing ball demo
   • Project : {Selectionnez votre projet dans le menu deroulant}
   • Flag type : Permanent
   • Feature key : bouncing_ball_demo Vous pouvez laisser les champs tags et description vides.
4. Cliquez sur Validate.

​

Configurer les variables

Les variables sont des chaines, des nombres, des booleens ou des valeurs JSON que vous utilisez dans le code de votre application pour modifier le comportement de l’application. Leurs valeurs changent en fonction de la variation a laquelle Kameleoon affecte le visiteur. Par exemple, pour determiner si les visiteurs restent plus longtemps sur un site lorsqu’ils recoivent une variation “Party time” par rapport a une variation “Hypnotize”, configurez une variation pour chaque option et lancez une expérience.

1. Sur la nouvelle page qui apparait, deroulez le menu Set Up et cliquez sur Variables.

2. Utilisez le bouton + Add Variable pour ajouter 6 variables avec les valeurs suivantes :

   Cle de variable	Type	Valeur par defaut
   title_text	String	Default variation: 1 green ball
   randomize_on_bounce	Boolean	False
   balls_amount	Number	1
   ball_speed	Number	10
   ball_color	String	green
   ball_size	Number	20

   Attention aux fautes de frappe ! Les noms et types de cles de variables doivent correspondre exactement. Si vous regardez le fichier src/main.ts dans votre depot GitHub, vous comprendrez pourquoi. L’exemple de code utilise exactement ces noms de cles de variables pour recuperer les valeurs des variables, en fonction de la variation a laquelle Kameleoon affecte le visiteur.
3. Cliquez sur Save.

Vous avez maintenant configure un ensemble de variables avec des valeurs par defaut. Les valeurs par defaut sont les valeurs que votre application utilise lorsqu’il n’y a pas de campagnes actives pour le visiteur. Si vous activez vos feature flags maintenant, vous verriez la variation par defaut, avec 1 cercle vert rebondissant lentement. C’est parce qu’aucune variation n’a encore ete configuree.

​

Configurer les variations

Les variations definissent les combinaisons possibles de variables qui controlent ce qu’un visiteur voit dans votre application. Kameleoon attribue a chaque visiteur une variation lors de sa premiere visite dans l’application.

1. Dans Set Up, cliquez sur Variations.
2. Utilisez le bouton + Add variation pour ajouter deux nouvelles variations :
   • Nom : Party time
     • ball_size : 50
     • ball_color : random
     • ball_speed : 75
     • balls_amount : 75
     • randomize_on_bounce : True
     • title_text : Hey! Get up and dance!
   • Nom : Hypnotize
     • ball_size : 200
     • ball_color : blue
     • ball_speed : 2
     • balls_amount : 10
     • randomize_on_bounce : False
     • title_text : You're getting very, very sleepy

​

Configurer un objectif

Ensuite, vous allez configurer un objectif. Les objectifs definissent la facon dont vous souhaitez mesurer l’efficacite de vos variations. Il existe plusieurs types d’objectifs personnalisables differents que vous pouvez utiliser, mais ce tutoriel utilise une metrique de base “temps passe”.

1. Dans le menu Set Up, cliquez sur Goals > + Add goal.
2. Dans la section Configure goals, cliquez sur + Create a new goal et remplissez les champs suivants :
   • Nom : Time spent
   • Type : Time Spent
   • Project : {Selectionnez votre projet}
3. Cliquez sur Next et definissez l’objectif sur : The visitor spent more than 30 seconds.
4. Cliquez sur Validate.

​

Deployer une expérience

Maintenant que vos variations sont configurees, vous pouvez creer une expérience qui affiche les deux variations a un sous-ensemble de votre audience. Vous afficherez une variation a 40 % de vos visiteurs et l’autre variation a 40 % de visiteurs distincts. Les 20 % restants de visiteurs verront une version non modifiee de l’application (la valeur par defaut).

1. Dans la section Rollout Planner, cliquez sur Production.
2. Cliquez sur + Add a rule > Experiment.
3. Reduisez le curseur Exposure a 80%.
4. Sous Variations to serve, cliquez sur Party time et changez la valeur Exposition a 40.00%.
5. Cliquez sur + Add a variation. La variation Hypnotize devrait etre selectionnee automatiquement (sinon, selectionnez-la). Changez la valeur Exposition a 40.00%.
6. Mettez le bouton ON/OFF sur ON.
7. Cliquez sur Save.

​

Tester l’application

Vous allez maintenant tester le feature flag que vous avez configuré à l’aide des sorties de débogage du SDK, de quelques techniques de navigateur et des événements en direct de l’application Kameleoon, afin de confirmer que tout fonctionne.

​

Activer la journalisation de débogage

Les journaux de niveau débogage affichent chaque décision interne que prend le SDK, ce qui vous aide à comprendre pourquoi Kameleoon n’a pas servi une variation ou n’a pas suivi un événement. Activez la journalisation de débogage avant d’ouvrir l’application pour la première fois, afin de disposer d’une visibilité complète dès votre première visite.

1. Dans src/main.ts, modifiez l’import du SDK afin que KameleoonLogger et LogLevel proviennent du bundle complet plutôt que du bundle par défaut :
   import { EventType, KameleoonClient, KameleoonLogger, LogLevel } from "@kameleoon/javascript-sdk/full";
   
2. Juste après avoir créé le client, définissez le niveau de journalisation :
   const client = new KameleoonClient({ siteCode });
   client.setLogLevel(LogLevel.DEBUG);
   
3. Validez vos modifications (ou enregistrez le fichier, si vous exécutez l’application localement).
4. Ouvrez la console de développement de votre navigateur avant de charger l’application. Vous voyez alors des journaux détaillés sur le chargement de la configuration, l’attribution du code visiteur et le calcul de la variation.

Pour la liste complète des niveaux de journalisation et de ce que chacun signale, consultez Logging.

​

Afficher votre variation

Ouvrez l’application dans un navigateur, en utilisant soit votre URL GitHub Pages, soit votre URL locale. Vous devriez voir l’une des trois variations possibles : la variation Party time, la variation Hypnotize ou la variation par defaut.

​

Voir une variation différente

Comme votre navigateur enregistre un visitorCode, un identifiant unique qui vous identifie, actualiser la page affiche toujours la variation que Kameleoon vous a attribuée en premier. Pour apparaître comme un nouveau visiteur, utilisez une des méthodes suivantes :

• Passer a un autre navigateur ou appareil.
• Ouvrir l’application dans une nouvelle fenetre privee a chaque fois (selon le navigateur choisi, cela peut s’appeler “Incognito”, “Private Browsing” ou quelque chose de similaire).
• Utilisez le panneau de simulation du Rollout Planner pour sélectionner une variation spécifique sans générer de nouveau code visiteur. Consultez Utiliser le mode simulation pour connaître les étapes de configuration, y compris l’extension Chrome requise pour les projets qui utilisent uniquement Feature Experimentation.

Apres suffisamment de tentatives, vous devriez pouvoir voir les trois variations. Si oui, felicitations ! Vous avez configure avec succes une expérience de feature avec Kameleoon ! 🎉🎉🎉

​

Vérifier le suivi avec les événements en direct

Le fait qu’une variation s’affiche dans votre navigateur ne garantit pas que Kameleoon a suivi la visite. Vérifiez les Live events dans l’application Kameleoon pour confirmer que Kameleoon a bien reçu l’événement.

1. Dans l’application Kameleoon, accédez à Insights > Live events.
2. Sélectionnez votre projet.
3. Filtrez par type d’événement Experiment.
4. Recherchez une ligne avec un horodatage récent et le nom de votre feature flag.

Live events fonctionne de la même façon, que l’application s’exécute sur GitHub Pages ou sur votre machine locale, puisque Kameleoon reçoit l’événement via le réseau dans les deux cas. Consultez Live events pour en savoir plus sur le filtrage et les types d’événements.

​

Résoudre les problèmes courants

• La même variation apparaît à chaque fois. Votre navigateur a déjà stocké un visitorCode dans un cookie. Utilisez une fenêtre privée, changez de navigateur, ou utilisez le panneau de simulation pour prévisualiser une variation différente sans réinitialiser votre code visiteur.
• Aucune variation n’apparaît, ou vous voyez toujours la variation par défaut. Vérifiez que le bouton ON/OFF de la règle dans le Rollout Planner affiche ON et que le statut de la règle affiche Active.
• L’application affiche toujours une ancienne configuration après la modification d’une règle. Le SDK interroge les mises à jour de configuration à un intervalle défini, 60 minutes par défaut. Vérifiez que vous avez défini une valeur updateInterval plus courte dans votre configuration et validé la modification, puis attendez au moins la durée de cet intervalle avant de tester à nouveau.
• Les journaux de débogage n’apparaissent pas dans la console. Vérifiez que votre instruction d’import utilise @kameleoon/javascript-sdk/full plutôt que @kameleoon/javascript-sdk. Le bundle par défaut supprime les journaux de débogage et d’information pour réduire sa taille.
• Une variation apparaît, mais aucun événement ne s’affiche dans Live events. Le panneau de simulation prévisualise une variation sans envoyer d’événement traçable, si bien qu’aucun événement n’apparaît dans Live events. Visitez l’application normalement, sans le panneau de simulation, pour générer un événement que vous pouvez vérifier.

​

Etapes suivantes

• Dans la section Reporting de votre expérience, parcourez certains des resultats initiaux, des integrations disponibles et du journal d’activite. Vous n’aurez pas encore acces a beaucoup de donnees de resultats, en raison du faible trafic.
• Parcourez l’exemple de code pour comprendre comment les variables sont appliquees dans le code. Si vous etes a l’aise avec TypeScript, essayez d’ajouter votre propre variable.
• Parcourez le reste de cette documentation developpeur et le Guide d’utilisation Experimentation pour en apprendre davantage sur toutes les options et fonctionnalites disponibles.
• Installez le SDK de votre choix et commencez a creer vos propres feature flags, personnalisations et autres expériences.