---
title: Web Channel Action
slug: tesco-mobile-hol-2025/web-channel-action
docTags: 
createdAt: 2025-07-09T14:36:50.185Z
---

## Personalising web experiences

Journey Optimizer allows you to personalize the web experience you deliver to your customers through inbound journeys or campaigns.

### Configuring the web experience

1. From the actions tab, choose **Web** and drag it onto the :FontAwesome[]{icon="fa-solid fa-circle-plus"} **icon** after the Audience Qualification.
2. Click on the activity to open the detailed view.
   1. Set the **label** to `Data Bundle Upsell Banner`.
   2. Set the **web configuration** to `webChannel`. This is the channel configured we have pre-configured with the demo site details.
   3. Click on **Edit content **to start designing your web experience.
   4. When the Tesco Mobile website loads, click the **pause** button on the main homepage carousel on the banner that you want to replace with our personalised banner. 
   5. Once the carousel is paused, click on **Edit web page** from the right side pane.
3. Click on the main banner image to show the editing options available. From the options click **Choose Image**. This will open the Assets popup.

From here you can get images from various sources or you can generate image using firefly. We'll use an image stored in AEM Assets.

1. Click **Select Assets **from the options on the left of the window. 
2. Search for `data_upsell_banner` and **select** *data\_upsell\_banner\_v1.png***.** 

![](https://api.archbee.com/api/optimize/Kr9jNQk3X89PNSZafWHK9-I2h31JBwDRvc3RGva_3Bh-20250716-194857.gif)

![](https://api.archbee.com/api/optimize/Kr9jNQk3X89PNSZafWHK9-uVzD0eSYrVClTZkEsQNJv-20250716-195924.png)

Your Homepage banner should now look like: 

![](https://api.archbee.com/api/optimize/Kr9jNQk3X89PNSZafWHK9-koUzdcNc9Q2rkHsp4WKYV-20250716-200221.png)

1. Click on :FontAwesome[****]{icon="fa-solid fa-arrow-left"}** icon** of the top left to go back to web configuration summary.

### Creating a web experiment

As part of our drive to increase the conversion rates of our web experience, we want to run an A/B Experiment to see which banner copy performs the best. So we are going to configure a **Content Experiment** for our web experience.

![](https://api.archbee.com/api/optimize/Kr9jNQk3X89PNSZafWHK9-AzglXdox9ZzykqKRZNEKy-20250716-200555.png)

1. In the top right, click on :FontAwesome[]{icon="fa-solid fa-flask"} **Create experiment**. A window will open.
   1. Set the **success metric** to `Unique Clicks (AJO)`.
   2. Leave the **holdout** `off`, this is the default setting. Enabling this will allow you to add a percentage of the audience to a control group, receiving none of the content treatments.
   3. Leave **distribute evenly** `on`, this is the default setting. Disabling this will allow you to customly distribute the incoming audience over your treatments.
   4. Click :FontAwesome[]{icon="fa-solid fa-plus"} **Add treatment** to add a second treatment to your experiment. 
   5. Your Experiment should now look like this:

      ![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/xxl4KoOGKzIz7zDxpTwG5_image.png)
   6. Click **Create** in the top right. 

Notice how the interface changed and now displays your treatments on the left menu. 

The web content for Treatment B is the default website. Let's change the same banner in the Homepage carousel to `V2` of the `data_upsell_banner` for Treatment B.

1. Click on the **Web** icom under **Treatment B**.
2. Click the **pause** button on the main homepage carousel on the banner that you want to replace with our personalised banner. 
3. Once the carousel is paused, click on **Edit web page** from the right side pane.
4. Click on the main banner image to show the editing options available. From the options click **Choose Image**. This will open the Assets popup.
5. Click **Select Assets **from the options on the left of the window. 
6. Search for `data_upsell_banner` and **select** *data\_upsell\_banner****\_v2****.png***.** 

Your Treatment B Homepage should now look like: 

![](https://api.archbee.com/api/optimize/Kr9jNQk3X89PNSZafWHK9-TWtrZwuf_T98acOhDFukc-20250716-202003.png)

:::hint{type="info"}
*Note: you can rename the Treatments for reporting purposes, but we'll leave them as Treatment A and B for this Lab.*
:::

1. Click on :FontAwesome[****]{icon="fa-solid fa-arrow-left"}** icon** of the top left to go back to web configuration summary
2. You see now two treatments with two different messages as the web experience.
3. Click on :FontAwesome[]{icon="fa-solid fa-angle-left"} **icon** to go back to the journey. Your screen will look like this. Click **Save** to save the configuration of web channel step in the journey.

![](https://api.archbee.com/api/optimize/Kr9jNQk3X89PNSZafWHK9-JujaEd_y6_zzjXypylQ_5-20250716-202240.png)

:::hint{type="success"}
You've successfully created a personalised website experience and Content Experiment.

Let's proceed to building the next step of our Journey where we will add a condition to check the best channel to send communication.
:::