---
title: Bonus - Web Channel
slug: ajo-elc/bonus-web-channel
docTags: 
createdAt: 2025-06-18T06:09:40.299Z
---

# Learning Objectives 

In this exercise you will: 

1. Learn how to configure a personalized web banner 

# Scenario

During the demo you saw the banner update on the skincare category page once the customer authenticated.   This banner was injected using Adobe Journey Optimizers web channel and visual editor.   Follow this exercise to either create a new web campaign or add an additional action to the campaign you built in Lab 3.   

# 3.1  Create Web Campaign 

Web personalisation can be configured either within the context of a journey or as it's own Campaign in isolation.   For this exercise we will configure it in a campaign action.  From the left navigation click to **Campaigns **and select the **Action **tab.   Here you can see the list of actions already configured.  

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/mkWPGnfnYha15S3ZgtJjB_image.png)

Click to **Create campaign**

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/XFx01zTST3H5XJizKp0cY_image.png)

Select **Scheduled - Marketing **and click **Confirm.**

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/IyDvu5op30IGLANMNGkqq_image.png)

Give your action a unique name  something like **\<your name or lab number> Web Personalisation.&#x20;**

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/Y8FUNTyarh37CJjWWDoC1_image.png)

Move to the **Actions** tab and click to add a **Web&#x20;**&#x61;ction.

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/iharFCWbrnpCiPsKlPuro_image.png)

Select the web-elc-skc web configuration.  The web configuration controls where on the website the experience will be updated.  This configuration is set to display on the skincare product category page. &#x20;

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/QLKRrUzvEpKjZf053e4Ht_image.png)

:::hint{type="warning"}
You can view the configuration details by clicking the eye icon to the right of the drop down.   It will show you what has been configured by administrator. &#x20;

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/CzqOC9iWO8rewlE0l2z3G_image.png)
:::

Just like the emails we configured in the journey, you can add experimentation or multi-lingual translations to a campaign as well.  The conflict management controls which experience will get priority if multiple campaigns are targeting the same profile on the same page at the same time.&#x20;

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/KEEjPHsZfFqblLEppWQ-h_image.png)

For this exercise we will ignore this and move straight onto the **Content&#x20;**&#x74;ab.    You'll see a preview of the page we're going to update.  Click to **Edit Web Page.**

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/LxOlX7Tj7LOqViBlbOSOz_image.png)

Change the device to **Desktop&#x20;**&#x74;hen select the existing banner which we're going to replace.&#x20;

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/0dm2bVjHHluEYZUS9-XDd_image.png)

We want to remove the wrapping container around the picture, select the **div&#x20;**&#x62;efore the **picture&#x20;**&#x69;n the list of elements at the bottom of the editor.

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/cnb7ZbaTTE5JboGxNFZBO_image.png)

Now click to **Remove Element.**

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/VCsMZWjBYtzC-p9GsYWvM_image.png)

Select  **Image&#x20;**&#x66;rom the components menu, then select the **breadcrumbs block** on the page and click to **Insert Before.&#x20;**

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/3TUK78-rTCbVQje_S4sG8_image.png)

Click to update the image source either from the hover menu or the image properties on the right hand side

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/2BPQXEENCRpe8uXUl3WSI_image.png)

You can insert imagery from Adobe Stock, generate images using AI with Adobe Firefly or select a pre-existing image from your DAM using the Asset selector, choose the **Asset Selector.  &#x20;**&#x20;Search for **supremeplusbanner&#x20;**&#x61;nd select the banner from the demo and hit **Select.&#x20;**

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/howpidHEisp1C77MSOwcW_image.png)

Your image should be successfully added. &#x20;

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/rTX6IkPQ-dLTH_VnjO7jq_image.png)

From here you can update your image properties using the panel on the left, adding a link or modifying the size or CSS class that will be applied.  Custom styles can be added at the bottom of the image properties. &#x20;

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/rbCdywFUanTLx-4S0C75G_image.png)

Move now to the **Audience&#x20;**&#x74;ab to control who will see this banner.    Change the audience to the complex audience we reviewed earlier: **ELC - Purchased ANR twice in last year.  &#x20;**

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/hNDqTJ5utVb3m900X_X_w_image.png)

Lastly you can define a schedule for your campaign to control when it will be available.

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/65bI8jJ9WKClbbLE7TL7h_image.png)

Click **Review to activate.**

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/b2zLn0cdFuE_2-Uf__doj_image.png)

Here you can review your campaign settings and check everything including simulating the experience before setting the campaign to be active. &#x20;

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/wHt61nKM3yyNtZmvvz5SV_image.png)

# Summary

Congratulations, you've successfully created a personalized web campaign.&#x20;