---
title: Use case 2 - Registration for open day
slug: adu/use-case-2-registration-for-open-day
docTags: 
createdAt: 2024-04-02T23:14:43.547Z
---

In this exercise you will learn how your profile attributes can be ingested from online forms and used to enrich the anonymous browsing data.  You will learn how Adobe Journey Optimizer can trigger journeys in real time from events happening online.  In this case the form submission but a journey can be triggered from any inbound event, originating on the web or any other connected channels.  

You will experience as a customer:

- Registering for open day on the site

You will learn as a marketer:

- How to configure content in Adobe Journey Optimiser
- How to build and test a journey triggered from an inbound event 

Once the anonymous customer becomes known, we will be able to stitch the anonymous profile to any known profile information we have, and we'll be able to retarget the customer across devices.

## Submit the form

Return to the browser window with your website open from use case 1.

1. Click on the **Register Now** button in the banner that is displayed on the home page.  (if you didn't complete exercise 1, go to [https://www.adelaide.edu.au/openday/](https://www.adelaide.edu.au/openday/))

2. Enter your **customer profile** email address and phone number.  Note: Don't provide your own details here, this is a demo instance.  

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/zhWuFNV5F9NHz-805Q4MN_image.png)

:::hint{type="info"}
In future forms like this one will be designed in and delivered by Adobe Experience Manager Forms.  Managing these forms is not covered in this lab, but consolidating all data collection forms will help to ensure consistency and alignment across marketing initiatives and faculties.   For the purpose of the lab we have implemented data collection into Adobe Experience Platform from your pre-existing eloqua form which is already on the page.  You'll notice the button text has changed from "submit" to "send to AEP", this is us intercepting the form submission so we can route it to Adobe instead of really registering for your open day.  
:::

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/-LmuOYSWWq-83YNxXETr8_image.png)

Submitting the form has sent an event to Adobe CDP containing both the ECID and the EMAIL address.    This event can be used to trigger a journey.   In this case the journey simply sends a confirmation email but we could also imagine it triggering a journey including a complex sequence of actions.   

You will see the form data has *also* been stored as attributes against the customer profile.   These can be used for segmentation to further understand your prospect.   The profile has also qualified into some additional audiences (note, these might be delayed slightly since they are streaming audiences not edge audiences).   Refresh the profile viewer on the site or refresh the profile screen within the Adobe Experience Platform UI to see the updates. 

::Image[]{src="https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/0G85GlCRfvuy1aRFQSyPN_image.png" size="78" width="619" height="935" position="flex-start" showCaption="false"}

:::hint{type="info"}
For the next few exercises we will use Adobe Journey Optimizer.  Switch the UI using the product switcher in the top right.  

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/7LU-TIVXd8dJGX1_sW54V_image.png)


:::

## Content Management

### Assets

Click to open the Asset explorer under **Content Management **in the left hand navigation.  Here you can manage the assets in your Adobe Experience Manager instance.   

Click on the ADU folder to see the assets available.  You can add new assets from your local machine if you want. 

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

Select an asset and click on **details**.   Here you can see information about the asset, including smart tags, versions, comments and tasks.  You can even edit the asset directly in the Journey Optimizer UI using Adobe Express.  

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

### Content Fragments and Templates

**Templates** can be created to store partially configured messages for any supported channel: Email, SMS, Push, InApp or Direct Mail.   Once leveraged in a Campaign or Journey message the template is disconnected and updates to the template will not impact the .  

**Fragments **can be created to store partially configured HTML or Personalisation Expressions.  Fragments can then be included in templates or messages in Campaigns or Journeys.  Updating a fragment will update the content everywhere it is used.  For this reason you can explore where the fragment has been referenced before making any updates.  

Create a new template by clicking on the **Create Template** button. 

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

Give your template a **name** - something unique to you so you can distinguish it from your colleagues.   Select **Channel** as email and **Type** as HTML.  

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

We can create templates from existing samples or templates, or you can build your own, either through the visual editor or by direct access to HTML code.  For this exercise choose  to **Design from scratch.**

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

On the left hand side you have structural and content Components which control the layout of your email.  

Drag 2x **1:1 column **structures into your content, add a **2:1 column** right then another **1:1 column.**

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

In the second component slot, drag across an **image **content block.   

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

In the third component slot, drag across a **text **content block.  

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

Update the style settings for the text block from the panel on the right hand side.  You can update the font size, color and padding as desired. 

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

Now let's use some pre-existing fragments to add a view online link and footer to the template.  On the left change from the component menu to the fragment menu.   Drag the **Open in Browser **and the **SecurFinancial Header **and** Footer **fragments to the top and bottom component slots.  

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

For the image banner, we can select an existing asset from the **Asset repository  **or we can use the native integration with **Adobe Firefly** to generate an image based on text prompts.   Click on the image component and then stars icon to open the **AI Assistant. **



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

Add a text prompt for your banner and set the parameters for height and width to 200x800 respectively.   Set the other options as desired.  

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

Click** Generate**.  It will take a minute to generate some image options.   Click the **Preview **button to open the viewer.

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

Here you can review the images generated and choose whether to modify the prompt or continue with one of the images selected.  

Once you're decided which image to use,  click **select **

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

Click **Next **to upload the image to the asset repository.  Select to store the image in the **FSI **folder. 

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

Click **Import **to add your image to the content.

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

Lastly, let's personalize the content by adding the customer firstname.  Click in the text content and select to **Add Personalisation. **

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

In the personalisation editor, in the **Profile Attributes **tab, search for **first.   **You'll see a few different first name fields, this is due to the schema design in our sandbox.  select the **First Name **field with **Profile Attributes > Person >  Full Name** underneath.  This is the schema field we want to use.  Click the **+ icon** to insert the field.   Then click **Save. **

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

The personalisation field is now inserted into your content.  

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

Click to **Save **your template.   

## Build a Journey

A journey is used to send the confirmation email when submitting the form.  The journey is triggered by the experience event and the message sent can use any of the pre-existing profile attributes or contextual attributes submitted as part of the event for personalisation.

To create a new journey, click on **Journeys **in the left hand navigation under **Journey Management**.  Click the **Create Journey** button on the right hand side.  

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

Give your journey a **name** - something unique so you can distinguish it from your collegues in the class. 

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

We're going to trigger the journey from an event.  Every event that is received via streaming ingestion by Adobe Experience Platform can trigger a journey, but to limit the number of options shown in the journey builder only events that have been defined as journey events will appear.  The **openDayRegistration** journey event has been pre-configured for you.  Drag the event into the canvas.  You can see how it was defined in the properties on the right hand side. 

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/0WAWexmGNJdqJ9-ThOAi-_image.png)

Next we want to add an **Email **action. Drag it into the canvas and connect it after the event.   Set in the Email properties the **Category **to **Transactional **and the **Email Surface **to **transactionalMessages.   **

Then click on **Edit Content **to update the content of the email.

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

Add a **subject line** and click **Edit email body **to configure the body of the email.  

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

Choose to start from the saved template **ADU - Email Template**.

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

Once the preview has loaded.  Select to **Use this template. **

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

Update the content of the email as desired.  You can add personalisation by clicking the person icon in the style bar. 

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

You can add attributes from the profile or from the event (under contextual attributes).  To add the firstname, search for "first" under profile attributes and include the **person -> name -> firstName **attribute.   

:::hint{type="info"}
This is a shared demo instance with many similar attributes defined, a customer instance won't have so many duplicated attributes and will be easier to search for the attribute you are interested in. 
:::

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

Once you're happy with the content, click **Save **then return to the journey using the **Arrows **on the top left.   

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

Your journey should look like this:

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

## Test your journey

Before setting your journey live you can test it directly through the UI.  Click on the button to activate **Test mode. **

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

Once in test mode you can simulate an inbound event by clicking on the **Trigger an event **button.

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

For the event simulation, change to **Code view **and copy the following event JSON into the window.  Swap the **ECID** and the **Email** to match those from your profile (use the profile viewer on the website)

```javascript
{
	"eventType": "web.registration",
	"web": {
		"webPageDetails": {
			"URL": "https://www.adelaide.edu.au/openday/"
		}
	},
	"_adobedemoamericas275": {
		"identification": {
			"core": {
				"ecid": "41180799773650620142859230385925785600",
				"email": "gillies+20240430@adobe.com"
			}
		}
	}
}
```

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

Click **Send **to trigger the test.  

You'll see the line in the journey turn green and you should get a notification saying the event was sent succcessfully. 

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