Ninetailed
Search…
Ninetailed
What Is Ninetailed
Getting started
Quick Start for Developers (React)
Quick Start for Developers (Next.js)
Content Sources
Getting Started
Contentful
GraphCMS
DatoCMS
Other CMS
Delivery
Getting Started
Javascript
React
Gatsby
Next
Other frameworks
Customer Data
Segment
Analytics
Getting started
Google Analytics
Mixpanel
Account & Setup
Access Your Ninetailed API Key
Audience Builder
Getting Started
Audience
Conditions
Playbooks
Self-Segmentation
Adaptive Content Funnel
Glossary
Ninetailed Website
Powered By
GitBook
Quick Start for Developers (React)
This quick reference guide describes the steps you need to follow to integrate Ninetailed in your website.
In this quick guide you will learn how to integrate Ninetailed in a website using
Contentful
as headless CMS and
React
for the frontend in five steps:
1.
Install Contentful App
2.
Create a personalized variant
3.
Install React SDK
4.
Get visitor profile
5.
Personalize components
Step 1: Install Contentful App
Install our Contentful App from the official marketplace.
1.
Select the space and environment you want to install the app.
2.
Authorize the app access.
3.
Link your Contentful account to Ninetailed.
4.
Create an organization in Ninetailed.
5.
Set up the content types for dynamic content personalization.
6.
Confirm your settings and install the app. 🙃
Find more information about the install process in the
Contentful section
.
Step 2: Create a Personalized Variant
A variant is a relevant content for a specific audience. To create a variant in Contentful:
1.
Edit or create an entry of any content type which was set up in the install process.
2.
Create a new variant for the entry and update the content.
3.
Create a new audience and publish it.
4.
Publish the variant and the entry and you're done. 🙌
Find more information about how to define a new audience in the
Audience Builder
section.
Step 3: Install React SDK
To show the variants in the frontend you need to install Ninetailed React SDK.
1. Install
Install
@ninetailed/experience-sdk-react
module via npm or yarn.
1
yarn
add
@ninetailed/experience-sdk-react
Copied!
2. How to use
This is what the configuration of
@ninetailed/experience-sdk-react
looks like:
1
import
React
from
'react'
;
2
import
{
3
ProfileProvider
,
4
AnalyticsProvider
,
5
}
from
'@ninetailed/experience-sdk-react'
;
6
​
7
export
const
App
=
()
=>
{
8
return
(
<>
9
<
ProfileProvider
>
10
<
AnalyticsProvider apiKey
=
"Your_API_Key"
>
11
<
YourAppCode
/>
12
</
AnalyticsProvider
>
13
</
ProfileProvider
>
14
</>
);
15
}
Copied!
​
Your API Key
can be found in the CMS or Ninetailed dashboard configuration.
Step 4: Get visitor profile
The next step is to fire a page view to get the profile of the visitor.
This is what a page view looks like:
1
import
React
,
{
useEffect
}
from
'react'
;
2
import
{
useAnalytics
}
from
'@ninetailed/experience-sdk-react'
;
3
​
4
export
const
Page
=
()
=>
{
5
const
{
page
}
=
useAnalytics
();
6
useEffect
(()
=>
{
7
page
();
8
},
[
page
]);
9
10
// ... your Page component
11
};
Copied!
Step 5: Personalize components
To show the variants in the frontend you need to wrap the components to be personalized.
1
import
React
,
{
useState
,
useEffect
}
from
'react'
;
2
import
{
Personalize
,
useAnalytics
}
from
'@ninetailed/experience-sdk-react'
;
3
​
4
import
Headline
from
'../Headline.dynamic'
;
5
​
6
export
const
Page
=
()
=>
{
7
// ...page view effect from Step 4
8
9
// fetch the content
10
const
[
page
,
setPage
]
=
useState
(
null
);
11
useEffect
(()
=>
{
12
// Fetch your content from Contentful as before, just make sure the variants will get fetched.
13
const
{
page
}
=
getPageFromContentful
();
14
setPage
(
page
);
15
},
[
setPage
]);
16
17
return
<>
18
<
Personalize component
=
{
Headline
}
variants
=
{
page
.
headline
.
variants
}
text
=
{
page
.
headline
.
text
}
/>
19
{
/* ...the rest of your page */
}
20
</>
21
};
Copied!
Previous
What Is Ninetailed
Next - Getting started
Quick Start for Developers (Next.js)
Last modified
6d ago
Copy link
Contents
Step 1: Install Contentful App
Step 2: Create a Personalized Variant
Step 3: Install React SDK
Step 4: Get visitor profile
Step 5: Personalize components