Skip to main content

Personalizing on Contentstack Data

Optimize Deprecation

Uniform Optimize has been deprecated and replaced by Context, a more powerful and flexible personalization solution. Optimize is not being discontinued at this time, but it will not receive updates or new features.

We do not recommend starting a new project with Optimize. If you have an existing project that uses Optimize, you can upgrade your project to Context at no cost using our upgrade guide. If you have any issues with this process you can contact our team.

Once you have installed Uniform to Contentstack, the next step is to get the Contentstack content into your application and start personalizing it.

Use the contentstackOptimizeListReader function to allow the application to read Contentstack entry data and convert it to a format that Uniform Optimize understands.

Install the Package

Install the library:

npm install @uniformdev/optimize-tracker-contentstack

Fetch the Data From Contentstack

To show how it works, let us assume we have a Contentstack JavaScript SDK query that retrieves a single page entry by matching on the slug field.

// https://github.com/contentstack/contentstack-javascript
import contentstack from 'contentstack';

export const getPageBySlug = async (preview: boolean, slug: string) => {
const config = {
api_key: 'your_contentstack_api_key',
delivery_token: 'your_contentstack_delivery_token',
environment: 'your_contentstack_environment',
};
const contentstackClient = contentstack.Stack(config);
const query = contentstackClient
.ContentType('page')
.Query()
.includeCount()
.includeContentType()
.includeReference(['components', 'components.unfrm_opt_p13n_list'])
.toJSON();
const result = await query.where('url', slug).find();

// result is an array where -
// result[0] == entry objects
// result[result.length-1] == entry objects count included only when .includeCount() is queried.
// result[1] == schema of the content type is included when .includeContentType() is queried.

const [first] = result[0];
return { ...first, _content_type_uid: 'page' };
};

The page content type has a components field, a reference field to other content entries created in Contentstack. One of these components also contains a reference field, named unfrm_opt_p13n_list, that contains references to content variations.

For example, one of the components in the components field is named Personalized Hero. It contains a field named unfrm_opt_p13n_list (friendly name Hero Options), a reference field containing references to all possible Hero content entries that are eligible for personalization.

The page query defined in the code sample above uses the .includeReference() function with both the components field and unfrm_opt_p13n_list field so that Contentstack will deliver "expanded" content for those references fields.

Use Contentstack Data With the Personalize Component

The unfrm_opt_p13n_list field contains references to personalizable content entries. To read the Contentstack response entries and convert them into the format expected by the Personalize component, import the contentstackOptimizeListReader function and pass the unfrm_opt_p13n_list field data into the function. The result can be passed to the variations field of the

component.

import { contentstackOptimizeListReader } from '@uniformdev/optimize-tracker-contentstack';
import { Personalize } from '@uniformdev/optimize-tracker-react';
import { Hero } from './Hero';

export const PersonalizedHero: React.FC<Entry<PersonalizedHeroFields>> = ({ unfrm_opt_p13n_list }) => {
const variations = contentstackOptimizeListReader(unfrm_opt_p13n_list);
return (
<Personalize
name="Personalized Hero"
variations={variations}
trackingEventName="heroPersonalized"
loadingMode={<div>Loading component goes here</div>}
component={Hero}
/>
);
};
tip

In the example we used React, but the contentstackOptimizeListReader function is framework-agnostic.