Utiliser l'éditeur graphique

L’éditeur graphique Kameleoon vous permet de faire des modifications directement sur votre site web.  Une fois votre compte Kameleoon créé et le script installé sur vos pages, vous pourrez lancer l’éditeur sur votre site 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 et les différents outils disponible dans l’éditeur Kameleoon.

Header

Une fois l’éditeur lancé sur votre site web, le header Kameleoon vient s’ajouter sur votre page web.

 

Ce header est composé de plusieurs parties

  • Nom du test
  • Ajout et édition de variantes
  • Lancement du test A/B
  • Choix de l’affichage et préférences

Création et sélection du test A/B

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

 

Cliquez sur le nom ou sur la flèche à sa droite pour ouvrir le gestionnaire de test.

Vous retrouverez ici l’historique des tests lancés avec Kameleoon.

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.

Cliquez sur le nom d’un test pour faire apparaître une nouvelle fenêtre contenant toutes les informations sur celui-ci.

Les informations principales sur le test sélectionné sont résumées ici. Utilisez les icones situées en bas à gauche de cette fenêtre pour dupliquer, mettre en pause, arrêter ou relancer un test.

Ajout et édition de variantes

Sous le nom du test en cours d’édition, 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 variante (autre que « Originale »), 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, ou encore prévisualiser, renommer dupliquer et supprimer votre variante.

Lancement du test A/B

Sur la droite du header, vous trouverez les boutons « Finaliser test » et « Reporting ».

Finaliser test

Le bouton « Finaliser test » permet, une fois vos variantes créées, d’ouvrir la fenêtre de finalisation afin de mettre votre test A/B en ligne sur votre site. 

La phase de finalisation se répartie sur trois parties :

1/ Choix des variantes : choisissez la ou les variantes à inclure dans le test en les sélectionnant. Attention, vous ne pouvez pas lancer de test si aucune variante n’est sélectionnée.

2/ Définition du ciblage et répartition du trafic : choisissez parmi vos visiteurs lesquels seront exposés au test. Par défaut, ce sont les visiteurs qui visitent la page sur laquelle vous avez créé votre test qui seront inclus dans celui-ci. Définissez également la déviation de trafic, c’est à dire le pourcentage de vos visiteurs qui verra votre ou vos variantes.

3/ Choix du système de suivi : le système de suivi est l’outil qui vous permettra d’analyser les résultats de votre test. Attention, vous ne pourrez pas lancer votre test si vous n’avez pas sélectionné au moins un outil de reporting. Pour plus d’informations sur le paramétrage des outils de reporting et des objectifs, veuillez consulter notre article à ce sujet.

Pour plus d'informations concernant le lancement de votre test A/B, merci de consulter la section à ce sujet dans notre Guide de démarrage rapide.

Reporting

Ce bouton vous permet d’accéder aux résultats de votre test, dans votre espace personnel. Cela n’est possible que pour les tests déjà lancés.

Choix de l'affichage et préférences

Mode de visualisation

Au-dessus des boutons de finalisation, est indiqué le mode d’affichage sélectionné :

  • Mode édition : les liens de votre site sont désactivés, vous êtes libres de faire les modifications de votre choix.
  • 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.

     

Cliquez sur le nom du mode de visualisation pour le modifier.

Préférences

En haut à droite du header, vous pourrez trouver les préférences.

  • Afficher les é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.
  • Afficher les éléments modifiés : en cochant cette case, vous ferez apparaître l’icône suivante sur chaque élément modifié.
  • Afficher les balises HTML : cochez cette case pour afficher les balises HTML dans l'outil de sélection.
  • Afficher le 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é.
  • Lancer l’éditeur sur le site mobile : si votre site a une version mobile, cliquez sur ce bouton pour relancer l’éditeur sur sa version mobile.
  • Sélecteur personnalisé : cliquez ici pour ouvrir la pop-in suivante. Cela vous permettra de créer un sélecteur CSS personnalisé.
  • Tableau de bord : cliquez sur ici pour ouvrir votre espace personnel dans un nouvel onglet.
  • Langue : cliquez ici pour ouvrir la pop-in de choix de la langue. Deux langues sont disponibles : le français ou l’anglais.
  • Documentation : cliquez ici pour ouvrir la documentation dans une nouvelle fenêtre.
  • Déconnexion : cliquez ici pour vous déconnecter de votre compte. Attention, cette action quittera l’éditeur.

Outil de sélection

Sélection simple

Pour sélectionner un élément, assurez-vous qu’il y ait bien écrit « Afficher les tracking » en haut à droite du header Kameleoon. Si vous êtes en « Mode navigation », cliquez une fois pour passer en mode tracking.

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.

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.

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.

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

  • Hierarchie : 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 :

 

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

Le 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 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 apparaitront 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éer-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.

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ée : vous pouvez les réactiver à tout moment. Si vous lancer 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é.

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