Personalizing Experiences with Contentstack

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 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:

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:

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

• Experience Rules