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 access the Segment Builder from the back office, use the left side menu to go to the Segments page.
To create a new segment, click on “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
Access all goals created with your account on the “Goals” page situated in the “A/B Test” or “Personalization” tab in the side bar menu.
The default version includes the goal”Engagement” for all sites set up with your Kameleoon account. This goal records the number of visitors who open at least one other page after the landing page.
Click on the “New goal” button.
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 “New personalization” 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.