In this exercise you will:

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.

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.

Click to Create campaign

Select Scheduled - Marketing and click Confirm.

Give your action a unique name something like <your name or lab number> Web Personalisation.

Move to the Actions tab and click to add a Web action.

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.

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.

For this exercise we will ignore this and move straight onto the Content tab. You'll see a preview of the page we're going to update. Click to Edit Web Page.

Change the device to Desktop then select the existing banner which we're going to replace.

We want to remove the wrapping container around the picture, select the div before the picture in the list of elements at the bottom of the editor.

Now click to Remove Element.

Select Image from the components menu, then select the breadcrumbs block on the page and click to Insert Before.

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

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. Search for supremeplusbanner and select the banner from the demo and hit Select.

Your image should be successfully added.

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.

Move now to the Audience tab to control who will see this banner. Change the audience to the complex audience we reviewed earlier: ELC - Purchased ANR twice in last year.

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

Click Review to activate.

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

Congratulations, you've successfully created a personalized web campaign.