Création d'une bannière adaptée à la météo

Nous souhaitons, dans le cadre du site « Mozilla Gear », modifier la bannière d'accueil d'après la météo.

Le visiteur verra cette bannière lorsqu'il fait beau chez lui :

Et celle-ci lorsqu'il y a du mauvais temps :

Pour réaliser cela, il nous faudra créer deux personnalisations : une pour chaque bannière. Nous les appellerons personnalisation A (bannière beau temps) et personnalisation B (bannière mauvais temps).

Création du segment

Accéder au Segment Builder

Pour créer votre segment, rendez-vous sur la page « Sites configurés ».

Pour le site de votre choix, cliquez sur « X segment(s) paramétré(s) ».

Cliquez ensuite sur « Ajouter un segment » pour créer un nouveau segment.

Choix et paramétrage des conditions

Deux conditions vont nous intéresser ici :

  • Dans la partie « Pages visitées » : la condition « URL de la page » va nous permettre de cibler la page sur laquelle nous voulons faire la personnalisation
  • Dans la partie « Contexte externe à la visite », la condition « Météo » va nous permettre de cibler selon les critères météo.

Pour notre personnalisation A (beau temps), nous allons créer un segment permettant de cibler les visiteurs sur une page précise, lorsque le ciel est dégagé ou la température clémente.

Enregistrez votre segment en cliquant sur le bouton « valider ».

Utilisez ensuite les mêmes critères afin de créer le segment de la personnalisation B (mauvais temps). Seule différence : choisissez cette fois les mauvaises conditions météo : pluie, vent, froid.

Création de l'objectif

Accéder aux objectifs

Pour créer votre objectif, rendez-vous sur la page « Sites configurés ».

Dans la partie « Reporting », cliquez sur « Kameleoon ». Si l’outil de reporting Kameleoon n’est pas installé, cliquez sur « Ajouter un outil de reporting ».

Cliquez ensuite sur « Ajouter un objectif Kameleoon » pour ajouter votre objectif.

Paramétrage de l'objectif

Dans cet exemple,l'objectif est que le visiteur ajoute des produits à son panier.

Il faut donc créer un « Objectif personnalisé », pour lequel une fonction JavaScript déterminera la conversion.

Cliquez ensuite sur le bouton  « Valider » pour enregistrer votre objectif.

Création de la personnalisation

Deux personnalisations doivent être créées : l'une pour la bannière « Beau temps » et l'autre pour la bannière « mauvais temps ». Le segment et l'image diffèrent pour chaque personnalisation, mais les autres critères sont identiques.

Commençons donc par créer la personnalisation « Beau temps ». 

Dans votre back office, cliquez sur le bouton « Nouvelle personnalisation » sur la page d'accueil ou sur la page « Vue d'ensemble » de vos personnalisations.

Nom et site web

Une pop-in s'ouvre, vous permettant de choisir le site web sur lequel vous souhaitez lancer votre personnalisation, ainsi que le nom de votre personnalisation.

Segment exposé

Dans la partie « Segment exposé à la personnalisation », cliquez sur « Choisir un segment existant » pour sélectionner le segment que vous avez créé.

Une pop-in s'ouvre, vous permettant de choisir votre segment.

Où afficher la personnalisation ?

Dans cet exemple, nous souhaitons remplacer une image qui est déjà dans la page. Il faut donc créer notre personnalisation « Dans le contenu de la page ».

Ici, le contenu est est modifié à partir d’une image que nous importée depuis un ordinateur. Sélectionnez donc « A partir d'une image », puis cliquez sur le bouton « Parcourir sur votre ordinateur » pour rechercher et ajouter l’image.

Une fois l'image importée, vous pouvez la redimensionner ou non. Dans notre cas, l'image est déjà au bon format, nous choisissons donc de la laisser telle quelle en laisant cochée la case « Conforme à l'image source ».

Renseignez ensuite le sélecteur CSS qui va déterminer l'emplacement de l'image sur la page, ainsi que l'URL vers laquelle sera dirigé le visiteur s'il clique sur la bannière.

Note : si vous rencontrez des diffulté à détrminer le sélecteur CSS approprié, vous pouvez vous aider de l'éditeur d'A/B testing. Sélectionnez l'élément de votre choix et retrouvez son sélecteur CSS en bas à gauche de votre page.

Pour en savoir plus sur la création de sélecteurs CSS avec l'éditeur d'A/B testing, vous pouvez consulter notre article Créer un nouveau sélecteur CSS.

 Choix de l'objectif principal

Nous retrouvons ici l'objectif préalablement créé « Ajout au panier ». Nous ne sélectionnons qu'un seul objectif : il est donc automatiquement défini comme objectif principal.

Si vous souhaitez associer d'autres objectifs à votre personnalisation, vous devrez définir l'un de ces objectifs comme objectif principal.

Mise en ligne de la personnalisation

Simulation

Cliquez sur le bouton « Simuler » afin de prévisualiser la personnalisation et vous assurer de son bon fonctionnement.

Activation

Une fois la personnalisation contrôlée, vous pouvez la mettre en ligne en cliquant sur le bouton « Activer ».

Une popin vous confirmera l’activation de la personnalisation.

Reste maintenant à créer la seconde personnalisation, qui s'affichera par mauvais temps. Pour gagner du temps, il est possible, depuis la page « Vue d'ensemble », de dupliquer la personnalisation que vous venez de créer. Pensez à modifier le segment ainsi que l'image, les autres critères ne changent pas.

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