Rendering Experiences
Using the Ninetailed SDK to render Experiments and Personalizations.
The Ninetailed React SDK provides an
<Experience /> component that wraps the component you use to render your content. It automatically detects the properties needed from the wrapped component. The experiences prop accepts Ninetailed Experience content that has been appropriately transformed by the ExperienceMapper available from our Utility Libraries.If you're using Merge Tags , the
<MergeTag> component allows you to render any property of the current visitor's profile. Use this alongside the Ninetailed Merge Tag content type in your CMS to allow content editors to dynamically personalize inline content.Prop | Description |
|---|---|
id | The CMS entry ID of the baseline |
component | The React component that your baseline and variants will use to render |
experiences | An array of experience CMS entries mapped using the ExperienceMapper methods available from our Utility Libraries |
{...baseline} | Props of any name that correspond to the props your component expects to receive |
passthroughProps | (Optional) An object containing key-value pairs of props that should be sent to the component irrespective of the selected experience variant |
loadingComponent | (Optional) A custom component to show prior to the <Experience> component selecting a variant. This defaults to a transparent version of your component using the baesline props. |
This example shows working with hardcoded JSON data and our JavaScript Utility Library for demonstrative purposes. Consult the Utility Libraries documentation to know what data to fetch from your Content Source and how to transform Experience entries to the format required by the
<Experience> component.components/Headline.js
1
type HeadlineProps = {
2
text: string;
3
}
4
5
const Headline = ({ text }: HeadlineProps) => {
6
return <h1>{text}</h1>
7
};
8
9
// The baseline and your experiences are normally fetched from your CMS
10
// Consult the Utility Libraries documentation for information on how to map experiences
11
const baseline = {
12
id: baselineEntry.id
13
text: "This is the baseline text"
14
}
15
16
// Experiences must be in this format prior to being mapped by the ExperienceMapper
17
const experiences = [
18
{
19
id: "experience.id"
20
name: "experience.name"
21
type: "nt_personalization" // Will either be 'nt_personalization' or 'nt_experiment'
22
config: {...} // A JSON config object with traffic allocation, distribution, and component information. Pull all properties of this field from the CMS
23
audience: {
24
id: "experience.audience.id"
25
},
26
variants: [
27
{
28
id: "variantId", // The CMS system ID of each variant must be present as a top-level property
29
text: 'This is the variant text'
30
},
31
],
32
}
33
]
page.js
1
// or '@ninetailed/experience.js-next', '@ninetailed/experience.js-gatsby'
2
import { Experience } from '@ninetailed/experience.js-react';
3
import { ExperienceMapper } from '@ninetailed/experience.js-utils'
4
5
export const Page = () => {
6
const mappedExperiences = experiences
7
.filter((experience) => ExperienceMapper.isExperienceEntry(experience))
8
.map((experience) => ExperienceMapper.mapExperience(experience))
9
10
return (
11
<Experience
12
{...baseline} // Supply your baseline content as direct props
13
id={baseline.id} // An id prop is required
14
component={Headline}
15
experiences={mappedExperiences}
16
/>);
17
};
Ninetailed allows you to embed content placeholders into Rich Text Fields that can then be rendered client-side using information from the current visitor's profile. These dynamic placeholders are called Merge Tags.
The React, Next.js and Gatsby SDKs provide a
<MergeTag /> component. After Merge Tag entries are set up in your CMS, this component allows you to declaratively render data dynamic to each visitor's profile. Provide the name of the profile property using dot notation as the id of the component.import React, { useState, useEffect } from 'react';
// or `@ninetailed/experience.js-next', @ninetailed/experience.js-gatsby'
import { MergeTag } from '@ninetailed/experience.js-react';
const Greeting = () => {
return <h2>Hey <MergeTag id="traits.firstname" />👋, how is your day?</h2>
};
You can populate the
id prop of Merge Tag by using the field value set on the Merge Tag entry from the content source. This allows you to render any Merge Tags embedded in rich text fields that content authors have added.Contentful
components/RichText.js
import React from 'react';
import { INLINES } from '@contentful/rich-text-types';
import { documentToReactComponents} from '@contentful/rich-text-react-renderer';
// or `@ninetailed/experience.js-next', @ninetailed/experience.js-gatsby'
import { MergeTag } from '@ninetailed/experience.js-react';
export const renderRichText = (richTextDocument) => {
return documentToReactComponents(richTextDocument, {
renderNode: {
[INLINES.EMBEDDED_ENTRY]: (node) => {
if (node.data.target.sys.contentType.sys.id === 'nt_mergetag')) {
return <MergeTag id={node.data.target.fields.nt_mergetag_id} />;
}
}
},
});
};
Last modified 2mo ago