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​

Tout d’abord, vous allez faire fonctionner l’application dans GitHub Pages, afin que vous n’ayez pas a vous soucier de la configuration d’un serveur web. Vous devrez etre connecte a votre compte GitHub.

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 : 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 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), 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​

Ouvrez l’application dans un navigateur. Vous devriez voir l’une des trois variations possibles : la variation Party time, la variation Hypnotize ou la variation par defaut. Maintenant, essayez de simuler un nouvel utilisateur jusqu’a ce que vous voyiez les autres variations. Cela peut prendre quelques tentatives car vous pouvez etre affecte a la meme variation a plusieurs reprises. Comme votre navigateur enregistre un visitorCode, qui est un ID unique vous identifiant, vous ne pouvez pas simplement actualiser la page car vous verrez toujours la variation a laquelle vous avez ete affecte en premier. Vous devez plutot apparaitre comme un nouveau visiteur. Voici les moyens les plus simples de le faire :

• 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).

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 ! 🎉🎉🎉

​

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.