Afficher la personnalisation dans le contenu d'une page

Lorsque vous créez une personnalisation, trois choix s’offrent à vous : afficher la personnalisation dans le contenu de votre page, par-dessus votre page ou via un email. Pour afficher votre personnalisation directement dans le contenu de vos pages, plusieurs options sont disponibles : à partir d’une image, à partir de l’éditeur graphique, à partir de HTML ou à partir de CSS/JavaScript.

Nous détaillerons dans cet article l’affichage d’une personnalisation dans le contenu de votre page. Pour voir comment afficher une personnalisation par-dessus votre page, rendez-vous sur l’article dédié

A partir d’une image

Kameleoon vous offre la possibilité d’importer une image, depuis votre ordinateur ou depuis Internet.

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 déjà sélectionnée, cliquez sur le bouton « Supprimer » qui apparait lorsque vous passez votre souris sur l’image.

Taille de l’image

Si l’image choisie est exactement à la taille souhaitée, cochez la case « Conforme à l’image source », l’image ne sera pas redimensionnée.

En revanche, si vous souhaitez redimensionner l’image, cochez la case « Redimensionner l’image source ». Les champs "Largeur de l'image" et "Hauteur de l'image" apparaîtront pour vous permettre de régler le format de l'image à votre guise.

Attention : les deux champs sont indépendants. Pour redimensionner une image homothétiquement, prenez garde à remplir correctement les deux champs.

 

Attention : si vous cochez la case « Redimensionner l’image source » sans en modifier les dimensions, la personnalisation ne s’activera pas.

Selecteur CSS de l’emplacement

Pour définir l’emplacement de votre image sur la page, vous devez indiquer un sélecteur CSS.

Pour créer un sélecteur CSS, vous pouvez demander de l’aide à votre développeur ou bien utiliser l’éditeur graphique Kameleoon. Pour plus d’informations, vous pouvez consulter nos articles Créer un nouveau sélecteur CSS (A/B Testing) et Exemples de sélecteurs CSS.

URL de redirection au clic

Si vous le souhaitez, vous pouvez ajouter un lien sur votre image. Pour cela, il suffit d’indiquer l'URL dans le champ correspondant.

L'URL que vous renseignez s'ouvrira dans une nouvelle fenêtre si le visiteur clique quelque part sur votre image. 

A partir de l’éditeur graphique

Il est également possible de créer une variante de votre page depuis l’éditeur graphique Kameleoon.

Créer une nouvelle variante avec l’éditeur graphique

Cette option sera disponible prochainement.

Pour vous tenir au courant de l’actualité de Kameleoon, consultez notre blog ou abonnez-vous à notre Newsletter !

Exposer une variante déjà existante

Si vous êtes également un client de l’A/B testing chez Kameleoon, vous pouvez utiliser des variantes créées dans le cadre de vos tests A/B pour votre personnalisation. Pour cela, sélectionnez simplement la variante que vous souhaitez utiliser dans la liste déroulante.

Si vous n’êtes pas client A/B testing et ne souhaitez pas faire d’A/B test, vous pouvez tout de même accéder à l’éditeur graphique et créer des variantes que vous pourrez utiliser uniquement pour vos personnalisations.

Si vous avez besoin d’aide avec l’éditeur Kameleoon, vous pouvez consulter notre guide Utiliser l'éditeur graphique.

A partir de HTML

Votre code HTML

Afin d'effectuer des modifications avancées sur votre page, il est possible d’ajouter directement du code HTML.

Sélecteur CSS

Pour définir l’emplacement de votre élément sur la page, vous devez indiquer un sélecteur CSS.

Pour créer un sélecteur CSS, vous pouvez demander de l’aide à votre développeur ou bien utiliser l’éditeur graphique Kameleoon. Pour plus d’informations, vous pouvez consulter nos articles Créer un nouveau sélecteur CSS (A/B Testing) et Exemples de sélecteurs CSS.

URL de redirection

Si vous le souhaitez, vous pouvez ajouter un lien sur votre élément. Pour cela, il suffit d’indiquer l'URL dans le champ correspondant.

L'URL que vous renseignez s'ouvrira dans une nouvelle fenêtre si le visiteur clique quelque part sur votre élément.

A partir de CSS / JAVASCRIPT

Si vous souhaitez créer une personnalisation plus complexe, il sera peut être nécessaire de modifier les pages de votre site Internet en profondeur.

Pour répondre à ce besoin vous pouvez, avec Kameleoon, ajouter du code CSS ou JavaScript directement dans le code HTML de votre page Internet. Cela vous permet de créer tout type de personnalisation.

A partir de CSS

Attention, votre feuille de style CSS actuelle pouvant se charger après les règles définies sur Kameleoon, il se peut que la règle CSS que vous ajoutez soit écrasée par celle existante sur votre site web. Il faudra donc positionner l'attribut "!important" sur les règles CSS de votre choix afin qu'elle surcharge bien celle existante sur votre site web. Par exemple :

div#button{background-color : red !important;}

A partir de JavaScript

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 utilisé. JQuery pouvant se charger après les règles définies sur Kameleoon, 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 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);
Vous avez d’autres questions ? Envoyer une demande
Réalisé par Zendesk