For the website “Mozilla Gear”, we would like to change the head banner according to the weather.
If the weather is good at the visitor’s location, he will see this banner:
However, if the weather is bad, he will see this one:
To do this, we must create two web personalizations: one for each banner. We will call them personalization A (good weather) and personalization B (bad weather)
Create the segment
Access to the segment builder
To create a new segment, go to the “Segments” page in the “Targeting” tab.
Then, click on “New segment” to create a new segment.
We are going to use two conditions here:
- In the “Targeted pages” part, the “Page URL” condition will allow us to target the page on which we want the banner to display.
- In the “External environment”, the “Weather” condition will allow us to target visitor according to the weather.
For personalization A (good weather), we are going to create a segment allowing us to target visitors on a specific page, when the sky is clear or temperature is high.
Click on the “Validate” button to save your segment.
Use the same criteria to create the segment for your personalization B (bad weather). The only difference will be that only visitors suffering from bad either conditions such as rain, cold or wind will be targeted.
Access to goal settings
To create your goal, click on the “Configured sites” page.
In the “Reporting” part, click on “Kameleoon”. If Kameleoon reporting tool has not been installed, click on “Add a reporting tool”.
Click on “Add Kameleoon” goal to add your goal.
Setting up your goal
In this example, our goal is to make visitors add products to their baskets.
Then, click on the “Validate” button to save your goal.
Create the web personalization
Two personalizations must be created: one for the “Good weather” banner and one for the “Bad weather” banner. The segment and the image chosen are not quite the same, but the other criteria are identical.
Let’s start with the “Good weather” one.
In your back-office, click on the “Add new perso” button to start.
Name and website selection
A pop-in opens and allows you to choose the website on which the personalization will be launched and the name of your personalization.
In the “Segment exposed to this personalization” part, click on “Choose existing segment” to select the segment you have created previously.
Where to display the personalization?
In this example, we would like to replace an image. To do so, we have to create our personalization “Inside the content of your pages”.
Then, select “From an Image” and click on the “Browse from your computer” button to import your image.
Once the image has been imported, you can choose to resize it or not. In our example, the image has already the right size so we selected “Identical to source image”.
Fill in the CSS selector field to choose the banner position on the page. Then, add the URL of the page to which the visitor will be redirected if he clicks on our banner.
Note: if you are having some difficulties to find out the CSS selector to choose, you can use the A/B testing editor to help you. Select the element of your choice and find its selector on “ID” window on the bottom left of the page.For further information about the creation of CSS selectors with the A/B testing editor, you can read our article “Create a new CSS selector”.
Selection of main objective
Select the goal of your choice in the list of goals. As we selected only one goal, this will be the main goal, but if you associated several goal to your personalization, you will have to define the main one.
Activation of the web personalization
Click on the “Simulate” button to previsualize the web personalization and make sure it is working properly.
To put your web personalization online, simply click on the “Activate” button.
If your web personalization has been properly activated, the following pop-in will display:
Now that the first web personalization is created, use the same process to create the second one. To save some time, you can duplicate your first web personalization and change the segment and the image before activating it.