Orchestrating Personalized Experiences
Connecting content in your headless CMS with customer data in your CDP
In the following recipe, we will create a personalized experience using content from Contentstack (CMS), contextual information about our customers, and customer profile data from Twilio Segment (CDP).
Overall Orchestration Flow
Here is the flow that we will be modeling in the DX Engine:
- A known customer has logged in to the website
- The customer browses the home page with a personalized announcement banner
Mapping Out DX Engine Elements
There are two key Orchestration Components involved in this recipe: Get Customer Traits from Segment and Announcement - Contentstack. The others fill out the example with additional depth. Not pictured are the Experience Rules which will determine which content is delivered to our website.
When a customer browses the page anonymously, we won't have any externalId to pass through to the DXO as Context. We may have device or location.
If there is no Context, a default Experience Rule will be invoked in which a business user has selected a particular announcement banner to display for a general audience.
If there is Context data provided when the Experience API is called, then the relevant Experience Rule will be invoked and announcement banners that have been selected for audiences matching those contextual criteria will be displayed instead.
Let's describe the Components and Contexts in the diagram above.
- Get Customer Traits from Segment. This Component takes the
externalId
that is passed through as Context and runs a query against the Twilio Segment CDP to find customer traits related to that id. The returnedcustomerSegment
value will be stored in a Context field. This Component will not run if noexternalId
is passed. - Get Customer Traits from B2B CDP. This Component runs an
externalId
against a separate CDP for B2B clients only. If theisB2B
flag is passed through with theexternalId
, this Component will run instead of the previous one and provide us with customer traits for the B2B customer browsing the site. The returnedcustomerSegment
value will be stored in a Context field. - Announcement - Contentstack. This Component is a selector type Component that connects to Contentstack and retrieves Announcement content model data.
- Mapper - Announcement - Contentstack. This Component is an Object Mapper type Component that maps the required properties from the selector above into a more streamlined schema for front end consumption.
DX Engine Configuration Details
You will need to configure a connection to Elastic Path Commerce Cloud. For the mock calls to external systems for inventory and cartIds, we have not created a connection and are just calling the web service directly from the Components. You would want to create a connection for your own external systems, whether that’s an OMS or ERP, etc.
Below are instructions on how to configure the Elastic Path Commerce Cloud connection and each of the Components discussed above.
Create a Connection to Contentstack
- Navigate to the Connections page (Settings --> Connections).
- Click the Configure Connection button
- Enter the following and click Submit:
Field | Value |
---|---|
Connection Code | contentstack-connection |
Connection Name | Contentstack Connection |
Connector | Contentstack |
Contentstack Endpoint | https://cdn.contentstack.io/v3 |
Stack API Key | {{API Key}} |
Token | {{Token}} |
Create a Connection to Twilio Segment
- Navigate to the Connections page (Settings --> Connections).
- Click the Configure Connection button
- Enter the following and click Submit:
Field | Value |
---|---|
Connection Code | twilio-segment-connection |
Connection Name | Twilio Segment Connection |
Connector | Segment |
Segment Endpoint | {{Endpoint}} |
Access Token | {{Access Token}} |
Space ID | {{Space ID}} |
Create a Component to retrieve the announcements
- Navigate to the Experience Components page (Manage Experiences --> Experience Components)
- Click the Add Experience Component button.
- Enter the following and click Submit:
Field | Value |
---|---|
Component Code | contentstack-announcement |
Component Name | Announcement - Contentstack |
No Rules | Unchecked |
Component Type | Contentstack - Static Record List |
The DX Engine will create and prepare the Component for further configuration. You should see the new component appear in the Component listing.
- Click Edit.
- Enter the following and click Submit.
Field | Form Tab | Value |
---|---|---|
Connection | Main | Contentstack Connection |
Content Model | Main | Announcements |
Environment | Main | production |
Searchable Fields | Main | title , message |
Display Template | Main |
<div style="display:inline;text-align:left;">
<div style="display:inline;text-align:left;margin-right:20px;"><img src="https://icons.iconarchive.com/icons/graphicloads/100-flat/256/announcement-icon.png" height="50px" class="fr-fic fr-dii"></div>
<div style="vertical-align:top;display:inline-block;">
<div style="font-weight:600;font-size:1.5rem;margin-bottom:10px;">{{title}}</div>
<div style="font-weight:400;font-size:1.2rem;margin-bottom:10px;">{{message}}</div>
</div>
</div>
Create a Component to retrieve the customer segment
- Navigate to the Experience Components page (Manage Experiences --> Experience Components)
- Click the Add Experience Component button.
- Enter the following and click Submit:
Field | Value |
---|---|
Component Code | customer-traits |
Component Name | Get Customer Traits from Twilio Segment |
No Rules | Checked |
Component Type | Segment - Get Traits |
The DX Engine will create and prepare the Component for further configuration. You should see the new component appear in the Component listing.
- Click Edit.
- Enter the following and click Submit.
Field | Form Tab | Value |
---|---|---|
Connection | Main | Twilio Segment Connection |
Customer Session Id | Main | Get value from... Context Field externalId |
Maximum no. of traits to be returned per customer | Main | 10 |
Trigger Expression | Conditions | !contextField('isB2B') && contextField('externalId') |
Context Field Enrichments | Update Context | Context Field: customerSegment Expression: response.traits.customerType |
Business User Instructions
To add Experience Rules that use the customerSegment
Context Field in the Announcements - Contentstack Component:
- In the top navigation, click Manage Experiences, and then click Experiences. The Manage Experiences page appears.
- Select the Announcements - Contentstack Component and ensure that a default rule exists.
- Click Add Experience Rule.
- Enter a Rule ID and a Rule Name and set Priority to a value lower than that of the default rule.
- In the Experience area, under Real-time Context Evaluation, click Edit Filter. The Edit Filter wizard appears.
- Drag the Equal To condition onto the canvas.
- With that condition selected, for Field, select
customerSegment
, and select a value such asmillennial
. - Click Submit.
- Under Target Experience click Add an item and select an Announcement record from the Contentstack Records dropdown.
- Click Submit.