Skip to main content

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

Personalization Visualizer

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 returned customerSegment value will be stored in a Context field. This Component will not run if no externalId is passed.
  • Get Customer Traits from B2B CDP. This Component runs an externalId against a separate CDP for B2B clients only. If the isB2B flag is passed through with the externalId, this Component will run instead of the previous one and provide us with customer traits for the B2B customer browsing the site. The returned customerSegment 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:
FieldValue
Connection Codecontentstack-connection
Connection NameContentstack Connection
ConnectorContentstack
Contentstack Endpointhttps://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:
FieldValue
Connection Codetwilio-segment-connection
Connection NameTwilio Segment Connection
ConnectorSegment
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:
FieldValue
Component Codecontentstack-announcement
Component NameAnnouncement - Contentstack
No RulesUnchecked
Component TypeContentstack - 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.
FieldForm TabValue
ConnectionMainContentstack Connection
Content ModelMainAnnouncements
EnvironmentMainproduction
Searchable FieldsMaintitle, message
Display TemplateMain
<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:
FieldValue
Component Codecustomer-traits
Component NameGet Customer Traits from Twilio Segment
No RulesChecked
Component TypeSegment - 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.
FieldForm TabValue
ConnectionMainTwilio Segment Connection
Customer Session IdMainGet value from... Context Field
externalId
Maximum no. of traits to be returned per customerMain10
Trigger ExpressionConditions!contextField('isB2B') && contextField('externalId')
Context Field EnrichmentsUpdate ContextContext Field: customerSegment
Expression: response.traits.customerType

Business User Instructions

To add Experience Rules that use the customerSegment Context Field in the Announcements - Contentstack Component:

  1. In the top navigation, click Manage Experiences, and then click Experiences. The Manage Experiences page appears.
  2. Select the Announcements - Contentstack Component and ensure that a default rule exists.
  3. Click Add Experience Rule.
  4. Enter a Rule ID and a Rule Name and set Priority to a value lower than that of the default rule.
  5. In the Experience area, under Real-time Context Evaluation, click Edit Filter. The Edit Filter wizard appears.
  6. Drag the Equal To condition onto the canvas.
  7. With that condition selected, for Field, select customerSegment, and select a value such as millennial.
  8. Click Submit.
  9. Under Target Experience click Add an item and select an Announcement record from the Contentstack Records dropdown.
  10. Click Submit.

References