[Spécial développeurs] Pilotez vos expériences directement à partir de votre environnement avec nos API REST

Une des questions souvent posées par nos clients est la façon la plus pertinente de réaliser des modifications graphiques sur le site pour créer des variantes de tests A/B ou des personnalisations.

Pour les modifications les plus simples, vous pouvez utiliser l’éditeur graphique WYSIWYG de Kameleoon : il permet de se lancer facilement dans une stratégie d’optimisation sans connaissances techniques approfondies.

Cependant, il ne permet pas de gérer tous les cas de figure et n’est parfois pas suffisant si l’expérience à créer se révèle complexe. C’est là où vos développeurs front-end entrent en jeu et vont coder directement les variantes de vos expériences en utilisant des fonctionnalités d’injection de code Javascript et CSS disponibles dans l’interface Wysiwyg.

Cette méthode de travail peut cependant se révéler rapidement frustrante pour les développeurs habitués à utiliser un IDE (Integrated Developer Environment). Passer par un éditeur graphique pour intégrer du code dans une page web est rarement dans leurs méthodologies de travail habituelles.

Bonne nouvelle ! Les développeurs peuvent aussi utiliser la solution Kameleoon sans changer leur façon de travailler et sans même avoir à se connecter à une interface graphique ! Comme qui dirait : Venez comme vous êtes :-).

Kameleoon embarque en effet une librairie d’API REST et propose une fonction d’API disponible pour chaque fonctionnalité majeure de l’interface. L’objectif premier est de vous permettre de gérer toutes vos expériences depuis votre environnement de travail habituel.

Couplé à un outil de versioning comme Git, cela permet de profiter pleinement de la puissance de nos API Rest.

Cet article montre comment certains de nos clients utilisent justement nos APIs Rest avec un outil comme GitHub pour faciliter leur stratégie d’optimisation.

NB. Si vous souhaitez accéder directement à notre Documentation Developpeurs sur nos API Rest, c'est par ici.

Comment relier Kameleoon à GitHub pour créer et lancer vos expériences ?

Nos API REST peuvent être utilisées pour la création, l’actualisation et la mise en ligne de toutes vos expériences : A/B tests ou personnalisations. Nous recommandons l’utilisation de Git car il vous permettra de travailler depuis votre propre environnement de test local.

Nous avons créé un projet « grunting-kameleoon » sur GitHub que vous pouvez télécharger depuis ce lien afin de vous familiariser avec l’utilisation de nos API Rest.

Le projet est sous licence « MIT Open Source », n’hésitez pas à le modifier en y ajoutant d‘autres fonctions ou à l’adapter en fonction de vos besoins. Le projet contient un dossier “template/ab-000” qui est à utiliser comme schéma directeur pour gérer vos expériences.

Nous avons également ajouté un dossier “tests” : lors de la création d’une nouvelle expérience (A/B ou personnalisation), tout ce que vous modifierez depuis votre environnement Git local sera stocké dans ce dossier : les variantes d’un test, le CSS et JS (par variante ou global au test), etc.

Tout est automatiquement versionné et vous pouvez dupliquer ou cloner ce dossier en local.

Après la création d’un test, de nouveaux fichiers seront prêts à être synchronisés.

Git offre une vision granulaire des changements effectués sur une expérience.

Comment utiliser ce projet ?

Vous devez d’abord ajouter vos identifiants Kameleoon dans le fichier kameleoon-configuration.json.

Pour vous aider à prendre en main les fonctions API REST disponibles, nous avons créé une librairie de fonctions Grunt que vous retrouverez dans le fichier Gruntfile.js. Ces fonctions font appel aux API REST de Kameleoon.

Des exemples d’utilisation sont fournis dans la capture ci-dessous :

• grunt : Tâche par défaut qui imprime de l’art ascii :-). Merci à Henry Münster, Product Manager Testing, chez Die Welt, qui a été le premier de nos clients à se reposer complètement sur nos API Rest pour mener sa stratégie d’optimisation !
• grunt authentication : Crée le token d’authentification Kameleoon, qui sera valable une heure. Le token sera automatiquement sauvegardé dans kameleoon-configuration et utilisé pour les autres tâches Grunt.
• grunt listSites : Permet d’obtenir tous les sites configurés dans le compte Kameleoon associé.
• grunt setSite : Permet de choisir le site Kameleoon à utiliser. Ce dernier sera automatiquement sauvegardé dans kameleoon-configuration et utilisé pour les tâches d’actualisation ou de création de tests.
• grunt listTests : Liste tous les tests d’un site donné.
• grunt createLocalTest : Cette fonction crée un test à partir du dossier /template/. Le paramètre Option --name est obligatoire. Le nom donné ici sera utilisé pour créer un nouveau sous-dossier dans le dossier /template/. Après configuration du test, vous devez définir l’URL et son nom à l’intérieur de configuration.json dans le dossier du test.
• grunt deleteLocalTest : Supprime un test local. Il faut fournir --name comme paramètre.
• grunt listLocalTests : Cette fonctionnalité montre tous les tests affichés localement (pas ceux en ligne sur le compte Kameleoon)
• grunt scrapeLocalTest : L’URL fournie dans configuration.json sera utilisée pour extraire le contenu de la page, qui sera sauvegardé sous le dossier /target/, le nom étant celui du test.
• grunt previewLocalTest : Lance le serveur local, avec le contenu de scrapeLocalTest
• grunt deployTest : Cette fonction permet de déployer un de vos tests en local dans le back-office de Kameleoon. Cette tâche appelle aussi la méthode updateVariations pour la configuration des fichiers CSS et JS du test local.
• grunt listGoals : Permet d’obtenir une liste de tous les objectifs associés au site sélectionné. Cela nécessite au moins un appel à grunt setSite au préalable.
• grunt assignGoal : Associe un objectif à votre test. Fournissez a minima le param --name et au moins un param --goal
• grunt deleteTest : Supprime un test distant, fournir --id du test.
• grunt updateTest : Pour actualiser un test déjà en ligne, utilisez --name=ab-xxx pour sélectionner le test à actualiser.
• grunt simulation : Crée un lien de simulation pour recetter un test en production avec le panneau de simulation Kameleoon.
• grunt experimentResults : Permet d’obtenir des statistiques de base de votre test.
• grunt startTest : Permet de lancer le test en production.

Les fonctions grunt peuvent être utilisées pour créer, lister ou modifier un test. La fonction simulation permet de créer un lien de simulation Kameleoon à la volée, pour réaliser une recette du test avant mise en production.

Comme vous pouvez le constater, le projet est toujours en phase de développement, mais il fournit un bon aperçu des possibles et surtout un fil directeur pour configurer vos propres tests tout en ayant un niveau de versionning intéressant. Nous continuerons à updater le repository régulièrement, stay tuned!

Exemple : Comment créer un nouveau test via l’utilisation de nos API Rest

Imaginons que vous souhaitez pousser du code de votre ordinateur, vers votre compte Kameleoon.

Voici comment cela fonctionnerait avec l’utilisation de notre projet GitHub :

1. Clonez le repository depuis https://github.com/pixelschrubber/grunting-kameleoon

2. Editez kameleoon-configuration.json en intégrant les détails de votre compte Kameleoon

3. Utilisez la commande "npm install" pour obtenir toutes les dépendances du projet

4. Utilisez la commande "grunt authentication" pour obtenir un token d’authentification Kameleoon, nécessaire pour l’utilisation des API Rest ensuite

5. Utilisez la commande "grunt listSites" pour obtenir une vue d’ensemble de tous les sites de votre compte Kameleoon

6. Utilisez la commande "grunt setSite --site=19046" avec l’un des “Sitecode” Kameleoon obtenu auparavant pour pointer sur le site de votre choix dans votre environnement de travail local

7. Utilisez la commande "grunt createLocalTest --name=ab-123" pour créer votre premier test sur votre machine en local

8. Editez le fichier “configuration.json” dans le dossier de test qui vient d’être créé (dans l’exemple précédent, le dossier est “tests/ab-123”), et remplissez les champs URL et nom

9. Mettez vos variantes dans variation.css et variation.js dans tests/ab-123/variation-0/

10. Utilisez la commande "grunt deployTest --name=ab-123" pour pousser votre test dans le back-office de Kameleoon.

11. Utilisez la commande "grunt simulation --name=ab-123" pour obtenir une URL de simulation pour recetter vos changements sur votre site de production.

12. Quand vous avez besoin d’actualiser le code, utilisez "grunt updateTest --name=ab-123" après avoir modifié vos fichiers locaux.

Comme montre la capture d’écran, le back office affiche le test qui vient d’être créé et déployé. La plateforme Kameleoon a été pensée pour être utilisée par tout profil d'utilisateur, marketeurs comme développeurs. Avec ses API Rest, Kameleoon étend le champ des possibles et offre un confort d'utilisation sans égal aux développeurs !

Pour approfondir le sujet, consultez la Documentation Développeurs sur nos API REST.