L’éditeur graphique Kameleoon vous permet de modifier directement vos pages en quelques clics et de réaliser des tests A/B ainsi que des personnalisations. Découvrez ses principales fonctionnalités !
3
min
quiz
L'éditeur graphique Kameleoon vous permet de modifier directement vos pages en quelques clics et de réaliser des tests A/B ainsi…
Pour démarrer Kameleoon, rendez-vous sur l’une des pages de votre site, sur laquelle Kameleoon est installé et appuyez sur Maj + F2 ou, pour les utilisateurs de Mac, Fn + Maj + F2.
Si rien ne se produit, vous pouvez utiliser une méthode alternative pour lancer Kameleoon. Ajoutez simplement le code suivant à la fin de l’URL de votre page :
#kameleoon=true
Par exemple, l’URL http://mozilla.org deviendra :
http://mozilla.org/#kameleoon=true
Après le chargement de Kameleoon, une fenêtre de connexion s’affiche. Saisissez alors le nom d’utilisateur et le mot de passe de votre compte Kameleoon pour accéder au mode édition.
Choisissez ensuite le type de test que vous souhaitez réaliser.
L’éditeur se lance et est visible en haut de la page Internet à partir de laquelle vous avez démarré Kameleoon.
Il vous est également possible de lancer un test depuis votre espace personnel.
Pour cela, rendez-vous dans votre dashboard A/B test et cliquez sur l’icône « Nouveau test » dans le header.
Après le chargement de Kameleoon, une fenêtre de connexion s’affiche. Saisissez alors le nom d’utilisateur et le mot de passe de votre compte Kameleoon pour accéder au mode édition. L’éditeur se lance et est visible en haut de la page Internet à partir de laquelle vous avez démarré Kameleoon.
Ces articles vous aideront à explorer comment utiliser les divers outils et fonctionnalités disponibles dans l’éditeur Kameleoon.
Pour avoir un aperçu des principales fonctionnalités de l’éditeur, lancez la vidéo!
3
min
quiz
Depuis votre site Internet Pour démarrer Kameleoon, rendez-vous sur l'une des pages de votre site, sur laquelle Kameleoon est installé et…
Dans l’éditeur, 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 :
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 ».
3
min
quiz
Dans l'éditeur, lorsqu’un élément est sélectionné, un panneau apparaît sur la gauche de votre écran. Il regroupe les outils nécessaires…
Dans l’éditeur graphique, 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 :
Une variante est une copie de votre page Internet sur laquelle vous avez la possibilité d’effectuer vos modifications en vue de préparer un test A/B.
Lorsque vous ajoutez une nouvelle variante, Kameleoon réalise une copie de la page originale, sur laquelle vous vous trouvez. Chaque modification apportée à votre page originale sera stockée dans la variation créée. Lors du lancement du test, c’est la variante qui contiendra tous les changements.
Note : Les variantes que vous créez ne sont pas liées à un test A/B et peuvent être réutilisées ultérieurement dans d’autres tests A/B, ainsi que dans le module de personalisation. Par ailleurs, les modifications contenues dans une variante ne sont pas forcément propres à une seule page. Par exemple, si vous souhaitez modifier la couleur de tous les boutons « Mise en panier » de votre site web, Kameleoon permet de le faire très simplement en ciblant les pages concernées lors de la finalisation du test. Pour en savoir plus, référez-vous à l’article Configurer un test multipages.
Au premier lancement de Kameleoon, vous constaterez la présence de deux onglets sur la partie gauche de l’interface, « Original » et « Variante 1 ».
Le premier onglet « Original » est verrouillé par un cadenas : il s’agit de la page originale de votre site à partir de laquelle vous avez lancé Kameleoon. Le cadenas est verrouillé afin d’empêcher toute modification de la page originale sur votre site Internet en production. Les modifications que vous souhaitez y apporter doivent être organisées en créant des variantes de cette page.
Le second onglet, sur lequel est écrit « Variante 1 » vous permet de créer une copie de votre page Internet afin d’effectuer des modifications.
Pour créer une nouvelle variante, cliquez sur le bouton « + ». Notez qu’il est recommandé de ne réaliser qu’une seule modification majeure par variante afin de mieux en évaluer l’impact.
Note : il est possible de créer un nombre illimité de variantes avec Kameleoon. Attention toutefois, plus vous aurez de variantes, plus votre trafic devra être important.
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 (pop-in, widget, image, 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.
3
min
quiz
Dans l'éditeur graphique, sous le nom du test en cours d’édition se trouvent le statut du test ainsi que sa…
L’outil de sélection vous permet de sélectionner un ou plusieurs éléments.
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.
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.
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.
Pour observer l’ensemble de ces actions en situation, n’hésitez pas à visionner notre vidéo :
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 :
3
min
quiz
L'outil de sélection vous permet de sélectionner un ou plusieurs éléments. Sélection simple Pour sélectionner un élément, assurez-vous que le…
En déroulant le menu de la variante, vous pouvez ajouter un élément en cliquant sur « Nouvel élément ».
Une pop-in vous propose alors plusieurs options :
Une image
Un paragraphe de texte
Une pop-in
Seuls les fichiers .jpeg, .png et .gif sont acceptés.
Choisissez l’option « Image” : une pop-in d’insertion d’images s’ouvre et vous donne le choix entre 3 types d’importation.
Cette option de téléchargement vous permet de choisir parmi les fichiers stockés sur votre ordinateur.
Une fois l’image sélectionnée, vous pouvez en changer 
Vous pouvez ensuite choisir de l’enregistrer ou non dans votre bibliothèque et de lui associer éventuellement un lien afin de rediriger vos visiteurs vers une page.
La deuxième option de téléchargement est l’ajout via une URL.
Entrez simplement l’URL et cliquez sur « Valider ».
Vous pouvez ensuite choisir de l’enregistrer ou non dans votre bibliothèque et de lui associer éventuellement un lien afin de rediriger vos visiteurs vers une page.
Si la bibliothèque contient au moins une image, au clic la bibliothèque s’ouvre et vous pouvez choisir une image.
Si la bibliothèque ne contient aucune image, l’icône est grisée et ne peut pas être cliquée.
Vous pouvez également accéder à votre bibliothèque depuis le menu 
Votre bibliothèque est constituée de différents éléments :
Une barre de recherche qui permet de n’afficher que les images dont le nom comporte le terme de recherche de votre choix ;
Un outil de tri permettant d’ordonner vos images par nom (ordre alphabétique ascendant ou descendant) ou par date d’ajout (croissante ou décroissante) ;
Des informations de stockage (nombre total d’images dans la bibliothèque ainsi qu’une bulle d’information indiquant le % de stockage utilisé, dans un maximum de 1 Go) ;
Les miniatures des images de votre bibliothèque (au survol de la souris, des options apparaissent) ;
Affichez l’image en taille réelle avec l’icône d’expansion, supprimez-la avec la corbeille ou renommez-la avec le crayon.
Une option d’ajout d’une image directement depuis la bibliothèque
Validez : l’image s’insère dans votre page. Modifiez son emplacement grâce à l’onglet « Position » du panneau d’outils. Vous pouvez également modifier l’image avec l’onglet « Style ».
Choisissez « Paragraphe », une pop-in s’ouvre dans laquelle vous allez pouvoir taper votre texte et le mettre en forme grâce à la barre de mise en forme intégrée. Cliquez ensuite sur « Valider » : le texte apparaît sur la page.
Via l’onglet « Position » du panneau d’outils, vous pouvez déplacer le texte sur la page. Celui-ci est modifiable à tout moment via l’onglet « Style ».
La pop-in est une fenêtre qui s’ouvre à l’intérieur de votre page web, par-dessus son contenu. Elle peut apparaître à l’ouverture de la page ou après un évènement (comme par exemple un clic sur le bouton « Ajouter au panier »).
Pour sélectionner une image, renseignez son URL, importez un fichier depuis votre ordinateur ou choisissez l’une des images de votre bibliothèque (si l’icône est grisée, cela signifie que vous n’avez pas encore chargé d’image dans votre bibliothèque).
L’icône “crayon” en haut à droite vous permet de changer d’image ; l’icône “corbeille”, de la supprimer.
Par défaut, la pop-in est située au centre de la page, mais vous pouvez choisir son emplacement en cliquant sur l’une des flèches du schéma. Vous pouvez également la déplacer par un simple drag and drop, ou encore régler sa position précisément sur l’axe des X (horizontal) ou des Y (vertical) en cliquant sur « Positionnement avancé ».
Si vous le souhaitez, vous pouvez ajouter un lien sur votre pop-in. Pour cela, il suffit d’indiquer le lien dans le champ correspondant.
L’URL que vous renseignez s’ouvrira dans une nouvelle fenêtre si le visiteur clique quelque part sur votre pop-in.
Glissez les boutons toggle sur « ON » pour limiter le nombre d’affichages de la pop-in au cours d’une même visite, ou les limiter pour un même visiteur, ou bien pour définir un temps d’attente minimal entre deux expositions.
Un menu se déroule pour chaque option, vous permettant de la configurer précisément.
Cliquez ensuite sur « Valider » : votre pop-in est ajoutée à votre page !
Vous pourrez ensuite la déplacer ou la modifier grâce aux onglets « Position » et « Style » du panneau d’outils.
3
min
quiz
En déroulant le menu de la variante, vous pouvez ajouter un élément en cliquant sur "Nouvel élément". Une pop-in vous…
Pour apprendre à cacher et révéler un élément sur l’éditeur graphique Kameleoon, lancez la vidéo explicative que nous vous avons concoctée pour vous !
3
min
quiz
Pour apprendre à cacher et révéler un élément sur l'éditeur graphique Kameleoon, lancez la vidéo explicative que nous vous avons…
Vous pouvez 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.
Lancez la vidéo pour des explications en situation !
3
min
quiz
Vous pouvez réaliser des modifications sur le mode hover d'un élément, c'est à dire sur ce qu'il se passe lorsque…
Dans le panneau d’outils de l’éditeur, 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.
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.
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.
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.
Si vous souhaitez accéder au code source (HTML) de votre élément, cliquez sur « Source » (en haut à gauche de la pop-in) et effectuez vos modifications.
Note : L’édition du code source d’un élément le rend entièrement statique car Kameleoon remplacera le code HTML de l’élément par celui que vous renseignez dans le pop-in. Ainsi, si l’élément contient des éléments dynamiques, ils seront écrasés par Kameleoon, ce qui les rendra complètement statiques. En règle générale, nous vous recommandons de n’utiliser cette fonction que si vous pensez que l’élément que vous souhaitez remplacer n’est pas trop large sur la page ou ne contient que du contenu statique. Dans le cas contraire, nous vous recommandons plutôt d’injecter vos modifications à l’aide de code JavaScript et/ou CSS.
Cliquez sur « Éditer URL » pour modifier le lien de l’élément ou ajouter un nouveau lien.
Cliquez sur « Image », « Couleur » ou « Contour » pour ouvrir une pop-in et effectuer les modifications de votre choix.
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.
Vous pouvez ajouter à votre élément une ombre portée (externe), une ombre interne à ou les deux.
Cliquer sur « Éditer l’attribut » pour ouvrir une pop-in et éditer l’attribut de l’élément sélectionné.
3
min
quiz
Dans le panneau d'outils de l'éditeur, l'onglet « Style » permet de modifier ou ajouter des effets graphiques sur l'élément…
Dans le panneau d’outils de l’éditeur, l’onglet « Style » permet de modifier ou ajouter des effets graphiques sur l’élément sélectionné.
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.
Si vous souhaitez accéder au code source (HTML) de votre élément, cliquez sur « Source » (en haut à gauche de la pop-in) et effectuez vos modifications.
Note : L’édition du code source d’un élément le rend entièrement statique car Kameleoon remplacera le code HTML de l’élément par celui que vous renseignez dans le pop-in. Ainsi, si l’élément contient des éléments dynamiques, ils seront écrasés par Kameleoon, ce qui les rendra complètement statiques. En règle générale, nous vous recommandons de n’utiliser cette fonction que si vous pensez que l’élément que vous souhaitez remplacer n’est pas trop large sur la page ou ne contient que du contenu statique. Dans le cas contraire, nous vous recommandons plutôt d’injecter vos modifications à l’aide de code JavaScript et/ou CSS.
3
min
quiz
Dans le panneau d'outils de l'éditeur, l'onglet « Style » permet de modifier ou ajouter des effets graphiques sur l'élément…
L’onglet « Position » permet de modifier le format, les marges ou la position d’un élément sur votre page.
Différents modes de déplacement sont disponibles.
Pour chacun de ses outils, une info-bulle vous permettra d’obtenir de plus amples informations sur sa fonction.
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.
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.
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.
3
min
quiz
L’onglet « Position » permet de modifier le format, les marges ou la position d’un élément sur votre page. Déplacement…
Le tracking de scroll vous permet de mesurer le taux de visiteurs ayant scrollé jusqu’à un niveau déterminé de votre page web. Vous pouvez le créer depuis l’éditeur graphique ou depuis le back-office Kameleoon.
Comme pour les trackings de clics, un tracking de scroll peut être créé depuis n’importe quelle variante. Une fois créé et associé à votre expérience, l’ensemble des variantes de votre test seront trackées. Vous pourrez aussi utiliser le tracking de scroll pour tous vos nouveaux tests.
Pour paramétrer un tracking de scroll depuis l’éditeur graphique, lancez Kameleoon en mode édition sur la page et la variante de votre choix.
Sélectionnez l’élément auquel vous souhaitez associer le tracking de scroll afin d’afficher le panneau d’outils. Le troisième onglet « tracking » vous permet de configurer les trackings.
Nommez votre tracking de scroll pour pouvoir l’identifier et dans le menu déroulant, sélectionnez « tracking de scroll ».
Lorsque vous sélectionnez « tracking de scroll », des options apparaissent dans le panneau d’outils. La page se voit également divisée en deux :
La délimitation entre les deux zones vous permet de visualiser précisément jusqu’à quel niveau de la page l’utilisateur doit scroller pour que l’objectif soit converti. L’objectif est converti une fois que l’intégralité de la zone non-opacifiée a été affichée. La conversion se fait donc à partir du moment où le niveau symbolisé par la ligne blanche apparaît au scroll en bas de l’écran.
Vous pouvez définir le niveau à atteindre de 3 manières différentes.
Par défaut, le niveau du tracking de scroll est défini en fonction de l’élément que vous avez sélectionné pour créer le tracking.
La barre de niveau se place directement en dessous de l’élément sélectionné. L’objectif ne sera alors converti qu’à partir du moment où le visiteur aura scrollé assez bas pour dévoiler l’élément dans son intégralité.
Le placement correspondant en pourcentage du niveau dans la page apparaît en grisé, vous ne pouvez pas le modifier.
En sélectionnant « un pourcentage précis » dans la liste déroulante, la modification du pourcentage devient possible.
Vous pouvez alors définir le placement du niveau du tracking de scroll en fonction d’un pourcentage.
Le pourcentage s’applique à l’ensemble de la page web et prend comme référence le haut de la page : 0% place le niveau tout en haut de la page, 50% le place à la moitié de la page et 100% place le niveau tout en bas de la page.
La représentation du niveau sur la page s’adapte automatiquement au pourcentage que vous saisissez.
Vous pouvez également déplacer manuellement le niveau du tracking de scroll.
Note : Le pourcentage prend en compte la page entière et pas seulement a partie de la page actuellement affichée sur votre écran.
Placez le pointeur de votre souris sur la barre blanche qui délimite la zone incluse dans le tracking. Un pointeur à double flèche apparaît alors. Maintenez le clic gauche et glissez le niveau là où vous le souhaitez dans la page. Le pourcentage correspondant s’affiche automatiquement dans le panneau d’outils.
En choisissant « une hauteur en pixels » dans le menu déroulant, vous pouvez définir le placement du niveau du tracking de scroll en fonction d’une hauteur en pixels.
Le placement d’après une hauteur en pixels fonctionne de la même manière que le placement d’après un pourcentage. Le point « zéro » se situe tout en haut de la page. Plus vous placez le niveau bas sur votre page, plus la hauteur en pixels sera grande. La hauteur maximale étant celle de votre page.
De la même manière que pour la mesure en pourcentage, vous pouvez déplacer manuellement le niveau sur la page en cliquant et glissant la barre blanche. La hauteur en pixels correspondante s’adapte automatiquement.
Une fois que vous avez placé le niveau dans la page à partir duquel le visiteur aura converti l’objectif, cliquez sur « ajouter le tracking ».
En ajoutant le tracking, celui-ci s’associe à l’élément si vous avez placé le niveau d’après un élément. Sinon, le tracking s’associe au “body” de la page. Le nom de votre tracking et son type (dans le cas présent « scroll ») s’affichent alors dans la liste des trackings associés à l’élément.
Pour paramétrer un tracking de scroll depuis le back-office et l’associer ensuite à une expérience, déroulez le menu « KPIs » et cliquez sur « Objectifs ».
En haut à droite de la page qui s’ouvre, cliquez sur le bouton « Nouvel objectif ».
Une pop-in de création apparaît. Choisissez le site web auquel vous voulez associer le tracking et sélectionnez le type « Tracking de scroll » dans le menu déroulant.
Nommez ensuite votre tracking et renseignez l’URL de la page de votre site afin d’en charger un aperçu. Cet aperçu vous permet d’indiquer la limite du tracking de scroll.
Si l’aperçu ne se charge pas, cela est probablement lié à l’existence d’une règle de sécurité sur votre site web, qui n’autorise pas le chargement de l’URL dans une iframe. Il faut dans ce cas modifier cette autorisation sur votre site.
Comme dans le panneau d’outils de l’éditeur graphique, vous pouvez définir l’emplacement du tracking de scroll à partir d’un pourcentage, d’une hauteur en pixels ou d’un élément.
Des réglages avancés vous permettent, si nécessaire, d’envoyer les données liées au tracking à un ou plusieurs outil(s) tiers, d’afficher cet objectif uniquement pour certaines expériences, ou d’utiliser l’objectif pour faire du machine learning. Validez ensuite vos options avancées pour les appliquer au tracking de scroll.
Une fois ces éléments paramétrés, vous pouvez créer votre tracking de scroll et l’utiliser en tant qu’objectif dans vos expériences !
En survolant le nom de votre tracking dans la liste des trackings associés à l’élément, les options apparaissent à la place du type de tracking.
Le symbole du crayon vous permet d’éditer le tracking. En cliquant sur le bouton d’édition, une popin s’ouvre avec les options d’édition.
Vous pouvez :
Le symbole de la poubelle vous permet de supprimer le tracking.
Déroulez le menu « KPIs » et cliquez sur « Objectifs ».
Retrouvez la carte dédiée au tracking de scroll. Au survol de la souris, des options apparaissent. Cliquez sur l’icône crayon pour éditer le tracking, ou sur l’icône poubelle pour le supprimer.
Si votre tracking est utilisé dans au moins l’une de vos expériences, une pop-in vous demandera de confirmer votre choix, car cela va évidemment avoir un impact sur vos résultats.
Une fois votre trackings de scroll créé, il vous suffit de le définir comme objectif pour remonter les résultats de ce tracking dans votre outil Kameleoon.
Pour ce faire, lors du lancement de votre test, sélectionnez « Kameleoon » comme système de suivi.
La liste des objectifs existants apparait : sélectionnez le tracking de scroll que vous avez préalablement créé.
Félicitations ! Vous pourrez ensuite retrouver vos résultats dans votre espace personnel !
3
min
quiz
Le tracking de scroll vous permet de mesurer le taux de visiteurs ayant scrollé jusqu’à un niveau déterminé de votre…
La mise en place d’un tracking de clics s’effectue directement depuis l’éditeur graphique, ou depuis le back-office.
Pour paramétrer un tracking de clics depuis l’éditeur graphique, lancez Kameleoon en mode édition sur la page de votre choix.
Le tracking de clics apparaitra sur toutes les variantes, la variante sélectionnée n’est donc pas importante. Une fois créé, vous pourrez utiliser le tracking de clic pour tous vos nouveaux tests.
Sélectionnez l’élément depuis lequel vous souhaitez tracker les clics de vos visiteurs afin d’afficher le panneau d’outil. Le troisième onglet, « Tracking » vous permet de configurer les trackings de clics.
Tapez simplement le nom que vous souhaitez donner à votre tracking, puis cliquer sur le bouton « Tracker cet élément ». Le tracking sera alors créé et automatiquement associé à l’élément sélectionné : ainsi, vous pourrez le retrouver dans vos objectifs lors du lancement de votre test.
Le tracking créé sera à présent disponible sur tous vos tests.
Pour paramétrer un tracking de clics depuis le back-office et l’associer ensuite à une expérience, déroulez le menu « KPIs » et cliquez sur « Objectifs ».
En haut à droite de la page qui s’ouvre, cliquez sur le bouton « Nouvel objectif ».
Une pop-in de création apparaît. Choisissez le site web auquel vous voulez associer le tracking et sélectionnez le type « Tracking de clics » dans le menu déroulant.
Nommez ensuite votre tracking et renseignez l’URL de la page de votre site afin d’en charger un aperçu. Cet aperçu vous permet d’indiquer l’emplacement du tracking de clics.
Note: Si votre site web est protégé contre l’affichage dans une iframe (le header X-Frame-Options est utilisé dans les paramètres du serveur), votre URL ne sera pas affichée dans cette pop-in et vous ne pourrez pas créer le tracking de clics. Vous devez modifier les paramètres de votre serveur et ajouter une exception pour le domaine et les sous-domaines kameleoon.com.
Vous pouvez également indiquer l’emplacement via un sélecteur CSS.
Des réglages avancés vous permettent, si nécessaire, d’envoyer les données liées au tracking à un ou plusieurs outil(s) tiers, d’afficher cet objectif uniquement pour certaines expériences, ou d’utiliser l’objectif pour faire du machine learning. Validez ensuite vos options avancées pour les appliquer au tracking de clics.
Une fois ces éléments paramétrés, vous pouvez créer votre tracking de scroll et l’utiliser en tant qu’objectif dans vos expériences !
Vous pouvez associer un tracker déjà créé à d’autres éléments. Cela peut s’avérer utile si, par exemple, un second bouton « Télécharger » est présent sur la page et que vous souhaitez tracker le nombre de clics total de ces deux boutons.
Pour cela, recherchez les trackers existants dans la zone de nom du trackers. En effet, cette zone qui vous a d’abord permis de nommer un nouveau tracking, fonctionne également comme une barre de recherche avec suggestion automatique.
Le terme que vous renseignez dans la zone de nom
vous permet de créer un nouveau tracking
et vous propose les tracking existants qui correspondent au terme que vous
avez renseigné.
Vous pouvez également associer plusieurs tracking à un seul et même élément, soit en créant un nouveau tracking, soit en lui associant un tracking existant.
Dans notre exemple du bouton « Télécharger », nous pouvons ainsi tracker les deux boutons sur la page ensemble, mais aussi séparément.
Ici, le tracking « Boutons téléchargement » est associé à deux éléments – les deux boutons de téléchargement, tandis que le tracking « Bouton téléchargement avec logo » n’est associé qu’à l’un des deux boutons. Nous allons donc pouvoir tracker le nombre de clics global ainsi que le nombre de clics sur chaque bouton.
Lorsqu’un tracking de clic est créé, vous pouvez le modifier à tout moment. Pour cela, rendez-vous dans la partie « Associés à cet élément » où figure la liste des trackings associés à l’élément sélectionné et passez le curseur de votre souris au-dessus du tracking de votre choix.
Cliquez sur l’icône d’édition afin de modifier le tracking : 
Une nouvelle pop-in apparaitra, vous permettant de modifier les différents paramètres du tracking de clic.
Cette pop-in vous permettra de changer le nom initialement donné au tracking, mais aussi d’y ajouter une description, une catégorie ou une action associée.
Pour visualiser, ajouter ou supprimer les sélecteurs CSS liés à votre tracking, cliquez sur cette icône : 
Dans le bloc qui s’ouvre, vous retrouvez l’élément auquel le tracking est associé. Pour ne plus l’associer, cliquez sur 
Vous pouvez également ajouter d’autres sélecteurs CSS au tracking en cliquant sur « ajouter sélecteur ».
Cliquez sur l’icône suivante pour supprimer le tracking : 
Cette action supprimera le tracking définitivement.
Si vous ne souhaitez plus associer le tracking à l’élément sans toutefois le supprimer définitivement, cliquez sur cette icône :
Vous pourrez ensuite l’associer à nouveau à l’élément si vous le souhaitez en cliquant sur le bouton « + Ajouter un tracking existant ».
Une fois vos trackings de clics créés, il vous suffit de les définir comme objectif pour remonter les résultats de ces trackings dans votre outil Kameleoon.
Lors du lancement de votre test, sélectionnez « Kameleoon » comme système de suivi.
La liste des objectifs que vous avez créés s’affiche : sélectionnez le tracking de clics que vous avez préalablement configuré.
Félicitations ! Vous pourrez ensuite retrouver vos résultats dans votre espace personnel !
3
min
quiz
La mise en place d'un tracking de clics s'effectue directement depuis l'éditeur graphique, ou depuis le back-office. Créer un tracking…
Par défaut, l’historique est affiché en vue simplifiée : deux flèches vous permettent d’annuler ou de rétablir les actions que vous avez réalisées.
Cliquez sur la flèche de gauche pour annuler la dernière action effectuée ou sur la flèche de droite pour rétablir l’action précédemment annulée.
S’il n’y a pas d’action à annuler ou à rétablir, les boutons peuvent être grisés.
Note : Les actions annulées ne sont pas supprimées mais désactivées, elles sont donc toujours visibles dans la liste des actions effectuées.
Important : L’historique fonctionne par variante. Le bouton « Annuler » annulera donc la dernière action effectuée sur la variante sélectionnée.
Depuis la vue simplifiée, cliquez sur les flèches situées en haut à droite de la fenêtre d’historique pour agrandir la fenêtre.
La liste des actions que vous avez effectuées sur votre variante s’affichent ici par ordre chronologique.
Passez le curseur de votre souris au-dessus d’une action : différentes icônes apparaissent.
Ces icônes vous permettent de renommer, désactiver ou supprimer votre action.
Cliquez sur cette icône si vous souhaitez renommer une action. Cela vous permettra par exemple de la reconnaître plus facilement parmi les autres actions.
Cliquez sur cette icône pour désactiver une action, ou ré-activer une action désactivée. L’action sera grisée dans la liste et n’apparaîtra pas sur votre variante.
Cliquez sur cette icône pour supprimer définitivement l’action.
L’onglet « Par élément » vous permet d’afficher l’historique de votre variante classé élément par élément.
Cliquez sur l’élément de votre choix pour afficher la liste des actions effectuées sur cet élément.
Vous pouvez effectuer les mêmes actions que dans l’historique classique : passez votre souris au-dessus d’une action pour afficher les icônes pour renommer, désactiver/activer ou supprimer l’action.
Vous avez également la possibilité d’agir sur plusieurs actions et/ou éléments à la fois. Par exemple, si vous souhaitez désactiver plusieurs actions liées à un même élément, cliquez sur le menu 
à droite de l’élément : un panneau se déroule.
Au clic sur l’action « Sélectionner », le panneau se transforme :
Des icônes d’action apparaissent dans la partie haute, ainsi que des checkboxes associées à chaque élément et à chaque action.
Vous pouvez :
Cliquez sur une checkbox pour sélectionner l’ensemble des actions, cliquez à nouveau pour tout désélectionner.
Selon vos choix, certaines checkboxes changent d’état :
Cochez ou décochez ces checkboxes pour appliquer une action groupée aux actions sélectionnées (ou à toutes les actions associées à un élément sélectionné :
La croix rouge située sur la droite permet de quitter le mode de sélection multiple.
3
min
quiz
Vue simplifiée Par défaut, l'historique est affiché en vue simplifiée : deux flèches vous permettent d'annuler ou de rétablir les…
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 :
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.
En haut à gauche du header, apparaît le nom du test en cours d’édition.
Cliquez sur le 
Vous retrouverez ici :
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.
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.
Ce menu comprend trois sous-menus, matérialisés par des pop-in : « Affichage », « Langue » et « Sélecteurs personnalisés ».
Elle 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 ».
Elle s’ouvre au clic sur le choix de la langue. Trois langues sont disponibles : le français, l’anglais et l’allemand.
Elle 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.
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 
Cette action n’est possible qu’une fois que le test est planifié ou mis en ligne.
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.
Cliquez ici pour vous déconnecter de votre compte. Attention, cette action quittera l’éditeur.
3
min
quiz
Une fois l’éditeur lancé sur votre site web, le header Kameleoon apparaît en en-tête de votre page. Ce header est…
Avant de mettre un test en ligne, nous vous recommandons de le simuler afin de vous assurer qu’il est conforme à vos besoins. Vous pouvez prévisualiser rapidement une variante ou bien simuler l’ensemble du test. Voici comment procéder.
Vous pouvez tester indépendamment chaque variante. Pour cela, cliquez sur la variante, ce qui déroule le menu d’actions qui lui est associé. Un clic sur « Prévisualiser » suffit à lancer la prévisualisation. Contrairement à la simulation, la prévisualisation ne vous permet pas de tester le ciblage de votre test.
Note : Le mode prévisualisation vous permet de valider rapidement l’affichage de votre variante. Cependant, il est toujours préférable de simuler votre test avant de le mettre en ligne afin de valider l’ensemble du périmètre de votre test.
3
min
quiz
Avant de mettre un test en ligne, nous vous recommandons de le simuler afin de vous assurer qu'il est conforme…
Sur l’éditeur, juste à gauche du bouton de finalisation, est indiqué le mode d’affichage sélectionné :
Vous souhaitez lancer un test sur la version mobile de votre site web ? Veuillez vous référer à notre documentation sur le sujet
3
min
quiz
Sur l'éditeur, juste à gauche du bouton de finalisation, est indiqué le mode d’affichage sélectionné : Mode édition : Les…
Il est souvent utile de pouvoir modifier un ensemble d’éléments partageant la même classe CSS sur une page. Cela permet par exemple de changer la couleur de tous les liens d’un menu ou encore d’augmenter la taille de police de tous les éléments faisant partie de la même classe CSS.
La création d’un nouveau sélecteur CSS peut s’avérer indispensable dans différents cas de figure.
Vous souhaitez pouvoir sélectionner ou identifier précisément plusieurs éléments partageant la même classe et sur lesquelles doivent être effectuées des modifications de style CSS.
Il arrive parfois que la page sur laquelle le test A/B a lieu présente des bugs, comme par exemple des identifiants HTML en doublon. Pour rappel, un élément HTML doit avoir un identifiant unique sur une même page HTML (i.e. non partagé avec d’autres éléments de la page). Si c’est le cas, Kameleoon ne peut pas effectuer correctement certaines modifications comme par exemple des interversions sur ces éléments.
En effet prenons le cas suivant : vous souhaitez insérer (et donc déplacer) un menu avant un autre. S’ils sont visuellement différents sur la page, ils possèdent cependant le même identifiant HTML. Lorsque Kameleoon réalise cette opération, il procède de la façon suivante :
#(identifiant_menu).insertBefore(#identifiant_menu)
Ce qui ne peut pas fonctionner, puisque le menu s’insérerait avant lui même. Afin de contourner ce problème, il suffit de créer un sélecteur CSS permettant à Kameleoon d’identifier de façon unique nos 2 éléments.
Si par exemple, vous souhaitez modifier la couleur de tous les liens h4 d’un menu, ce qui est très simple en utilisant le sélecteur par tag h4 proposé par Kameleoon, il est très simple de réaliser cette opération sans créer un nouveau sélecteur CSS.
Cependant si le test A/B est réalisé sur plusieurs pages, il est fort probable que nous ayons modifié tous les liens h4 de notre site Internet. Afin de contourner cette problématique, il est nécessaire de créer un nouveau sélecteur CSS permettant d’identifier de manière unique notre zone de liens h4 pour cette page.
En CSS, les éléments d’une page HTML peuvent posséder plusieurs attributs. Il est nécessaire de pouvoir identifier 3 d’entre eux afin de pouvoir utiliser toutes les fonctionnalités offertes par les sélecteurs CSS de Kameleoon :
div, table, h1, h2, h3, section, body, header, li, ul, etc.class="myClass", permettant de récupérer dans la feuille de style CSS, un ensemble de paramètres (couleur, police, agencement, etc.) d’affichage.id="myID", permettant d’identifier de manière unique, dans la page, l’élément séléctionné.Prenons par exemple l’élément HTML suivant :
<h1 class="landingHeader" id="landing_header_6747">Bienvenue</h1>
h1, accessible par Kameleoon directement en tapant h1 dans la zone de saisie du sélecteur CSS.landingHeader, accessible en positionnant un .devant le nom de la classe. Par exemple, tapez dans le sélecteur .landingHeader. Attention, plusieurs éléments peuvent partager la même classe. C’est souvent le cas pour les éléments de même type. Positionner .landingHeader indiquera à Kameleoon de récupérer tous les éléments partageant cette classe CSS.landing_header_6747. Pour accéder à cet élément avec un sélecteur, positionnez un # devant l’identifiant.Voici les principaux sélecteurs CSS qui pourront vous être utiles afin de sélectionner finement les éléments de votre choix sur votre page HTML. Notez que les sélecteurs ci-dessous sont cumulables entre eux.
#identifiant : Le sélecteur d’ID permet de cibler un élément HTML par son identifiant..classe : À la différence du sélecteur d’ID, le sélecteur de classe permet de sélectionner plusieurs éléments HTML, partageant la même classe CSS.A : Ce sélecteur sélectionnera tous les éléments de type A. Par exemple, le sélecteur a permettra de sélectionner tous les liens HTML de type A de la page.A B : Ce sélecteur permet de cibler tous les éléments B inclus dans l’élément A. Par exemple, le sélecteur ul sélectionnera tous les liens HTML de type A inclus dans un élément de type liste ul.A + B : Ce sélecteur permet de sélectionner le premier élément B qui est immédiatement précédé par un élément A. Par exemple, le sélecteur ul + p permet de sélectionner le premier paragraphe qui suit une liste ul.A > B : Ce sélecteur permet de sélectionner uniquement les descendants directs de type B inclus dans l’élément A. Par exemple le sélecteur #identifiant > ul permettra de sélectionner tous les éléments ul descendants de l’élément ayant pour ID « identifiant ». En revanche si d’autres éléments ul étaient définis dans les éléments ul de premier niveau, ceux-ci ne seraient pas récupérés par notre sélecteur. Pour pouvoir les sélectionner, il faudrait utiliser un sélecteur de type A B.A:nth-of-type(n) : Ce sélecteur permet de sélectionner le énième élément de type A sur la page. Par exemple le sélecteur div:nth-of-type(5) permettra de sélectionner la 5e division de la page.A:nth-child(n+nb) : Ce sélecteur permet de sélectionner tous les éléments de type A à partir du énième élément. Par exemple le sélecteur li:nth-child(n+16) permettra de sélectionner tous les éléments enfants de type li à partir du 16e éléments de la page. De même le sélecteur span :nth-child(5) sélectionne l’élément span qui est le 5e enfant de son élément parent.A:first-child : Permet de sélectionner le premier enfant de l’élément A.A:last-child : Permet de sélectionner le dernier enfant de l’élément A.Pour davantage d’exemples de sélecteurs CSS et de leur utilisation, consultez le guide CSS Selector Reference de W3Schools.
Pour créer un nouveau sélecteur CSS depuis l’éditeur Kameleoon, identifiez et sélectionnez l’élément parent de la page qui contient les éléments que vous souhaitez sélectionner et récupérez son identifiant grâce au panneau de hiérarchie.
Dans le menu 
situé dans le header, juste à gauche du titre de votre test, cliquez sur « Configuration générale » puis sur « Affichage ». Cochez ensuite « Panneau de hiérarchie ».
Le panneau suivant apparaît alors en bas à gauche de votre page. Il vous permet de déterminer le chemin de l’élément sélectionné.
Dans le menu précédent, cliquez sur « Sélecteurs personnalisés ».
Créez ensuite le sélecteur CSS de votre choix.
Une fois votre sélecteur CSS créé, vous serez en mesure de le sélectionner dans la partie « CUSTOM ».
Pour voir le sélecteur CSS utilisé par défaut en bas à gauche de la page, cochez la case « Panneau de hiérarchie » dans les paramètres d’affichage.
Ce panneau vous indique le chemin CSS de l’objet sélectionné sur la page.
En cliquant sur l’icône verte de la barre de sélection, vous avez accès aux fonctionnalités avancées de sélection multiple pour l’élément :
3
min
quiz
Il est souvent utile de pouvoir modifier un ensemble d’éléments partageant la même classe CSS sur une page. Cela permet…
Il arrive parfois que les fonctionnalités d’édition graphique proposées par l’éditeur Kameleoon ne suffisent pas lors de cas complexes d’A/B testing où il est nécessaire de modifier profondément les pages de votre site Internet.
Pour répondre à ce besoin, Kameleoon permet d’ajouter du code CSS ou JavaScript directement dans le code HTML de votre page Internet vous permettant de créer tout type de tests.
Pour ajouter du code CSS, cliquez sur le nom de la variante sur laquelle vous souhaitez faire votre changement pour afficher les actions disponibles.
Cliquez ensuite sur « CSS » pour faire apparaître la pop-in qui vous permettra d’injecter votre code.
Vous pouvez agrandir la fenêtre afin d’avoir plus d’espace dans le champ de code. Pour cela, cliquez sur l’icône « Agrandir » en haut à droite ou agrippez le coin en bas à droite de la pop-in pour régler la taille de celle-ci à votre guise.
Une fois votre code tapé ou collé dans la pop-in, appuyez sur le bouton « Valider ».
L’icône du bouton « CSS » dans la barre d’actions devient verte.
Attention : Il se peut que Kameleoon se charge avant votre feuille de style CSS, la règle CSS existante risque donc d’écraser celle que vous ajoutez. Pour éviter ce problème, positionnez l’attribut
!importantsur les règles CSS de votre choix afin de vous assurer qu’elle surcharge la feuille de style de votre page web. Par exemplediv#button{background-color : red !important;}
Pour ajouter du JavaScript, cliquez sur le nom de la variante de votre choix pour afficher les actions disponibles.
Cliquez ensuite sur « JavaScript » pour faire apparaître la pop-in qui vous permettra d’injecter votre code.
Vous pouvez agrandir la fenêtre afin d’avoir plus d’espace dans le champ de code. Pour cela, cliquez sur l’icône « Agrandir » en haut à droite ou agrippez le coin en bas à droite de la pop-in pour régler la taille de celle-ci à votre guise.
Une fois votre code tapé ou collé dans la pop-in, appuyez sur le bouton « Valider ».
L’icône du bouton « JavaScript » dans la barre d’action devient verte.
Kameleoon met également à disposition une API et des fonctions que nous vous recommandons vivement d’utiliser lors de l’écriture de votre code JavaScript. À noter que Kameleoon n’embarquant pas jQuery, c’est celui chargé sur votre site web qui sera donc utilisé. Kameleoon chargeant potentiellement avant jQuery sur votre site web, il est cependant nécessaire d’attendre que jQuery soit chargé avant de pouvoir l’utiliser dans le code JavaScript de votre variante. Pour ce faire vous pouvez utiliser ce fragment de code :
Kameleoon.API.Core.runWhenConditionTrue(function(){
return typeof jQuery != "undefined";
//allows to check that jQuery is loaded. Returns True if it is, or False otherwise. Kameleoon will execute this condition again every 200ms.
}, function(){
//Enter here the code you want to execute in your variation. For example if you want to change the text of a block and this block has the id "block-2345", you can use the following Kameleoon API function
Kameleoon.API.Core.runWhenElementPresent("#bloc-2345", function(){
//Enter here your JavaScript code
jQuery("#bloc-2345").text("My new text");
});
}, 200);
Si vous souhaitez davantage d’informations sur Kameleoon.API.Core, vous pouvez consulter notre documentation à destination des développeurs :
Note : Le code JavaScript ne s’exécute pas directement dans l’éditeur. Pour visualiser vos modifications, simulez votre test ou utilisez la fonction « Prévisualiser » pour la variante modifiée.
Il est également possible d’ajouter du code CSS ou JavaScript qui s’appliquera à toutes les variantes d’un test.
Pour cela, cliquez sur le menu 
situé à gauche du nom de votre test, puis sur « Test en cours d’édition » et enfin « Code spécifique au test ».
Une pop-in s’ouvre, vous permettant d’ajouter du code CSS, JavaScript ou les deux.
Vous pouvez agrandir la fenêtre afin d’avoir plus d’espace dans le champ de code. Pour cela, cliquez sur l’icône « Agrandir » en haut à droite ou agrippez le coin en bas à droite de la pop-in pour régler la taille de celle-ci à votre guise.
Vous pouvez également appliquer ces changements à votre page originale. Pour cela, cochez la case « Ajouter également le code JavaScript et CSS sur l’originale ».
Attention : Les modifications faites sur l’originale ne le seront que dans le cadre de ce test. Les visiteurs exclus du test ne verront pas la version originale modifiée.
Si vous souhaitez davantage d’informations sur Kameleoon.API.Core, vous pouvez consulter notre documentation à destination des développeurs :
3
min
quiz
Il arrive parfois que les fonctionnalités d'édition graphique proposées par l'éditeur Kameleoon ne suffisent pas lors de cas complexes d'A/B…
Contrairement à un test A/B classique, lors d’un test A/B avec redirection d’URL, les différentes versions de la page à tester sont développées et hébergées sur votre serveur web. Les différentes versions cette page sont donc directement accessibles depuis votre site Internet par un utilisateur donné.
Si par exemple vous avez deux pages d’inscription que vous souhaitez tester, dont les URLs respectives sont :
http://monsite.com/InscriptionA.html http://monsite.com/InscriptionB.html
Ces deux pages sont donc accessibles depuis votre site Internet. Kameleoon va pouvoir vous permettre de tester ces deux pages via un test A/B afin d’analyser les résultats et performances de chacune.
Lancez l’éditeur Kameleoon sur votre site Internet comme pour un test A/B classique. Ajoutez autant de variantes que de pages que vous souhaitez tester.
Par conséquent, si vous avez développé deux pages d’inscription, vous devez créer deux variantes.
Cliquez sur l’une de vos variantes pour faire apparaître le menu d’actions qui lui est associé. Cliquez ensuite sur le bouton « Rediriger vers une URL ».
C’est dans la fenêtre qui s’affiche que vous devrez paramétrer la redirection d’URL pour la variante concernée. Il existe deux types de redirections : « Redirection globale » et « Redirection par paramètre ».
La redirection globale est une redirection d’URL simple, sans paramètre supplémentaire.
Dans le cadre de l’exemple ci-dessus, pour les deux versions de la page d’inscription, c’est cette redirection qu’il faut choisir.
L’URL à indiquer doit être complète (et non simplement un fragment d’URL). Par exemple, vous pouvez indiquer une redirection globale de « http://www.website/page1 » vers « http://www.website/page2 ».
Dans le cas d’une redirection vers la même URL mais avec des paramètres supplémentaires en fin d’URL, utilisez l’option « Redirection par paramètre ».
Indiquez ici les paramètres à ajouter en fin d’URL. Cela vous permet par exemple de tester sur des pages de résultats de produits d’autres options de tri par défaut.
Répétez l’opération pour chacune des variantes à tester en indiquant à chaque fois l’URL de la nouvelle page que les utilisateurs doivent visualiser à la place de la page originale.
Attention : Dans le cadre d’un test avec redirection d’URL, il est important de correctement définir un ciblage pour votre test. Notez qu’il est vivement déconseillé d’utiliser l’option de ciblage « Présence d’un élément sur la page » car cela augmenterait considérablement la présence de flickering sur votre test. En effet, Kameleoon serait obligé d’attendre le chargement de la page pour vérifier la présence de l’élément ciblé, avant de rediriger les visiteurs vers votre variante ou non. Il est donc conseillé d’utiliser les autres options de ciblages (par URL ou une condition JavaScript avancée) pour ce type de test. De même, si du code JavaScript est utilisé pour les cas de redirection complexe, il est conseiller de décocher la case « Charger ce code JavaScript après le chargement de la page (au DOMReady) ». Il n’est pas non plus nécessaire d’indiquer dans le ciblage que les deux pages (A et B) sont concernées : mentionner la page A suffit.
Lorsqu’un test A/B avec redirection d’URL est effectué sur plusieurs pages (sur toutes les fiches produits par exemple), les fonctionnalités disponibles dans la fenêtre de redirection par URL ci-dessus ne sont souvent pas suffisantes pour gérer tous les cas. Il est souvent nécessaire de gérer la redirection avec un code JavaScript personnalisé.
Par exemple, nous souhaitons rediriger tous les visiteurs qui accèdent aux pages :
http://monsite.com/produit/fiche/technologie,produit,identifiant.aspx
vers les pages :
http://monsite.com/produit_AB/fiche/technologie,produit,identifiant.aspx
avec les paramètres technologie, produit et identifiant qui varient en fonction de la fiche produit visualisée sur le site. Pour pouvoir réaliser ce test, il est nécessaire d’écrire du code JavaScript afin de pouvoir prendre en compte tous les cas de redirection possibles. Un exemple est fourni ci-dessous :
var url = window.location.href;
var redirect_url = url.replace("/produit/", "/product_AB/");
Kameleoon.API.Core.processRedirect(redirect_url);
Une fois le code JavaScript écrit, il faudra veiller à correctement définir le ciblage de ce test et de le limiter uniquement aux URLs contenant le fragment suivant en utilisant pour cela un ciblage par URL :
http://monsite.com/produit/fiche/
Note : La possibilité de lancer un test avec redirection d’URL sur plusieurs pages suppose que les éléments identifiants de vos pages ne sont pas gérés en tant que paramètres, mais directement dans l’URL. Par exemple, il ne s’agira pas d’une page de type
categorie.php?produit=mais d’une URL de type/categorie/produit.html.
N’hésitez pas à consulter notre documentation développeur sur la redirection d’URL
Lorsque Kameleoon effectue la redirection, les données doivent être stockées sur le navigateur du visiteur afin d’identifier correctement le visiteur lorsqu’il arrive sur l’URL B.
Cependant, comme aucun stockage de données n’est autorisé avant que le consentement n’ait été donné, Kameleoon ne pourra pas enregistrer l’identifiant de la variante et effectuer le suivi.
Pour contourner ce problème, vous pouvez choisir de n’activer la redirection que pour les visiteurs ayant déjà donné leur consentement. Pour ce faire, vous pouvez utiliser cette condition de ciblage JS :
return Kameleoon.API.Visitor.experimentLegalConsent || false ;
3
min
quiz
Contrairement à un test A/B classique, lors d'un test A/B avec redirection d'URL, les différentes versions de la page à tester…
Vous pouvez modifier plusieurs éléments de votre page via l’éditeur graphique. Cependant, la règle suivante doit être respectée :
Lorsque vous modifiez un élément sur l’éditeur graphique, commencez toujours par modifier l’élément parent.
En effet, si vous modifiez un élément enfant, puis l’un de ses parents, la première modification est susceptible d’être écrasée par la seconde : l’arborescence doit donc être respectée.
Pour vous assurer de bien respecter la hiérarchie des éléments lors de vos modifications, deux méthodes existent et peuvent être utilisées de manière complémentaire :
Sur l’éditeur graphique, cliquez sur l’un des éléments de votre page. Un outil de sélection hiérarchique apparaît et vous permet de naviguer entre les éléments parents en enfants.
Dans l’exemple ci-dessus, l’élément « Titre 2 » est contenu dans l’élément « Bloc », qui est lui-même contenu dans l’élément « Section ». Autrement dit, ce titre a pour parent « Bloc », qui est enfant de « Section ». Il est possible de remonter encore dans la suite hiérarchique en cliquant sur <…>.
Si vous effectuez une modification sur « Titre 2 » (changer sa couleur, par exemple), puis sur l’élément « Section » (changer ses dimensions), la modification sur « Titre 2 » ne sera pas prise en compte : elle a été écrasée par l’édition de son élément parent.
Lorsque vous planifiez plusieurs opérations d’édition, commencez par l’élément le plus important hiérarchiquement. Par exemple, modifiez la section, puis le bloc, puis le titre.
L’onglet « Par élément » du panneau Historique situé à droite de l’éditeur graphique vous permet de visualiser vos modifications par élément et de vous assurer qu’elles ont bien toutes été prises en compte. Si une action d’édition est rendue impossible par une autre, elle n’apparaîtra pas dans l’historique.
Ce panneau vous permet également de sélectionner une action spécifique afin de la désactiver ou de la supprimer et ainsi de respecter la hiérarchie des modifications.
3
min
quiz
Règle générale Vous pouvez modifier plusieurs éléments de votre page via l'éditeur graphique. Cependant, la règle suivante doit être respectée…
