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 !

Depuis votre site Internet

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

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.

Depuis votre espace personnel 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!

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 :

• Style
• Position
• Tracking (de clic/de scroll)

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

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 :

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

Qu’est-ce qu’une variante ?

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.

Créer une nouvelle variante

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.

Ouvrir le menu de 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 (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.

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

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 :

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.
• Éléments enfants
• Éléments parents

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
• Un widget

Ajouter une image

Choisissez « Image », une pop-in s’ouvre dans laquelle vous allez pouvoir sélectionnez un fichier image. 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 ».

Ajouter un paragraphe de texte

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

Ajouter une pop-in

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 »).

Sélection de l’image

Pour sélectionner une image, tapez son URL dans le champ correspondant, ou bien importez un fichier depuis votre ordinateur.

Pour supprimer une image sélectionnée, cliquez sur le bouton « Supprimer » qui apparait lorsque vous passez votre souris sur l’image.

URL de redirection au clic

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.

Position de la pop-in dans la page

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é ».

Paramètres d’exposition

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.

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 !

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 !

Dans la 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.

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 un é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

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

Image

Couleur

Contour

Modifier l’opacité

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

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

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.

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.

Accéder à l’outil « tracking de scroll »

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

Paramétrer un 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 :

• Une partie supérieure affichée normalement et qui correspond à l’étendue de la page que le visiteur doit voir au scroll pour que l’objectif soit converti
• Une partie inférieure opacifiée qui correspond à l’étendue de la page exclue du tracking de scroll.

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.

D’après un élément

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.

D’après un pourcentage précis

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.

D’après une hauteur en pixels

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.

Finaliser le tracking de scroll

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.

Editer ou supprimer un tracking de scroll

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 :

• Renommer votre tracking
• Modifier le placement du niveau
• Ajouter un descriptif
• Lui attribuer une catégorie
• Lui attribuer une action

Le symbole de la poubelle vous permet de supprimer le tracking.

Définir le tracking de scroll comme objectif

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

La mise en place d’un tracking de clics s’effectue directement depuis l’éditeur graphique. Pour paramétrer un tracking de clics, lancez Kameleoon en mode édition sur la page de votre choix.

Créer un tracking de clics

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.

Créer un nouveau tracking

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.

Associer un tracking existant

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

Associer plusieurs trackings à un élément

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.

Modifier ou supprimer un tracking de clics

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.

Modifier le tracking

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.

Associer des sélecteurs CSS

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

Supprimer le tracking

Cliquez sur l’icône suivante pour supprimer le tracking : 

Cette action supprimera le tracking définitivement.

Ne plus associer le tracking à l’élément

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

Définir le tracking de clics comme objectif

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 !

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

Historique par action

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.

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.

Renommer

Cliquez sur cette icône si vous souhaitez renommer une action. Cela vous permettra par exemple de la reconnaitre plus facilement parmi les autres actions.

Activer/Désactiver

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.

Supprimer

Cliquez sur cette icône pour supprimer définitivement l’action.

Historique par élément

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 ou supprimer l’action.

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.

Menu de paramétrage

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 »

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

La pop-in « Langue »

Elle s’ouvre au clic sur le choix de la langue. Trois langues sont disponibles : le français, l’anglais et l’allemand.

La pop-in « Sélecteur personnalisé »

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.

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.

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.

Sur l’éditeur, 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. 

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.

Intérêt des sélecteurs CSS

La création d’un nouveau sélecteur CSS peut s’avérer indispensable dans différents cas de figure.

Sélection multiple d’un sous-ensemble d’éléments

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.

Problèmes techniques sur la page

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 :

• Il récupère les identifiants des menus, qui sont ici identiques.
• Il génère le code Javascript permettant de réaliser l’insertion, semblable à celui-ci :

  #(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.

Sélecteur hiérarchique non fiable

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.

Déterminer le sélecteur CSS

Repérer un identifiant et une classe

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 :

• Le type d’élément ou de balise HTML :
  div, table, h1, h2, h3, section, body, header, li, ul, etc.
• La classe CSS : positionnée en tant qu’attribut de l’élément class="myClass", permettant de récupérer dans la feuille de style CSS, un ensemble de paramètres (couleur, police, agencement, etc.) d’affichage.
• L’identifiant : positionné en tant qu’attribut de l’élément 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>

• Le type de l’élément est une balise h1, accessible par Kameleoon directement en tapant h1 dans la zone de saisie du sélecteur CSS.
• La classe CSS est 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.
• L’identifiant CSS est landing_header_6747. Pour accéder à cet élément avec un sélecteur, positionnez un # devant l’identifiant.

Exemples

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 5^e 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 16^e éléments de la page. De même le sélecteur span :nth-child(5) sélectionne l’élément span qui est le 5^e 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.

Création du sélecteur avec Kameleoon

Éditeur graphique

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

Caractéristiques du sélecteur Kameleoon

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 :

• 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. Ce sélecteur n’apparait que si vous avez ajouté un nouveau sélecteur CSS sur la page (détaillé ci-dessous).

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.

Ajouter du code sur une variante

Code CSS

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 !important sur les règles CSS de votre choix afin de vous assurer qu’elle surcharge la feuille de style de votre page web. Par exemple div#button{background-color : red !important;}

Ajouter du code JavaScript

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.runWhenConditionTrue(function(){
    return typeof jQuery != "undefined"; 
    //permet de vérifier que jQuery est chargé. Retourne True si c'est le cas, ou False dans le cas contraire. Kameleoon exécutera cette condition à nouveau toutes les 200ms.
	
}, function(){
    //Positionner ici le code que vous souhaitez exécuter dans votre variante.Par exemple si vous souhaitez changer le texte d'un bloc ayant pour identifiant HTML "bloc-2345", vous pouvez utiliser la fonction de l'API Kameleoon suivante
    Kameleoon.API.runWhenElementPresent("#bloc-2345", function(){
		
        //Positionner ici votre code JavaScript
        jQuery("#bloc-2345").text("Mon nouveau texte");
		
    }, 200);
	
}, 200);

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.

Ajouter du code sur toutes les variantes du test

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.

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.

Redirection d’URL simple

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

Redirection globale

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.

Redirection par paramètre

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) ».

Redirection d’URL avancée

Redirection d’URL sur plusieurs pages

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

Redirection d’URL vers un autre domaine

Pour lancer un test avec redirection d’URL vers un autre domaine, cliquez sur la petite flèche à droite du nom de la variante afin de faire apparaitre le menu d’actions associé à la variante. Cliquez alors sur le lien « Ajouter du JavaScript ».

Ajoutez ensuite la ligne suivante, en précisant l’URL (entre guillemets) qui redirige vers un autre nom de domaine :

Kameleoon.API.processRedirect(URL, true);

Lors d’un test avec redirection vers un autre nom de domaine, il est nécessaire de renseigner le paramètre true, permettant d’indiquer à Kameleoon qu’il s’agit d’une redirection vers une page située sur un autre domaine. Lorsque ce paramètre est égal à true, Kameleoon ajoutera en fin d’URL le paramètre :

kameleoonAVTE-XXX=YYY

avant de rediriger le visiteur vers la nouvelle page (AVTE signifiant AssignVariationToExperiment). XXX correspond à l’identifiant de l’expérience A/B dans laquelle se trouve le visiteur et YYY correspond à la variante choisie par le moteur Kameleoon. Kameleoon se sert de ce paramètre pour véhiculer l’information de « variante vue par le visiteur » à votre outil de web analytics.

En effet, la redirection du visiteur ayant lieu très tôt, avant même le chargement de la page et très souvent avant que l’appel à votre outil de web analytics ne soit effectué. Lorsque Kameleoon détecte ce paramètre, il effectue alors un appel à votre outil de web analytics permettant de remonter l’information du test et de la variante vue par le visiteur, informations qui sont nécessaires pour l’analyse des résultats du test A/B.