Ajouter du CSS et du JavaScript

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'action 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. A 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 executera 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 la roue située à gauche du nom de votre 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. 
Vous avez d’autres questions ? Envoyer une demande
Réalisé par Zendesk