Documentation
  • Manuel utilisateur
    • A/B Testing
    • Personnalisation
    • Audiences
  • Développeurs
  • Académie
  • FAQ

Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages
  • English
  • Français

Page d’accueil

searchMain closeMain

Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages
  • A/B Testing
  • Personnalisation
  • Audiences

Premiers pas
Utiliser l'éditeur graphique
Paramétrer son test
Utiliser l'éditeur de code
Ciblage
Simuler son test
Gérer ses tests
Créer et gérer des objectifs
Widgets
Analyser ses résultats
Intégrations
Gérer son compte Kameleoon
API Kameleoon
Premiers pas
Étapes clés
Widgets
Configurer une personnalisation
Simuler sa personnalisation
Exemples de personnalisation
Analyser ses résultats
Intégrations
Gérer son compte Kameleoon
Insights
Segment

Derniers articles

Release notes

3

min

quiz

Vous trouverez ici les nouveautés produit et les principales mises à jour de Kameleoon. Janvier 2021 – Product update Execute Global Script before DOM ready Tout code JavaScript renseigné dans l’encart du Script personnalisé global est désormais exécuté avant les…

Vous trouverez ici les nouveautés produit et les principales mises à jour de Kameleoon.

Janvier 2021 – Product update

  • Execute Global Script before DOM ready

Tout code JavaScript renseigné dans l’encart du Script personnalisé global est désormais exécuté avant les expériences et personnalisations.

Cette mise à jour vous permet de mieux contrôler l’exécution de votre code personnalisé. Vous pouvez indiquer précisément le moment de son exécution en incluant du code. Il est désormais possible de lancer, avec plus de facilité et d’efficacité qu’auparavant, des expériences complexes dépendant de variables réutilisables, de conditions de ciblage et d’appels API.

Voici quelques exemples concrets d’utilisation :

  1. Tracking d’événements personnalisés tels que le mode de paiement utilisé par un visiteur
  2. Réutilisation des variables dans le cadre de plusieurs expériences
  3. Exécution d’un code personnalisé permettant de gérer les paramètres avancés des applications monopages
  4. Gestion des intégrations analytics personnalisées pour l’envoi des données de vos expériences
  5. Appel à une API pour récupérer les segments créés depuis une solution tierce et les utiliser dans vos personnalisations

 

Décembre 2020 – Product update

  • Valeurs des données personnalisées

Liez Kameleoon à vos outils tiers en utilisant notre nouvelle fonctionnalité « Valeurs de données personnalisées ». Vous pouvez attribuer un nom (appelé « key ») à chacune de vos valeurs à partir des paramètres avancés de la pop-in de création d’une nouvelle donnée personnalisée, puis les utiliser lorsque vous créez un segment.

 

Septembre 2020 – Product update

  • Une nouvelle interface pour les tests côté serveur

Vous pouvez maintenant créer et modifier entièrement vos tests côté serveur et vos tests hybrides dans l’éditeur de code. Cela rend l’ensemble du processus beaucoup plus fluide et vous permet de gagner du temps.

  • Nouvelle intégration: Mixpanel

En intégrant Mixpanel, vous pouvez observer l’impact de vos expériences Kameleoon sur la manière dont les utilisateurs interagissent avec vos sites ou applications.

  • Tableau de bord A/B : vue simplifiée

Sans les indicateurs de performance, votre tableau de bord A/B se charge beaucoup plus rapidement et vous gagnez un temps précieux.
Retrouvez vos indicateurs directement sur vos pages de résultats et ne retenez que les informations essentielles.

 

Juillet 2020 – Product update

  • Redesign de la pop-in “Outils de suivi & objectifs”

Vos objectifs Kameleoon et vos outils tiers sont maintenant séparés en deux onglets distincts, ce qui permet de les sélectionner plus facilement.

  • Amélioration de l’outil « Rechercher/Remplacer »

Vous voulez remplacer un texte dans l’une de vos variantes ? Vous pouvez désormais effectuer des modifications beaucoup plus précises. L’outil Rechercher/Remplacer fait désormais la distinction entre majuscules et minuscules, et vous pouvez choisir de ne remplacer que le mot entier.

  • Ouvrir une expérience dans l’éditeur de code

L’éditeur A/B se met automatiquement à jour chaque fois que vous ajoutez un nouvel objectif ou un nouveau segment depuis le back-office : plus besoin de rafraîchir la page !

  • Enregistrement manuel sur l’éditeur de code

Vous pouvez prendre le temps d’apporter vos modifications et elles ne seront appliquées qu’une fois que vous aurez cliqué sur le bouton « Mise à jour ».

  • Nouvelle intégration : Segment.io

Kameleoon est désormais compatible avec Segment.io.

  • Nouveauté sur la pop-in de création d’une donnée personnalisée

Le pop-in « Nouvelle donnée personnalisée » est désormais extensible pour plus de lisibilité. Vous pouvez également adapter la taille de la fenêtre d’insertion de code.

  • Condition de ciblage Géolocalisation

Pour les clients disposant du package A/B, une nouvelle condition de ciblage est disponible dans la pop-in de création d’un segment. La géolocalisation vous permet d’inclure ou d’exclure des visiteurs de votre trafic en fonction de leur pays, région ou ville.

  • Filtre/ventilation « Conversions »

Augmentez la précision de votre analyse des résultats grâce au filtre et à la ventilation par conversion. Cette option n’était auparavant disponible que pour les clients Personnalisation. Vous pouvez désormais analyser les données relatives à la conversion d’un objectif.

Vidéo – Découvrez l’éditeur de code

3

min

quiz

L’éditeur de code Kameleoon vous permet de modifier directement vos pages en quelques clics et de lancer vos tests A/B…

L’éditeur de code Kameleoon vous permet de modifier directement vos pages en quelques clics et de lancer vos tests A/B en injectant directement du code JavaScript ou CSS sur vos variantes. Découvrez ses principales fonctionnalités !

Créer et publier un test A/B avec l’éditeur de code

3

min

quiz

Bénéfices utilisateur Grâce à l’éditeur de code Kameleoon, vous pouvez créer, lancer et gérer des tests A/B sans passer par…

Bénéfices utilisateur

Grâce à l’éditeur de code Kameleoon, vous pouvez créer, lancer et gérer des tests A/B sans passer par l’éditeur graphique ! Injectez du code JavaScript ou CSS directement sur vos variantes et gagnez du temps.

Accéder à l’éditeur de code

Depuis le back-office ou le dashboard A/B

Cliquez sur “Nouveau projet” depuis le menu de gauche du back-office, ou sur “Nouveau test” depuis votre dashboard A/B : une pop-in s’ouvre et vous permet de choisir entre plusieurs types de test. L’option “Test A/B développeur” donne accès à l’éditeur de code.

Une fois l’option sélectionnée, la pop-in se transforme pour vous laisser nommer votre test et lui associer un site et l’URL d’une page. Cliquez ensuite sur “Créer” : l’éditeur de code A/B s’ouvre.

Depuis l’éditeur graphique

Vous pouvez ouvrir un test A/B développeur déjà créé en cliquant sur “Ouvrir un test existant”.

Pour ouvrir directement l’éditeur de code, cliquez sur le menu burger en haut à gauche > Configuration générale > Ouvrir l’éditeur de code

Structure de l’éditeur de code A/B

L’éditeur de code est composé d’un header et de 3 blocs.

 

  1. Header

  2. Bloc Test

  3. Bloc Variantes

  4. Bloc Finaliser

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, planifié, 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, planifié 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 et/ou CSS (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 le morceau 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.

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 ou CSS sera également injecté 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 développeur.

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 et/ou CSS sur les variantes de votre test A/B.

  • 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 et/ou CSS. Il s’appliquera à la variante sélectionnée. Le code est vérifié de la même manière que dans l’onglet « Test ».

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 ;

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

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 : 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.

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 développeur 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, planifié, 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.

Informations

Cliquez pour dérouler cet encart. Vous retrouvez le site auquel votre test A/B développeur est associé, ainsi que la date de création de votre test.

Identifiants

Cliquez pour dérouler cet encart. Vous retrouvez l’identifiant de votre test ainsi que les identifiants de chacune des variantes de votre test A/B développeur.

Boutons d’activation

Ces boutons deviennent actifs lorsque les 3 étapes de finalisation nécessaires ont été réalisées.

Planification

Vous pouvez planifier le lancement de votre test A/B développeur en définissant une date de début, une date de fin ou bien les deux.

Des options de planification avancée sont également à votre disposition.

Pour plus d’informations sur la planification

Mise en ligne

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

Une pop-in vous confirme 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, planifié ou en pause ;

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

Retrouver un test A/B développeur

Tag

Le tag “A/B développeur” est automatiquement associé à votre test créé à partir de l’éditeur de code.

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”. Ne s’afficheront alors que les tests créés via l’éditeur de code.

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.

Créer et lancer un test A/B server-side ou hybride

Vous pouvez également créer des tests 100% côté serveur ou hybride grâce à l’éditeur de code.

Retrouvez ici notre documentation sur les tests server-side

Retrouvez ici notre documentation sur les tests hybrides

  • linkedin facebook twitter instagram

  • Kameleoon
  • Release notes
  • Ressources
  • Blog
  • Contact
  • S’inscrire à la newsletter