# 10.1 Configure an event-based journey - Order Confirmation
Login to Adobe Journey Optimizer by going to [Adobe Experience Cloud](https://experience.adobe.com). Click **Journey Optimizer**.
You'll be redirected to the **Home** view in Journey Optimizer. First, make sure you're using the correct sandbox. The sandbox to use is called `--aepSandboxId--`. To change from one sandbox to another, click on **PRODUCTION Prod (VA7)** and select the sandbox from the list. In this example, the sandbox is named **AEP Enablement FY22**. You'll then be in the **Home** view of your sandbox `--aepSandboxId--`.
## 10.1.1 Create your event
In the menu, go to **Configurations** and click **Manage** under **Events**.
On the **Events** screen, you'll see a view similar to this. Click **Create Event**.
You'll then see an empty event configuration.
First of all, give your Event a Name like this: `--demoProfileLdap--PurchaseEvent`, and add a description like this: `Purchase Event`.
Next is the **Event Type** selection. Select **Unitary**.
Next is the **Event ID Type** selection. Select **System Generated**
Next is the Schema selection. A schema was prepared for this exercise. Please use the schema `Demo System - Event Schema for Website (Global v1.1) v.1`.
After selecting the Schema, you'll see a number of fields being selected in the **Payload** section. Click the **Edit/Pencil** icon to add additional fields to this event.
You'll then see this popup. You now need to check additional checkboxes in order to access additional data when this event gets triggered.
First of all, check the checkbox on the line `--aepTenantId--`.
Next, scroll down and check the checkbox on the line `productListItems`.
Next, scroll down and check the checkbox on the line `commerce`.
Next, click **Ok**.
You'll then see that additional fields have been added to the event. Click **Save**.
Your new event is then shared and you'll see your event in the list of available events now.
Click on your event again to open up the **Edit Event** screen again. Hover over the **Payload** field again to see the 3 icons again. Click on the **View Payload** icon.
You'll now see an example of the expected payload. Your event has a unique orchestration eventID, which you can find by scrolling down in that payload until you see `_experience.campaign.orchestration.eventID`.
The event ID is what needs to be sent to Adobe Journey Optimizer in order to trigger the journey that you'll build in the next step. Write down this eventID, as you'll need it in one of the next steps. `"eventID": "ef6dd943c94fe1b4763c098ccd1772344662f2a9f614513106cb5ada8be36857"`
Click **Ok**, followed by **Cancel**.
Your event is now configured and ready to be used.
## 10.1.2 Create your journey
In the menu, go to **Journeys** and click **Create Journey**.
You'll then see this. Give your journey a name. Use `--demoProfileLdap-- - Order Confirmation journey`. Click **OK**.
First, you need to add your event as the starting point of your journey. Search for your event `--demoProfileLdap--PurchaseEvent` and drag and drop it onto the canvas. Click **OK**.
Next, under **Actions**, search for the **Email** action and add it onto the canvas.
Set the **Category** to **Marketing** and select an email surface that enables you to send email. In this case, the email surface to select is **Email**. Ensure that the checkboxes for **Clicks on email** and **email opens** are both enabled.
The next step is to create your message. To do that, click **Edit content**.
You now see this. Click the **Subject line** text field.
In the text area start writing **Thanks for your order,**
The subject line is not done yet. Next you need to bring in the personalization token for the field **First name** which is stored under `profile.person.name.firstName`. In the left menu, scroll down to find the **Person** > **Full name** > **First name** field and click on the **+** icon to add the personalization token into the subject line. Click **Save**.
You'll then be back here. Click **Email Designer** to create the email's content.
In the next screen, click **Design from scratch**.
In the left menu, you'll find the structure components that you can use to define the structure of the email (rows and columns).
Drag and drop 8 times a **1:1 column** on the canvas, which should give you this:
Go to **Content Components**.
Drag and drop an **Image** component on the first row. Click **Browse**.
Go to the folder **enablement-assets**, select the file **luma-logo.png** and click **Select**.
You're now back here. Click your image to select it and then use the **Size** slider to make the logo image a bit smaller.
Go to **Content Components** and drag and drop an **Image** component on the second row. Select the **Image component** but DON'T click Browse.
Paste this image URl in the field **Source**: `https://parsefiles.back4app.com/hgJBdVOS2eff03JCn6qXXOxT5jJFzialLAHJixD9/29043bedcde632a9cbe8a02a164189c9_preparing.png`. This image is hosted outside of Adobe.
When you change the scope to another field, the image will be rendered and you'll see this:
Next, go to **Content Components** and drag and drop a **Text** component on the third row.
Select the default text in that component **Please type your text here.** and replace it by the below text:
```
You’re one step closer!
Hi
We've received your order details!
We will also send you a separate email containing your VAT Invoice.
We'll be back in touch with you as soon as we've finished packing your package. Please read carefully the Order Information detailed below.
```
Put the cursor next to the text **Hi** and click **Add Personalization**.
Navigate to the **Person** > **Full name** > **First name** field and click on the **+** icon to add the personalization token into the subject line. Click **Save**.
You'll then see this:
Next, go to **Content Components** and drag and drop a **Text** component on the fourth row.
Select the default text in that component **Please type your text here.** and replace it by the below text:
`Order Information`
Change the font size to **26px** and center your text in this cell. You'll then have this:
Next, go to **Content Components** and drag and drop an **HTML** component on the fifth row. Click the HTML component and then click **Show the source code**.
In the **Edit HTML** popup, paste this HTML:
`
Items purchased
Quantity
Subtotal
`
Click **Save**.
You'll then have this. Click **Save** to save your progress.
Go to **Content Components** and drag and drop an **HTML** component on the sixth row. Click the HTML component and then click **Show the source code**.
In the **Edit HTML** popup, paste this HTML:
`{{#each xxx as |item|}}
{{/each}}`
You'll then have this:
You now have to replace **xxx** by a reference to the productListItems object that is part of the event that triggers the journey.
First, delete **xxx** in your HTML code first.
In the left menu, click **Contextual attributes**. This context is passed to the message from the journey.
You'll then see this. Click the arrow next to **Journey Orchestration** to drill deeper.
Click the arrow next to **Events** to drill deeper.
Click the arrow next to `--demoProfileLdap--PurchaseEvent` to drill deeper.
Click the arrow next to **productListItems** to drill deeper.
Click the **+** icon next to **Name** to add it to the canvas. You'll then have this. You now need to select **.name** as indicated in the below screenshot, and then you should remove **.name**.
You'll then have this. Click **Save**.
You'll be back in the Email Designer now. Click **Save** to save your progress.
Next, go to **Content Components** and drag and drop an **HTML** component on the seventh row. Click the HTML component and then click **Show the source code**.
In the **Edit HTML** popup, paste this HTML:
`
Subtotal Delivery charge (included)
xxx 5
Total including VAT
xxx
`
There are 2 references of **xxx** in this HTML code. You now have to replace each **xxx** by a reference to the productListItems object that is part of the event that triggers the journey.
First, delete the first **xxx** in your HTML code.
In the left menu, click **Contextual Attributes**.
Click the arrow next to **Journey Orchestration** to drill deeper.
Click the arrow next to **Events** to drill deeper.
Click the arrow next to `--demoProfileLdap--PurchaseEvent` to drill deeper.
Click the arrow next to **Commerce** to drill deeper.
Click the arrow next to **Order** to drill deeper.
Click the **+** icon next to **Price Total** to add that to the canvas.
You'll then have this. Now delete the second **xxx** in your HTML code.
Click the **+** icon next to **Price Total** again to add that to the canvas.
You can also add the field **Currency** from within the **Order** object onto the canvas, as you can see here. When you're done, click **Save** to save your changes.
You'll then be back in the Email Designer. Click **Save** again.
Go back to the message dashboard by clicking the **arrow** next to the subject line text in the top-left corner.
Click the arrow in the top left corner to go back to your journey.
Click **Ok** to close your email action.
Click **Publish** to publish your journey.
Click **Publish** again.
Your journey is now published.
## 10.1.5 Update your Adobe Experience Platform Data Collection Client property
Go to [Adobe Experience Platform Data Collection](https://experience.adobe.com/launch/) and select **Tags**.
This is the Adobe Experience Platform Data Collection Properties page you saw before.
In module 0, Demo System created two Client properties for you: one for the website and one for the mobile app. Find them by searching for `--demoProfileLdap--` in the **\[Search]** box. Click to open the **Web** property.
Go to **Data Elements**. Search and open the data element **XDM - Purchase**.
You'll then see this. Navigate to the field **\_experience.campaign.orchestration.eventID** and fill out your eventID here. The eventID to fill out here, is the eventID you created as part of exercise 10.1.2. Click **Save** or **Save to Library**.
Save your changes in your Client property, and then publish your changes by updating your development library.
Your changes are now deployed and can be tested.
## 10.1.6 Test your order confirmation email using the demo website
Let's test the updated journey by buying a product on the demo website.
Go to . After logging in with your Adobe ID, you'll see this. Click your website project to open it.
On the **Screens** page, click **Run**.
You'll then see your demo website open up. Select the URL and copy it to your clipboard.
Open a new incognito browser window.
Paste the URL of your demo website, which you copied in the previous step. You'll then be asked to login using your Adobe ID.
Select your account type and complete the login process.
You'll then see your website loaded in an incognito browser window. For every demonstration, you'll need to use a fresh, incognito browser window to load your demo website URL.
Click the Adobe logo icon in the top left corner of your screen to open the Profile Viewer.
Have a look at the Profile Viewer panel and the Real-time Customer Profile with the **Experience Cloud ID** as the primary identifier for thi currently unknown customer.
Go to the Register/Login page. Click **CREATE AN ACCOUNT**.
Fill out your details and click **Register** after which you'll be redirected to the previous page.
Add any product to your cart, and go to the **Cart** page. Click **Proceed to checkout**.
Next, verify the fields on the checkout page and click **Checkout**.
You'll then receive your order confirmation email within seconds.
You have finished this exercise.