---
title: Creating the journey
slug: tesco-mobile-hol-2025/creating-the-journey
description: >-
docTags: 
createdAt: 2024-01-30T23:03:21.354Z
---

In this exercise, you'll be creating and testing a journey using the components you've created in the previous exercises. Go to Adobe Journey Optimizer by clicking on the 9 dots on the top right and select Journey Optimizer. 

:::hint{type="info"}
To log into the Adobe Experience Platform, and open Adobe Journey Optimizer, check the  [Welcome!](docId\:EBLj9S37kQWOUQgEWnQBf)**   **section.
:::

# Journey overview

To get an overview of all journeys in Adobe Journey Optimizer:

1. In the menu on the left side, under **Journey Management**, click on **Journeys**. You will see a overview with all existing journeys.

![](https://api.archbee.com/api/optimize/cPBDqdbhvFSQWFNnID7Bn-ILr3Iv037J6M_lKN_1g2A-20250508-144516.jpg)

# Creating a journey

We'll be creating a journey that will send an email to people that have a added the products to the cart but didnt purchase the product yet. We need to ensure we exclude the people who has purchased as well.

Click on **Create Journey**. You'll be taken to the **Journey canvas** with the journey properties opened.

1. Set the **name** to `[your name] - Retargeting Abandoned cart`
2. For the other properties we'll keep the default values.

Your screen should look like the image below. Click **Save** to save and close the properties.

![](https://api.archbee.com/api/optimize/6H6rknlvdVrktAepVnpsA-lTHU6AFMCmWOIgrMf_kiB-20250714-133529.png)

You're now in the journey canvas. This is where you'll be creating your journey's logic. In the left menu you have **activities**. There's three types of activities:

**Events** are the triggers that can start or continue your journey.

**Orchestration** is the logic of your journey. It looks at conditions, audiences, but can also be used to make your workflow wait or end.

**Actions** are the results of your journey. This can be messages, profiles updates or API calls.

## Event trigger - Add to Cart



::::Tabs
:::Tab{title="Advanced (Custom event)"}
1. We're starting our workflow of with an event trigger. From the events tab, choose the event your created `[yourname]_addToCartEvent` and drag it onto the canvas. 
   - *Note: In case you haven't created an event, please use addToCartEvent.*
2. There's nothing we need to configure for this as we have already done this when we configured our event. Click **Save** to close the menu.

![](https://api.archbee.com/api/optimize/6H6rknlvdVrktAepVnpsA-mDQTbCvWtY6D92l6wKukC-20250714-133905.png)

## Exclude customers who purchased
:::

:::Tab{title="Basic (Use default event)"}
1. We're starting our workflow of with an event trigger. From the events tab, choose the event your created `addToCartEvent` and drag it onto the canvas. 

   **
2. There's nothing we need to configure for this as we have already done this when we configured our event. Click **Save** to close the menu.

![](https://api.archbee.com/api/optimize/6H6rknlvdVrktAepVnpsA-F6uaXXivrwDiQKEwUZas_-20250716-143416.png)

## Exclude Customers who purchased
:::
::::

Now you want to filter out all the people who has purchased the product while the journey got triggered. Also, we want to sent a reminder email for the customer only after 24 hours of not purchasing the product after adding the product to the cart. 

1. For this, we drag the **purchaseEvent** in the Events tab to the :FontAwesome[]{icon="fa-solid fa-circle-plus"} -**icon** next the addToCartEvent in the journey canvas.
2. Update the Label as `Product purchased.`
3. Click on the checkbox next to **Define the event timeout** to enable a branch when it times out. Keep the default of Wait for 1 Day. Click on **Save.**

![](https://api.archbee.com/api/optimize/6H6rknlvdVrktAepVnpsA-l9_HyFNoXD8kwkL8WEUq2-20250714-150224.png)

## Create a personalised Homepage experience

As the first step in retargeting, we want to remind the customer about the items in the cart when they first land back on the website. We want to use code-based experience action to personalise the homepage banner.



::::Tabs
:::Tab{title="Advanced (Custom Event)"}
As the first step in retargeting, we want to remind the customer about the items in the cart when they first land back on the website. We want to use code-based experience action to personalise the homepage banner.

1. Add **Code-based experience **from the actions tab to the :FontAwesome[]{icon="fa-solid fa-circle-plus"} -icon in the branch labelled as **1 d timeout**.
2. Update label as `Personalise web homepage`
3. Select Code-based configuration as `codeBased_WebHomepage`. This configuration is already pre-setup with what is needed for updating the Homepage banner.
4. The screen will look like below. Click on **Edit content** to add the personalised content.

   ![](https://api.archbee.com/api/optimize/6H6rknlvdVrktAepVnpsA-lr47gucWkSkP5-EIlGnY_-20250714-153340.png)
5. Click on **Edit code**

   ![](https://api.archbee.com/api/optimize/6H6rknlvdVrktAepVnpsA-rhbWJCEeud6XxHu-6A1xO-20250714-170838.png)
6. **Copy** and **paste** the below code block to the editor area. 
   *As you can see, the code already reference to firstName from customer profile and Product Name from contextual attributes.*

   ```json
   {
     "pretitle": "Hi FIRSTNAME,",
     "title": "Your PRODUCTNAME is waiting for you",
     "subtitle" : "Click on the banner to complete the checkout",
     "imageUrl": "https://dsn-upload.s3.us-east-2.amazonaws.com/projects/nirmalj-F8NU/support-cmp-zlqOoeXWvgqrEdBuiZMZE-src"
   }
   ```
7. **Remove** the text *FIRSTNAME* and search for `first name` in profile attributes.
8. Find the field **First Name** in the path *Profile attributes > Person > Full Name* and click on the :FontAwesome[]{icon="fa-solid fa-plus"} **-icon** to add it. It should be now `Hi {{profile.person.name.firstName}},`

   ![](https://api.archbee.com/api/optimize/6H6rknlvdVrktAepVnpsA-gg16LsC_AAC2Sgb0s05lO-20250717-044827.png)
9. Now lets add the Product name to the title field.
   1. **Remove** the text *PRODUCTNAME* from the field.
   2. Go to **Contextual attributes** and navigate to *Journey Orchestration > Events > yourname\_addToCartEvent > productListItems.*
   3. Add **Name** by clicking on :FontAwesome[]{icon="fa-solid fa-plus"} **-icon** next to it. 

      ![](https://api.archbee.com/api/optimize/6H6rknlvdVrktAepVnpsA-1qDHo0NoGX8ARPhg2Bubp-20250717-050101.gif)
10. Click on **Save and Close** to save it. 

    ![](https://api.archbee.com/api/optimize/6H6rknlvdVrktAepVnpsA-UYxeNaaQ9OjtUU3tn6D9z-20250714-172453.png)
11. Click on the :FontAwesome[]{icon="fa-solid fa-angle-left"}**-icon** to go back to the journey. Click on **Save** to save the journey step.

![](https://api.archbee.com/api/optimize/6H6rknlvdVrktAepVnpsA-nGHnEZTXSqe2IPxzvbVLW-20250716-144704.png)

Code-based experience action always add an automatic wait node after the inbound message. For our journey, we can click on the **wait step** after the code-based experience and delete it by clicking on the **delete** icon. Confirm deletion by clicking **Delete** on the popup.

![](https://api.archbee.com/api/optimize/6H6rknlvdVrktAepVnpsA-0dj0o1qmhVyzNJE1l4UDu-20250714-173621.png)

We have now created a step to personalise the Demo website homepage banner using code-based experience action. We selected first name from the profile and and we choose the device name of the product added to the cart to trigger the journey.


:::

:::Tab{title="Basic (Default Event)"}
As the first step in retargeting, we want to remind the customer about the items in the cart when they first land back on the website. We want to use code-based experience action to personalise the homepage banner.

1. Add **Code-based experience **from the actions tab to the :FontAwesome[]{icon="fa-solid fa-circle-plus"} -icon in the branch labelled as **1 d timeout**.
2. Update label as `Personalise web homepage`
3. Select Code-based configuration as `codeBased_WebHomepage`. This configuration is already pre-setup with what is needed for updating the Homepage banner.
4. The screen will look like below. Click on **Edit content** to add the personalised content.

   ![](https://api.archbee.com/api/optimize/6H6rknlvdVrktAepVnpsA-lr47gucWkSkP5-EIlGnY_-20250714-153340.png)
5. Click on **Edit code**

   ![](https://api.archbee.com/api/optimize/6H6rknlvdVrktAepVnpsA-rhbWJCEeud6XxHu-6A1xO-20250714-170838.png)
6. **Copy** and **paste** the below code block to the editor area. 
   *As you can see, the code already reference to firstName from customer profile and Product Name from contextual attributes.*

   ```json
   {
     "pretitle": "Hi {{profile.person.name.firstName}},",
     "title": "Your {{context.journey.events.158452502.productListItems.name}} is waiting for you",
     "subtitle" : "Click on the banner to complete the checkout",
     "imageUrl": "https://dsn-upload.s3.us-east-2.amazonaws.com/projects/nirmalj-F8NU/support-cmp-zlqOoeXWvgqrEdBuiZMZE-src"
   }
   ```
7.
8. Click on **Save and Close** to save it. 

   ![](https://api.archbee.com/api/optimize/6H6rknlvdVrktAepVnpsA-UYxeNaaQ9OjtUU3tn6D9z-20250714-172453.png)
9. Click on the :FontAwesome[]{icon="fa-solid fa-angle-left"}**-icon** to go back to the journey. Click on **Save** to save the journey step.

![](https://api.archbee.com/api/optimize/6H6rknlvdVrktAepVnpsA-nGHnEZTXSqe2IPxzvbVLW-20250716-144704.png)

Code-based experience action always add an automatic wait node after the inbound message. For our journey, we can click on the **wait step** after the code-based experience and delete it by clicking on the **delete** icon. Confirm deletion by clicking **Delete** on the popup.

![](https://api.archbee.com/api/optimize/6H6rknlvdVrktAepVnpsA-0dj0o1qmhVyzNJE1l4UDu-20250714-173621.png)

We have now created a step to personalise the Demo website homepage banner using code-based experience action. We selected first name from the profile and and we choose the device name of the product added to the cart to trigger the journey.

##
:::
::::



## Create reminder email

In the next steps you will be building the email to remind to the customer that they have left something in their shopping cart.

::::Tabs
:::Tab{title="Advanced (Custom event)"}
You'll pick a half completed template of the basic email and configure some elements of email content design.
:::

:::Tab{title="Basic (Default event)"}
You'll pick a fully completed template of the basic email so that you don't have to build any components in the email.
:::
::::

### Building the Email

::::Tabs
:::Tab{title="Advanced (Custom event)"}
1. From the actions tab, choose **Email** and drag it onto the empty circle at the **Win-path**.
2. Click on the activity to open the detailed view.
   1. Set the **label** to `Email - Cart reminder`
   2. Set the **category** to `Marketing`.
   3. Set the **email surface** to `marketingEmailMessages`.
   4. Click on **Edit content** to start designing your email.
      1. Click on :FontAwesome[]{icon="fa-solid fa-user"} to create a subject line. Set it to `Hi FIRSTNAME, we see you were thinking of joining us`
      2. Remove the text `FIRSTNAME` and search for `first name` in the profile attributes.
      3. Find the field First name (*... attributes > person > Full name*) and click on the :FontAwesome[]{icon="fa-solid fa-plus"} **icon** to add it to your subject line. It should now be`Hi {{profile.person.name.firstName}}, we see you were thinking of joining us`
      4. Click **Save**.

![](https://api.archbee.com/api/optimize/6H6rknlvdVrktAepVnpsA-fj9nqIQshiP7PsJHs-e4o-20250714-175329.png)

- Click on **Edit email body** and under **Saved templates**, choose `Secure your cart - Advanced Email template`. It will show you a preview of the template. Click on **Use this template**.
- The email designer will now open. It should look like the image below. Click **Save** in the top right. 

![](https://api.archbee.com/api/optimize/6H6rknlvdVrktAepVnpsA-mCF1TYSIIakucpj_b_AdE-20250714-180015.png)
:::

:::Tab{title="Basic (Default event)"}


1. From the actions tab, choose **Email** and drag it onto the empty circle at the **Win-path**.
2. Click on the activity to open the detailed view.
   1. Set the **label** to `Email - Cart reminder`
   2. Set the **category** to `Marketing`.
   3. Set the **email surface** to `marketingEmailMessages`.
   4. Click on **Edit content** to start designing your email.
      1. Click on :FontAwesome[]{icon="fa-solid fa-user"} to create a subject line. Set it to `Hi {{profile.person.name.firstName}}, we see you were thinking of joining us`
      2. Click **Save**

![](https://api.archbee.com/api/optimize/6H6rknlvdVrktAepVnpsA-fj9nqIQshiP7PsJHs-e4o-20250714-175329.png)

- Click on **Edit email body** and under **Saved templates**, choose `Secure your cart - Full Email template`. It will show you a preview of the template. Click on **Use this template**.
- The email designer will now open. It should look like the image below. Click **Save** in the top right. 

![](https://api.archbee.com/api/optimize/6H6rknlvdVrktAepVnpsA-gzR5ibCTnVYcJiSFlNNpy-20250716-155708.png)
:::
::::

### The Email Designer

In the left menu you have **components**.

**Structure components** are the building blocks of your email, they will determine the layout of your email. 

**Content components** are the different forms of content that you can place inside your structure components, like text, buttons and images.

### Edit content component - image

:::::Tabs
:::Tab{title="Advanced (Custom Event)"}
As first step, let's add an hero image, based on the outcome of the bet.

- Click on **Browse** button in the hero banner placement to open up *Asset Selector popup*.
- Navigate to *Hands-on Lab > Tesco Mobile*
- Search for `cart` and select the image ***cartAbandonmentBanner.png*** by clicking on **Select** button.

![](https://api.archbee.com/api/optimize/6H6rknlvdVrktAepVnpsA-F_2W6-ER9sEmPmNM4kio7-20250714-180432.png)
:::

::::Tab{title="Basic (Default Event)"}
:::hint{type="info"}
This step is alredy configured for you in your template. Proceed to next step.
:::
::::
:::::

### Edit content component - text and personalisation

:::::Tabs
:::Tab{title="Advanced (Custom Event)"}
Now, lets update the template with the correct basket product. Click on the yellow text in the Our basket section to see the popup menu and then click personalisation menu to open up the personalisation editor.

![](https://api.archbee.com/api/optimize/6H6rknlvdVrktAepVnpsA-VylFtTBJqAXxJr5_jIEa2-20250714-181214.png)

1. As you can see, this is an HTML content block which iterates through the basket and render the products in them. The template contains the basket items from the default addToCartEvent (event ID is *158452502*) and you need to update it with your custom yourname\_addToCartEvent product details.

   ![](https://api.archbee.com/api/optimize/6H6rknlvdVrktAepVnpsA-P-mDEeb4s3OBa7VOrhnQ5-20250714-181653.png)
2. Replace the template provide productListItems with your custom event productListItems.
   For this, select the text **context.journey.events.158452502.productListItems** and **remove** it. Navigate to *Contextual attributes tab > Journey Orchestration > Events > yourname\_addToCartEvent > productListItems > ****Name***. Add the attribute by clicking on :FontAwesome[]{icon="fa-solid fa-plus"} **-icon** next to the attribute. Remove **.name** from end of the text so that it will loop through the entire object. Click on **Save** to go back to email designer.

   ![](https://api.archbee.com/api/optimize/6H6rknlvdVrktAepVnpsA-6tD_xD33s4aCWeqMY8fO_-20250717-090748.gif)
3.
4. Click on **Save** on top right, Navigate out of the email editor by clicking on the :FontAwesome[]{icon="fa-solid fa-arrow-left"} **-icon** in the top left corner; then click the :FontAwesome[]{icon="fa-solid fa-angle-left"}**-icon** to come back to the main canvas. Click on **Save** to save the journey step progress.

![](https://api.archbee.com/api/optimize/6H6rknlvdVrktAepVnpsA-6Dylh4ixI81tqqkit-_XD-20250714-183732.png)


:::

::::Tab{title="Basic (Default Event)"}
:::hint{type="info"}
To avoid losing your work, click **Save**, on the top-right corner.
:::

You can explore the email template to see how the other blocks are built.

Navigate out of the email editor by clicking on the :FontAwesome[]{icon="fa-solid fa-arrow-left"}** -icon** in the top left corner; then click the :FontAwesome[]{icon="fa-solid fa-angle-left"}**-icon** to come back to the main canvas.

Once you're in the main canvas, click **Save** to apply the changes.
::::
:::::

## Check whether they purchased the product.

Now that the customer has received an email reminder, we will wait for a product purchase event. If they purchase the product we will exit the product. 

To do this, drag and drop **purchaseEvent **from Events tab and drag it as the next step to the cart reminder email in the :FontAwesome[]{icon="fa-solid fa-circle-plus"}**-icon**. 

Update the label as `Product purchased` and enable the time out flow by clicking checkbox **Define the event timeout. **Click **Save.**

![](https://api.archbee.com/api/optimize/6H6rknlvdVrktAepVnpsA-xr1P0cvF4hPv45nk6qrm--20250714-184848.png)

## Cart reminder email with offers

Even with the reminder, the customer didn't buy it for another day, so we are going to provide him with an offer.

:::::Tabs
::::Tab{title="Advanced (Custom Event)"}
As this email is an extension to the first email, we are going to copy the email and use it.

- Click on **Email - cart reminder** step to open the Actions menu
- Click on :FontAwesome[]{icon="fa-solid fa-copy"} **-icon** to copy the step.
- Close the menu by clicking on **Save** button.
- In Windows - press **Ctrl+V** and in Mac - press **Cmd+V **to clone the Email - cart reminder step.



![](https://api.archbee.com/api/optimize/6H6rknlvdVrktAepVnpsA-_68fTCliCFSnbK-Mt90rq-20250716-163701.gif)

- Now, **drag** the newly created **Email - cart reminder step** on to :FontAwesome[]{icon="fa-solid fa-circle-plus"}**-icon** the 1d timeout branch until the branch turns in blue colour. 
  *Thats how we move the cloned step to the branch so that that email will be sent to the customer if the customer didn't purchase the product in another 24 hours.*
- Click on the orphaned **End** step in the canvas to open the Action menu.
- Click on **Delete icon** to delete the step. 
- Re-arrange the branches to clean up the overlapping branches if any.

![](https://api.archbee.com/api/optimize/6H6rknlvdVrktAepVnpsA-NYk7jbb1oSEnq4AYn2yZs-20250716-164703.gif)

- Click on the newly created **Email - Cart reminder step** to open the Actions menu.
- Rename the label to `Cart reminder with offer` and click on **Edit content**.

![](https://api.archbee.com/api/optimize/6H6rknlvdVrktAepVnpsA-b0XjFKxCz9f7-8MshBMNs-20250716-165355.png)

- Update the subject line as `{{profile.person.name.firstName}}, join us now and get an additional offer. `
- Click on **Edit content** to edit the email content.

![](https://api.archbee.com/api/optimize/6H6rknlvdVrktAepVnpsA-ZSngzPQG8tBhfG7e3ZB8t-20250716-165516.png)

- In the email designer, drag a **Text** component and add it below the **Secure your cart button**.
- Update the text as `Purchase today to redeem the partner offer below`
- Click on **H-menu** in the popup menu and select **H3**

![](https://api.archbee.com/api/optimize/6H6rknlvdVrktAepVnpsA-tBGXebpV8TBMxbzUqnESL-20250716-170305.png)

- Drag and drop an **Offer decision** component below the text.
- Click on **Add button** to add an offer.

![](https://api.archbee.com/api/optimize/6H6rknlvdVrktAepVnpsA-pq-AqVjhiqKX-dsYANQH9-20250716-171204.png)

- Select Placement as `Email - Image `
- Select your offer decision your built in the previous steps. Click on **Add** to add the offer to the email.

![](https://api.archbee.com/api/optimize/6H6rknlvdVrktAepVnpsA-ZObN_1cS1-64hIAqr5Iz9-20250714-191605.png)

This adds the offer to the email and you can browse the various offers in the collection by clicking on :FontAwesome[]{icon="fa-solid fa-angle-left"} and :FontAwesome[]{icon="fa-solid fa-angle-right"} icons. 

![](https://api.archbee.com/api/optimize/6H6rknlvdVrktAepVnpsA-el7wfQPnPSFbgbBmDEqGm-20250714-191818.png)

:::hint{type="info"}
To avoid losing your work, click **Save**, on the top-right corner.
:::

Navigate out of the email editor by clicking on the :FontAwesome[]{icon="fa-solid fa-arrow-left"}** -icon** in the top left corner; then click the :FontAwesome[]{icon="fa-solid fa-angle-left"}**-icon** to come back to the main canvas.

Once you're in the main canvas, click **Save** to apply the changes.

![](https://api.archbee.com/api/optimize/6H6rknlvdVrktAepVnpsA-kF8Pz7qlxbVKFhSe5pzLu-20250716-174314.png)


::::

::::Tab{title="Basic (Default Event)"}
- Lets add an **Email** action from the action menu to the timeout branch of the Product purchased step.
- Update the label as `Email - cart reminder with offer`
- Click on **Edit content**

![](https://api.archbee.com/api/optimize/6H6rknlvdVrktAepVnpsA-oSX0kmZ2N5WpP_HORNAsI-20250716-172146.png)

- Update the subject line as `Join us now and get an additional offer`
- Click on **Edit email body** to open the Select design template menu
- From Saved templates tab, select **Secure your cart with Offer - Email template**
- Click on **Use this template** to apply the template to the email.

![](https://api.archbee.com/api/optimize/6H6rknlvdVrktAepVnpsA-XSfuxzIVJgAS1zzOdlet0-20250716-173535.png)

:::hint{type="info"}
To avoid losing your work, click **Save**, on the top-right corner.
:::

Navigate out of the email editor by clicking on the :FontAwesome[]{icon="fa-solid fa-arrow-left"}** -icon** in the top left corner; then click the :FontAwesome[]{icon="fa-solid fa-angle-left"}**-icon** to come back to the main canvas.

Once you're in the main canvas, click **Save** to apply the changes.

![](https://api.archbee.com/api/optimize/6H6rknlvdVrktAepVnpsA-wW6D-Vk6gfp_8-c0Aa151-20250716-174033.png)
::::
:::::



:::hint{type="success"}
You have now successfully created the application journey using the Adobe Journey Optimizer. Next, we are going to test our journey using `Test Mode`.
:::