Utiliser l'éditeur graphique

L’éditeur graphique Kameleoon vous permet d’effectuer des modifications directement sur votre site web. Une fois votre compte Kameleoon créé et le script installé sur votre site, vous pourrez lancer l’éditeur sur vos pages simplement en appuyant sur les touches Maj + F2 sur un PC ou Maj + Fn + F2 sur un Mac. Pour plus d’informations sur la création du compte et l’installation du script Kameleoon, vous pouvez consulter notre section Premiers pas .

Cet article vous permettra d’explorer le mode d’utilisation des différents outils et fonctionnalités disponibles dans l’éditeur Kameleoon.

Header

Une fois l’éditeur lancé sur votre site web, le header Kameleoon apparaît en en-tête de votre page.

Ce header est composé de plusieurs parties. De gauche à droite :

  • Nom du test
  • Ajout, édition et recherche de variante
  • Boutons de choix de l’affichage
  • Finalisation du test A/B

Vous pouvez le masquer en cliquant simplement sur la flèche située sous le header.

Un clic sur la même flèche le déroulera à nouveau.

 

Création du test A/B et paramétrage de l’éditeur

En haut à gauche du header, apparaît le nom du test en cours d'édition.

Cliquez sur le à sa gauche pour ouvrir le gestionnaire de test.

Vous retrouverez ici :

  • Des informations sur le test en cours d’édition ;
  • Des tutoriels vidéos sur l’éditeur graphique ;
  • Des éléments de configuration générale ;
  • Tous les autres tests précédemment créés via Kameleoon ;
  • Un raccourci pour créer un nouveau test ;
  • La possibilité de vous déconnecter de l’interface Kameleoon.

Test en cours d’édition

Via ce menu, si vous le désirez, vous pouvez ajouter des tags, une description ; ajouter du code Javascript ou CSS sur l’ensemble des variantes du test ; ou encore changer l’URL de la page sur laquelle vous utilisez l’éditeur.

Tutoriels

Lorsque vous déroulez le panneau des tutoriels, plusieurs informations vous sont données sur ces derniers. Trois boxes vous renseignent sur le niveau de difficulté du tutoriel (une boxe illuminée = facile ; deux boxes illuminées = moyen ; trois boxes illuminées = difficile), sur la catégorie à laquelle il appartient et sur son statut (si vous l’avez déjà regardé ou non). Nous serions ravis de recueillir votre avis sur ces tutoriels : n’hésitez pas à réagir afin de nous aider à les améliorer.

Configuration générale

Ce menu comprend trois sous-menus, matérialisés par des pop-in : « Affichage », « Langue » et « Sélecteurs personnalisés ».

  • La pop-in « Affichage » permet de régler les paramètres d’affichage. Vous décidez alors des éléments que vous voulez voir apparaître sur votre éditeur. Vous pouvez ensuite mémoriser cet affichage pour le retrouver plus tard, en switchant le bouton sur « ON ».

          - Éléments trackés : En cochant cette case, vous ferez apparaître l’icône suivante sur chaque élément tracké. Cela vous permettra de les retrouver en un clin d’œil ou de vous assurer que le tracker a bien été mis en place. 

          - Éléments modifiés : En cochant cette case, vous ferez apparaître l’icône suivante sur chaque élément modifié.

          - Balises HTML : cochez cette case pour afficher les balises HTML dans l'outil de sélection.

          - Panneau de hiérarchie : cochez cette case pour afficher le panneau suivant en bas à gauche de votre page. Ce panneau vous permettra de sélectionner l’ID d’un élément que vous avez sélectionné.

          - Règles : Des graduations apparaissent dans l’éditeur afin de vous aider à placer les éléments sur votre page et à les redimensionner si nécessaire.

          - Récapitulatif du test avant les mises à jour : Avant toute mise à jour, cet écran vous permettra de contrôler que tout a bien été paramétré. Vous pouvez ensuite mémoriser cet affichage pour les sessions futures. Pour cela, switchez le bouton sur « ON ».

  • La pop-in « Langue » s'ouvre au clic sur le choix de la langue. Deux langues sont disponibles : le français, l’anglais et l’allemand.
  • La pop-in « Sélecteur personnalisé » vous permettra de créer un sélecteur CSS personnalisé pour sélectionner un ou plusieurs éléments de votre choix sur la page. Vous pouvez aussi retrouver ici les sélecteurs déjà créés.

Une fois les éléments qui vous intéressent sélectionnés, n’oubliez pas de valider pour appliquer les modifications.

Ouvrir les autres tests

Au clic sur « Ouvrir les autres tests », une pop-in de gestion des tests apparaît.

C’est ici que vous pourrez modifier le statut ou le nom d’un test existant, ouvrir un test dans l’éditeur ou encore créer un nouveau test.

Utilisez la barre de recherche pour trouver un test.

Il est possible de filtrer ou de trier les tests. Les filtres disponibles sont les suivants : le statut (en ligne, brouillon, en pause, arrêté, dévié ou planifié) ; le ou les tags que vous avez associé(s) à un test ; la dernière date de modification.

L’option de tri, quant à elle, propose de classer vos tests par date de modification, date de création ou nom (par ordre croissant ou décroissant).

Cliquez sur le nom d’un test pour faire apparaître le bloc de droite contenant les informations principales sur celui-ci. Utilisez les icônes situées sous le titre du test et son statut pour dupliquer ou supprimer le test. Vous pouvez également lancer, arrêter ou mettre en pause le test en cliquant sur la flèche à droite du statut :

Cette action n’est possible qu'une fois que le test est planifié ou mis en ligne.

Créer un nouveau test

Au clic sur « Créer un nouveau test », une pop-in de création apparaît. Vous devez attribuer un nom au test et, si vous le souhaitez, une description et des tags.

Validez grâce au bouton « Créer le test ». L’éditeur s’ouvre alors sur votre page.

Déconnexion

Cliquez ici pour vous déconnecter de votre compte. Attention, cette action quittera l’éditeur.

Ajout et édition de variantes

Sous le nom du test en cours d’édition se trouvent le statut du test ainsi que sa date de création ou de dernière sauvegarde.

Sur la droite, vous retrouverez la liste de vos variantes. Celle-ci comprendra toujours :

  • L’originale : qui correspond à la page originale de votre site. Cette page sert de référence à votre test, et vous ne pouvez ni la modifier ni la supprimer.
  • Au moins une variante : par défaut, une variante appelée « Variante 1 » est créée. Vous pouvez ajouter ou supprimer autant de variantes que vous le souhaitez, mais il est impératif qu’il y ait au moins une variante dans votre test.
  • Le bouton « + » : ce bouton vous permet de créer une nouvelle variante.

Si vous cliquez sur l’une de vos variantes (autre que « Original ») ou sur la flèche qui l’accompagne, une barre d’actions s’ouvrira sous le header, vous donnant accès à de nouvelles fonctionnalités.

 

Ici, vous pourrez ajouter un nouvel élément, comme une pop-in ou un paragraphe, du code CSS ou JavaScript, rediriger vers une URL, rechercher et remplacer un élément ou encore prévisualiser, renommer, dupliquer et supprimer votre variante.

Choix de l’affichage

Juste à gauche du bouton de finalisation, est indiqué le mode d’affichage sélectionné :

  • Mode édition : Les liens de votre site sont désactivés, vous êtes libre de faire les modifications de votre choix. L’icône est alors de couleur noire :
  • Mode navigation : À l’inverse du mode d'édition, le mode navigation ne vous permet pas de modifier des éléments, mais vous visualisez la votre page web telle quelle, sans quitter l’éditeur Kameleoon. L’icône est alors grisée après avoir été cliquée : 
  • Version mobile : Cette icône vous donne accès à une visualisation de la version mobile de votre site web (s’il y a lieu). Cliquez pour lancer l’affichage. 

Lancement du test A/B

Sur la droite du header, vous trouverez le bouton « Finaliser ».

Il permet, une fois vos variantes créées, d’ouvrir le menu de finalisation afin d'effectuer les étapes nécessaires à la mise en ligne de votre test sur votre site.

Simulation et estimation

Ce pictogramme permet de passer en mode simulation afin de visualiser le test. Vous pouvez consulter notre article à ce propos.

Il est également possible d’estimer la durée d’un test grâce au bouton . Pour ce faire, vous devez renseigner certaines informations :

  • Le trafic journalier sur votre site ;
  • Le taux de conversion de l’objectif mesuré (soit le taux de conversion actuel de l’objectif, qui sera utilisé comme référence) ;
  • L’indice de fiabilité requis (par défaut, il est de 70 %, mais vous pouvez modifier sa valeur) ;
  • Le taux d’amélioration requis.

[Si certains de ces termes vous laissent pantois, n’hésitez pas à consulter notre lexique afin d’en apprendre plus sur les données traitées par Kameleoon.]

Voici les champs à remplir :

Une fois cela fait, cliquez sur « Calculer » pour obtenir une estimation de la durée de votre test A/B.

Finalisation

La phase de finalisation se compose de trois parties :

  • Répartition du trafic
  • Définition du ciblage
  • Choix du système de suivi et des objectifs.

Pour comprendre comment finaliser votre test et le mettre en ligne, consultez notre article « Mettre en ligne un test ».

 

Outil de sélection

Sélection simple

Pour sélectionner un élément, assurez-vous que le mode édition est activé, en haut à droite du header Kameleoon. Si vous êtes en mode navigation, cliquez une fois pour passer en mode édition.

Lorsqu’aucun élément n’est sélectionné, passez la souris sur un élément pour afficher son identifiant ainsi qu’un cadre de sélection. L’élément qui sera sélectionné est recouvert d’une zone bleue. Une fois positionné sur l’élément de votre choix, il vous suffit alors de cliquer pour le sélectionner.

Une fois l’élément sélectionné, la zone bleue disparaît, et le cadre de sélection reste.

Si vous souhaitez que les balises HTML apparaissent, cochez la case « Afficher les balises HTML » dans les préférences d’affichage.

Affiner la sélection

Une fois l’élément sélectionné, le panneau suivant apparaît :

Si ce panneau vous gêne, par exemple s’il cache un élément, vous pouvez le glisser-déposer ailleurs sur votre page. Pour cela, cliquez n’importe où sur le panneau, déplacez-le à l’emplacement de votre choix avant de relâcher la souris.

La partie centrale de ce panneau indique quel est l’élément sélectionné ainsi que ses éléments parents. Si vous cliquez sur le nom d’un élément parent, celui-ci sera sélectionné à la place de la sélection en cours.

Dans l’exemple ci-dessus, « Elément de liste » est l’élément que nous avons sélectionné, « Liste » et « Bloc » ses éléments parents.

Notez que si vous souhaitez que les balises HTML apparaissent avant le nom des éléments, cochez la case « Afficher les balises HTML » dans les préférences d’affichage.

Pour afficher la liste complète des éléments parents et enfants, cliquez sur l’icône située à la gauche du panneau de sélection :

Une liste déroulante s’ouvre, dans laquelle vous retrouvez l’intégralité des éléments parents ou enfants. Scrollez vers le haut pour afficher les éléments enfants ou vers le bas pour afficher les éléments parents.

Note : Il peut arriver que vous rencontriez des difficultés à sélectionner un élément s'il est caché par un autre élément. Dans cette situation, utilisez cet outil pour le sélectionner.

Sélection multiple

Pour sélectionner plusieurs éléments, commencez par sélectionner l’un des éléments qui fera partie de votre sélection.

Une fois l’élément sélectionné et le panneau de sélection affiché, cliquez sur l’icône verte, à droite du panneau : 

Une liste s’ouvre, vous permettant d’affiner votre sélection.

Selon l’élément sélectionné, différentes fonctionnalités seront disponibles :

  • Hiérarchie : Il s'agit du sélecteur CSS par défaut. Kameleoon sélectionne l'élément par rapport à son positionnement hiérarchique sur la page (unique).
  • ID : Permet de sélectionner l'élément de manière unique par son identifiant sur la page.
  • Tag : Sélectionne tous les éléments de même type sur la page (balise HTML). Par exemple, tous les éléments h4.
  • Classe : Sélectionne tous les éléments sur la page partageant la même classe HTML.
  • Contenu : Sélectionne tous les éléments sur la page qui ont le même contenu. Par exemple pour sélectionner tous les boutons « Ajouter au panier ».
  • Custom : Sélectionne tous les éléments sur la page partageant le même sélecteur CSS personnalisé. Pour plus d’informations sur les sélecteurs CSS, vous pouvez consulter notre article sur la création de sélecteurs CSS .

Mode hover

Vous pouvez également réaliser des modifications sur le mode hover d'un élément, c'est à dire sur ce qu'il se passe lorsque l'utilisateur passe le curseur de la souris au-dessus de l'élément.

Pour cela, sélectionnez l'élément de votre choix tout en maintenant la touche Contrôle sur Windows ou la touche Commande sur un Mac.

Le mode hover de l'élément sera alors sélectionné afin de vous permettre de le modifier à votre guise. Un rectangle "HOVER" apparaît en bas à gauche de l'élément sélectionné.

Si l'élément sélectionné possède également un mode hover (comme dans le cas d'un menu et de son sous-menu par exemple), une pop-in apparaît afin de vous permettre de choisir le niveau de hover que vous souhaitez sélectionner :

Choisissez « Vue standard » pour rester sur le premier niveau du mode hover ou « Vue au survol » pour sélectionner le second niveau du mode hover.

Panneau d'outils

Lorsqu’un élément est sélectionné, un panneau apparaît sur la gauche de votre écran. Il regroupe les outils nécessaires à la modification de vos pages Internet.

Il s’agit d’un panneau contextuel : les outils affichés diffèrent donc selon l’élément sélectionné. Vous pouvez le déplacer n’importe où sur votre page en le glissant-déposant ou le réduire en cliquant sur les flèches situées en haut à gauche.

Trois onglets sont disponibles :

  • Style
  • Position
  • Tracking

Pour chaque onglet, les modifications les plus courantes et les plus probables vous seront présentées. Pour afficher l’intégralité des outils disponibles, cliquez sur le bouton « Plus d’options ».

Onglet Style

L'onglet « Style » permet de modifier ou ajouter des effets graphiques sur l'élément sélectionné. Faisons un tour d’horizon des différents outils disponibles

Masquer/Afficher l’élément

Cliquez sur cette icône pour masquer l’élément. Lorsque l’élément est masqué cliquez à nouveau sur l’icône, qui n’est plus rayée, pour afficher à nouveau l’élément.

Copier-coller l’élément

L'icône ci-dessus vous permet de copier l'élément. Une fois l'élément copié, les deux icônes de droite sont dégrisées. L'une vous permettra de « Copier avant » un autre élément, l'autre de « copier après » un autre élément.

Cliquez sur l'icône de votre choix, puis sélectionnez un élément de référence. Selon votre choix, l'élément sera collé avant ou après ce second élément.

Ajouter ou modifier le contenu et mise en page du texte

Lorsque vous sélectionnez du texte, la palette d’outils vous propose la partie « Caractère ». Double cliquez sur votre texte pour le modifier ou cliquez sur « Éditer contenu » pour éditer votre paragraphe dans une pop-in.

Ajouter ou modifier une URL

Cliquez sur « Éditer URL » pour modifier le lien de l’élément ou ajouter un nouveau lien.

Modifier le fond ou le contour de l’élément

Cliquez sur « Image », « Couleur » ou « Contour » pour ouvrir une pop-in et effectuer les modifications de votre choix.

  • Image :

  • Couleur :

  • Contour :

Modifier l’opacité de l’élément

Choisissez l’opacité de votre élément grâce à la jauge d’opacité. 0 % correspond à un élément transparent (donc masqué) et 100 % est un élément entièrement opaque.

Ajouter un effet d’ombre à l’élément

Vous pouvez ajouter à votre élément une ombre portée (externe), une ombre interne à ou les deux.

Attribut

Cliquer sur « Éditer l’attribut » pour ouvrir une pop-in et éditer l’attribut de l’élément sélectionné.

Onglet Position

L'onglet « Position » permet de modifier le format, les marges ou la position d’un élément sur votre page.

Déplacement

Différents modes de déplacement sont disponibles.

  • Placer devant/derrière : vous permet de placer l’élément sélectionné avant ou après un autre élément de votre choix.
  • Intervertir : permet d’intervertir deux éléments.
  • Insérer dans : permet d’insérer l’élément sélectionné dans l’élément de votre choix.
  • Glisser, fixer et extraire : permet de redimensionner et déplacer l’élément dans la page, en conservant sa place d’origine ou non.

Pour chacun de ses outils, une info-bulle vous permettra d’obtenir de plus amples informations sur sa fonction.

Dimensions

Cet outil vous permet de modifier les dimensions de l’élément sélectionné. Si les liens sont activés, les proportions de l’élément seront conservées.

Pour redimensionner l'élément, tapez la valeur de votre choix dans les champs « Largeur » et « Hauteur » ou cliquez sur « Redimensionnement manuel ».

Si vous optez pour le redimensionnement manuel, des repères apparaîtront sur l'élément sélectionné : cliquez sur l'un des repères et glissez-déposez le à l'endroit de votre choix pour redimensionner l'élément.

Si les liens sont activés dans le panneau d'outil, les proportions de l'élément seront conservées automatiquement.

Marges

Cet outil vous permet de modifier les marges, internes ou externes, de l’élément sélectionné. Activez les liens sur la droite afin d’attribuer automatiquement la même valeur à toutes les marges.

Z-index

La valeur du Z-index vous permet de définir quel élément sera situé au-dessus de l'autre. Par exemple, pour deux éléments qui se superposent, celui qui a un z-index de 1 sera placé au-dessus de celui qui a un z-index de 0.

Tracking

L'onglet « Tracking » permet d’ajouter ou de créer un tracking de clics sur l’élément sélectionné. Sélectionnez le nom du tracking dans le menu déroulant, ou créez-en un nouveau, puis cliquez sur « Tracker cet élément ».

Créer un nouveau tracking

Entrez le nom de votre tracking, puis cliquer sur le bouton « Tracker cet élément » pour créer votre tracking de click. Le tracking s'ajoutera automatiquement dans la partie « Associés à l'élément ».

Ajouter un tracking existant

Vous pouvez si vous le souhaitez ajouter un tracking déjà existant à votre élément. Pour ce faire, cliquez sur le lien « Ajouter un tracking » : la liste des trackings déjà créés s'affichera, vous permettant de sélectionner celui ou ceux de votre choix. Si cette partie ne s'affiche pas, cliquez sur « Plus d'options » en bas du panneau d'outils.

Trackings associés à l'élément

Chaque tracking associé à l'élément apparaîtra ici. Vous pouvez les renommer, les supprimer ou ne plus associer à l'élément.

Historique

Sur la droite de votre page, le panneau « Historique » vous permet de supprimer, désactiver et même renommer chaque action effectuée sur votre variante. Consultez notre article à ce sujet.

Vue simplifiée

La vue réduite se résume à deux flèches : l'une vous permet de revenir en arrière (annule la dernière action), l'autre de rétablir la dernière action annulée.

Les actions annulées ne sont pas supprimées mais simplement désactivées : vous pouvez les réactiver à tout moment. Si vous lancez un test alors que certaines actions ont été désactivées, celles-ci n'apparaîtront pas sur votre variante.

Historique par action

Cliquez sur le panneau pour l’ouvrir et afficher la liste des actions effectuées. En passant la souris sur une action, des icônes apparaissent et vous permettent de supprimer, désactiver ou renommer une action.

Historique par élément

Si vous souhaitez accéder à l'historique d'un élément en particulier, vous pouvez utiliser l'onglet « Par éléments ».

L'historique par élément fonctionne exactement comme l'historique classique mais regroupe les actions par élément modifié.

Voici tout ce qu'il y a à savoir sur notre éditeur graphique. Vous maîtrisez à présent pleinement cet outil et vous pouvez laisser libre cours à votre créativité !

via GIPHY

 

 

Vous avez d’autres questions ? Envoyer une demande
Réalisé par Zendesk