Test A/B hybride

3

min

quiz

Les tests hybrides sont au croisement des tests A/B classiques et des tests côté serveur.

Il permettent de lancer des tests à la fois front-end et back-end.

Créer un nouveau test A/B hybride 

Depuis le back-office, rendez-vous sur « Nouveau projet » :

Sélectionnez, dans la pop-in qui s’ouvre, « test A/B côté serveur » :

Sélectionnez ensuite un type de test. Vous pouvez choisir entre deux types de tests :

  • 100 % côté serveur
  • Hybride

Dans le cas d’un test hybride, le test est injecté dans le fichier d’application kameleoon.js, ce qui ne sera pas le cas lors d’un pur test server-side.

Cliquez sur « Créer » : l’éditeur de code s’ouvre alors.

Note : Il est également possible de créer et de modifier un test hybride depuis l’éditeur graphique. L’éditeur de code est cependant l’interface à privilégier.

Configurer un test A/B hybride depuis l’éditeur de code

L’éditeur de code est l’interface recommandée pour la création d’un test hybride.

Il s’adapte aux particularités des tests hybrides en présentant à la fois les fonctionnalités de l’éditeur de code classique et celles de l’éditeur de code server-side.

Header

Le header affiche les informations principales associées au test :

  • son nom (vous pouvez double-cliquer sur le nom du test pour le modifier) ;

  • son statut (brouillon, en ligne, en pause, dévié ou arrêté) ;

  • la dernière interaction (dernier enregistrement ou mise à jour, date de mise en ligne…)

Vous pouvez vérifier que les modifications que vous avez apportées ont bien été enregistrées. Deux types de sauvegarde sont disponibles :

  • automatique lorsque le test est en brouillon ou en pause ;

  • manuelle pour les tests en ligne et les tests déviés (via le bouton vert dans l’onglet « Finaliser »).

Bloc Test

Par défaut, le bloc Variantes est affiché. Pour accéder au bloc Test, cliquez simplement sur “Test”.

Code spécifique au test

Pour toutes les variantes, vous pouvez ajouter, modifier ou supprimer du code JavaScript, CSS et/ou des données JSON (sélectionnez l’onglet correspondant en haut).

Le code JavaScript est automatiquement vérifié lorsque vous quittez la zone de modification du code (par exemple, en cliquant sur l’onglet “CSS”). Si une erreur est détectée, un message vous en avertit en bas de page.

Vous pouvez afficher l’erreur ou choisir d’ignorer le message en cliquant sur la croix pour le faire disparaître. Une barre latérale apparaît alors sur la droite de l’éditeur et vous permet d’identifier et de situer la portion de code qui pose problème.

Il ne vous reste plus qu’à corriger ! Une fois votre code JavaScript identifié comme correct, la barre latérale disparaît. Votre code sera à nouveau vérifié si vous lui apportez des modifications.

Si plusieurs erreurs ont été détectées, elles seront affichées l’une après l’autre au fil de vos corrections.

Pour l’instant, le JSON n’est intégré à aucun SDK. Patience, cette fonctionnalité est en cours de développement !

Options du code

Si vous cliquez sur le menu 3 points associé au menu “Code spécifique au test”, un sous-menu s’ouvre et vous permet d’accéder à des options.

Choisissez ici d’inclure ou d’exclure l’originale des modifications que vous venez d’effectuer. Si la case est cochée, le code JavaScript, CSS et/ou les données JSON seront également injectés sur la variante originale.

Tags et description

Éditez la description de votre test ou les tags associés si vous le souhaitez.

URL de la page testée

Modifiez ici l’URL de la page concernée par votre test A/B. Par défaut, l’URL est celle que vous avez renseignée dans la pop-in de création de votre test A/B hybride.

Ouvrir l’éditeur graphique

L’éditeur graphique s’ouvrira alors en lieu et place de l’éditeur de code.

Page de résultats du test

Si votre test a déjà été lancé, un lien vous propose d’accéder à la page de résultats.

Si votre test est arrêté, un bouton vert en bas de l’éditeur vous propose un accès direct à la page de résultats.

Bloc Variantes

Par défaut, le bloc Variantes est affiché lorsque vous accédez à l’éditeur de code.

Il vous permet d’injecter du code JavaScript, CSS et/ou des données JSON sur les variantes de votre test A/B hybride.

  • Dans la partie de gauche, vous pouvez ajouter, dupliquer, renommer ou supprimer une variante.

  • Dans la partie de droite, vous pouvez ajouter, modifier ou supprimer du code dans les champs JavaScript, CSS et/ou JSON. Il s’appliquera à la variante sélectionnée. Le code est vérifié de la même manière que dans l’onglet « Test ».

Pour l’instant, le JSON n’est intégré à aucun SDK. Patience, cette fonctionnalité est en cours de développement !

Ajouter une variante

Cliquez sur “+ Ajouter une variante”.

Le cercle de couleur associé à la variante se remplit lorsque cette dernière est sélectionnée. Naviguez ainsi entre les différentes variantes de votre test.

Menu de la variante

Au clic sur les 3 points à droite de chaque variante, un menu s’ouvre.

Les modifications effectuées via ce menu s’appliquent alors uniquement à la variante sélectionnée.

  • Éditez les options du code JavaScript sur la variante (vous pouvez choisir entre plusieurs paramètres d’affichage) ;

  • Renseignez éventuellement l’URL de redirection de la variante ;

  • Retrouvez toutes les options disponibles dans l’éditeur graphique classique.

Options du code JavaScript

  • Choisissez à quel moment le code JavaScript doit s’exécuter ;

  • Si le code JavaScript correspond à une pop-in, vous pouvez en limiter l’affichage en activant certaines des options présentées.

Rediriger vers une URL

Par défaut, aucune redirection n’est paramétrée sur la variante. Vous pouvez cependant mettre en place une redirection globale ou par paramètre.

Prévisualiser

Au clic, l’URL de prévisualisation s’ouvre dans un nouvel onglet. Vous pouvez alors vérifier l’affichage de vos variantes.

Renommer

Éditez le nom de vos variantes.

Dupliquer

 

Au clic, une copie de la variante est créée.

Supprimer

Une pop-in vous demande de confirmer votre choix.

Bloc Finaliser

Étapes de finalisation

Dans la partie de gauche, comme dans le cas d’un test A/B sur l’éditeur graphique, vous devez valider chacune des 3 étapes pour pouvoir lancer votre test :

  • distribution du trafic ;

  • ciblage (contrairement à un test 100% côté serveur) ;

  • suivi et objectifs.

Au clic, chaque étape se déroule pour afficher les détails de la configuration choisie.

Répartition du trafic

Cliquez sur l’icône crayon pour paramétrer la répartition du trafic sur votre test A/B hybride.

Confirmez votre choix : l’étape est validée, un check vert l’indique dans l’éditeur de code.

Ciblage

Cliquez sur l’icône crayon pour paramétrer le ciblage de votre test A/B hybride : par page web ou par segment de visiteurs.

Confirmez votre choix : l’étape est validée, un check vert l’indique dans l’éditeur de code.

Suivi et objectifs

Sélectionner au moins un objectif afin d’activer Kameleoon comme outil de reporting, puis sélectionnez les autres outils de suivi que vous souhaitez éventuellement associer à votre test A/B hybride.

Confirmez votre choix : l’étape est validée, un check vert l’indique dans l’éditeur de code.

Simulation

Il est fortement recommandé de simuler votre test A/B hybride afin de vérifier l’affichage et le ciblage des variantes. Pour cela, cliquez simplement sur le bouton “Simuler” pour ouvrir le mode simulation dans un nouvel onglet de votre navigateur.

Statut du test

À droite, un encart rappelle le statut de votre test : brouillon, en ligne, en pause, dévié ou arrêté.

Une fois votre test lancé, vous pouvez modifier son statut en cliquant sur la flèche pour dérouler les actions possibles.

Note : La planification n’est pas disponible dans le cas d’un test hybride.

Informations

Cet encart est déplié par défaut. Vous retrouvez le site auquel votre test A/B hybride est associé, ainsi que la date de création de votre test.

Identifiants

Cet encart est déplié par défaut. Vous retrouvez l’identifiant de votre test ainsi que les identifiants de chacune des variantes de votre test A/B hybride.

Mise en ligne

Ce bouton devient actif lorsque les 3 étapes de finalisation nécessaires ont été réalisées.

Cliquez sur le bouton “Mettre en ligne” pour publier immédiatement votre test A/B hybride.

Une pop-in de récapitulation indique l’essentiel de la configuration de votre test, ainsi que la marche à suivre. Il ne vous reste plus qu’à coder vos variantes côté serveur, en utilisant les identifiants générés. Vous pouvez vous référer à ces instructions.

Il est possible de tout copier à la fois en cliquant sur « Tout copier » en bas à gauche.

Une pop-in vous confirme ensuite le bon lancement du test et le statut de ce dernier passe de “Brouillon” à “En ligne”.

Vous restez sur l’éditeur de code et pouvez apporter des modifications à votre test si nécessaire.

Note : Il peut exister un court temps de latence (jusqu’à 10 minutes) entre la mise en ligne d’un test A/B et sa visibilité sur le site. Ne vous inquiétez pas si votre test n’apparaît pas immédiatement !

Enregistrement et mise à jour

Au cours de la création de votre test, vous pouvez enregistrer vos modifications et quitter l’éditeur de code. Votre test sera sauvegardé en tant que brouillon et vous serez redirigé vers le tableau de bord A/B.

Une fois votre test en ligne, vous pouvez toujours lui apporter des modifications. L’enregistrement de ces dernières est indiqué en haut à gauche de l’éditeur de code, juste sous le nom du test.

Deux types de sauvegarde sont disponibles :

  • automatique lorsque le test est en brouillon ou en pause ;

  • manuelle pour les tests en ligne et les tests déviés.

Configurer un test A/B hybride depuis l’éditeur graphique

L’éditeur de code est l’interface recommandée pour la création d’un test hybride. Cependant, vous pouvez aussi créer ou éditer un test hybride via l’éditeur graphique.

Modifier une variante 

Dans le cas des tests hybrides, vous pouvez modifier une variante exactement de la même façon que pour un test A/B classique (depuis l’éditeur ou depuis le code) : modifier un élément de la variante, ajouter de nouveaux éléments à la variante.

Configurer les options de ciblage

Comme pour les tests A/B classiques, vous avez accès aux options de ciblage.

Cependant, le ciblage ne se fait pas en server-side. Configurer un ciblage sur un test hybride est utile dans le cas de l’intégration d’un outil tiers car cela permet d’envoyer de la donnée vers cet outil.

Implémenter le test

Après avoir lancé votre test, une pop-in apparaît et affiche les identifiants dont vous avez besoin pour implémenter le test dans le code de votre site : 

Pour en savoir plus sur le pont back-end/front-end, nous vous invitons à consulter notre documentation développeur.

Retrouver un test A/B hybride

Tag

Le tag “Développeur” est automatiquement associé à votre test hybride.

Filtre

Sur la page “Vue d’ensemble” de votre dashboard A/B, il vous est possible d’appliquer un ou plusieurs filtre(s) afin de retrouver plus facilement un test. Le filtre “Test A/B développeur” est sélectionnable dans la catégorie de filtres “Type”.

Carte

 

En cliquant sur « Éditer » ou « Finaliser » (icône crayon), l’éditeur de code s’ouvre dans un nouvel onglet.

Vous pouvez également ouvrir le test dans l’éditeur de code en cliquant sur l’icône </> qui apparaît au hover sur le bas de la carte.

Comme avec toutes les cartes de test A/B, il est également possible de dupliquer le test et sa configuration, de le supprimer, de gérer son statut et de consulter les résultats.