---
title: Bonus: Website Personalisation
slug: rag/bonus-website-personalisation
docTags: 
createdAt: 2025-12-03T02:41:57.900Z
---

# Objective&#x20;

In this lab you'll learn how Adobe Journey Optimizer can personalize and optimize website experiences. &#x20;

As part of the digital operations team you will set up a web campaign to promote online only discounts to our target audience.   You'll add experimentation to A/B test the impact of different creative imagery on conversions. &#x20;

# Access

Switch t&#x6F;**&#x20;Journey Optimizer** using the solution switcher:&#x20;

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

Check that you are in the **FAC&#x20;**&#x73;andbox

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/G0HxCheZa9p-9RqpRUHAo_image.png)

# Create Web Campaign

1. Navigate to **Journey Management -> Campaigns. &#x20;**&#x41;JO supports multiple campaign types, we will be create a single action campaign for this use case.   Click to **Create Campaign.**

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/iGI7Iw3sR72OQ-8utXPEe_image.png)

2. Choose the **Scheduled - Marketing&#x20;**&#x6F;ption and click **Confirm**

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

3. **Name** your campaign.  Add your initials or lab number at the end so you can recognize it later.    You can add a **description** and **tags** to help with organization but these are optional.&#x20;

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

4. Click to **Add action&#x20;**&#x61;nd select **Web**

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

5. Select the **lumaHomeCommerce&#x20;**&#x77;eb configuration - this is a predefined object which defines the website location or locations where the experience will appear.   You can see the details of the config by clicking the eye icon.&#x20;

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/QlX7ydfFwX-nOZg-uBw1t_image.png)

:::hint{type="info"}
**Note** - Inbound Action Campaigns can support multiple channels.  So you could add a similar experience to your mobile app using a Content Card or In App message within the same campaign definition if you add a second action.   We will skip this for the lab.

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

Now we want to test different versions of our creative, so we'll go ahead and create an experiment within this campaign.&#x20;

## Create Experiment

1. Now we want to test different versions of our creative, so let's click to **Create experiment.**

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

2. Give your experiment a name like **Luma Home Page Personalisation** add your initials so you can recognise it later - this experiment name will be leveraged by reporting.  &#x20;

   We then need to define the **Goal** or **Success Metric&#x20;**&#x66;or the campaign.  This can be simple metrics like clicks or conversion metrics like **Purchases (7d)**.  &#x20;

:::hint{type="info"}
Journey Optimizer provides commerce conversion metrics out of the box but with Customer Journey Analytics license you can choose to optimize for any metric defined within your data view. &#x20;
:::

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

3. Next we need to choose the experiment type, for this lab we will select **A/B experiment**.  &#x20;

:::hint{type="info"}
**A/B Experiment&#x20;**&#x53;plits traffic as you define between treatments and measures performance until results are statistically significant. Best for learning which treatment performs better in a controlled comparison.

**Multi-armed Bandit&#x20;**&#x53;hifts traffic toward higher-performing treatments as data is collected, balancing speed and optimization. Useful when you want to maximize conversions during the experiment.  &#x20;

You can even **Bring your own Multi-armed Bandit.&#x20;**

[Read more](https://experienceleague.adobe.com/en/docs/journey-optimizer/using/content-management/content-experiment/technotes/mab-vs-ab)
:::

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

4. Click to add a second treatment or variant to our experiment and decide if you want to apply a holdout (ie. control) group or not. &#x20;

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

5. Lastly you can choose to Auto Scale the experiment to present the winning version once a statistical winner has been found. &#x20;


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

6. Click **Create&#x20;**&#x74;o create the experiment and return to the Campaign configuration.

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

## Define Content&#x20;

Next we'll add our updates for each of the treatments. &#x20;

1. Click to the **Content&#x20;**&#x74;ab and click to **edit web page**

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

2. Use the visual editor to update the text within the main banner.&#x20;

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

3. Next we need to configure the elements that will be tracked.  Click on the shop new button then use the element list at the bottom of the editor to select the anchor \<a> tag wrapping the span. &#x20;

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

4. Select the second icon in the link setting on the right to add **Click Tracking** to the element - this will ensure a new experience event is added to profiles interacting with the modified content.   This is used by the reporting and can be used to further segment your customers. &#x20;

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

5. You can see the list of modifications you've made to the page using the tabs on the left.

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

6. Click on the arrow to exit the editor&#x20;

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

7. Select **Treatment B&#x20;**&#x61;nd click t&#x6F;**&#x20;Edit Web Page&#x20;**&#x74;o configure the second variation.&#x20;

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

8. In this variant we'll update the banner image as well.  Add the same text updates, then select the banner **image** and click to edit the **source.&#x20;**&#xA;

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

9. You can use Generative AI to create a new image or select an existing image from Adobe Stock (if licensed) or from your Asset Repository.   For this exercise we'll select the banner you added to the asset repository earlier. &#x20;

   Click on the top navigation icon to access the repository.&#x20;

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/OejEwAonj68bOV-9bJvNy_image.png)

10. Make sure you're in the right repository **Demo APAC Program 2 prod delivery -&#x20;**&#x74;his is where you'll find the "approved" assets.   You have access to both repositories but marketers might be restricted to accessing this repository only. &#x20;

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

11. Search for your image using one of the AI generated keywords.  Click select to add it to the campaign.

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

12. Scroll to the bottom of the image properties on the right panel and set the inline styles to have **max-width : 100%**

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

13. Click on the arrow to exit the editor&#x20;

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/U-FicZ1X0TEeXAegHobK-_image.png)

14. You can preview the different experiences here&#x20;

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

## Select Audience&#x20;

Web experiences can be targeted to all visitors or specific audiences.   We want this experience to only show to customers we've identified to be eligible for the promotion.  &#x20;

1. Change to the **Audience&#x20;**&#x74;ab and click to **Select audience**

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/8JTEIgUzZsOAYP-aL9AEA_image.png)

2. Select the AEP Audience we created earlier in the lab.&#x20;

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

3. We will limit the experience to known customers so change the identity type to **Email.**

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

## Schedule

Lastly you can schedule when the campaign should be active by switching to the Schedule tab.     You can leave these as default for now.&#x20;

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

Your campaign is now ready to be activated, click on **Review to activate**

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

Congratulations!   Your campaign is now ready. &#x20;

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

