Ninetailed
Search
⌃K

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. 1.
    Install Contentful App
  2. 2.
    Create a personalized variant
  3. 3.
    Install React SDK
  4. 4.
    Get visitor profile
  5. 5.
    Personalize components

Step 1: Install Contentful App

Install our Contentful App from the official marketplace.
  1. 1.
    Select the space and environment you want to install the app.
  2. 2.
    Authorize the app access.
  3. 3.
    Link your Contentful account to Ninetailed.
  4. 4.
    Create an organization in Ninetailed.
  5. 5.
    Set up the content types for dynamic content personalization.
  6. 6.
    Confirm your settings and install the app. 🙃
Find more information about the install process in the Installation section.

Step 2: Create a Personalized Variant

A variant is a relevant content for a specific audience. To create a variant in:
  1. 1.
    Edit or create an entry of any content type which was set up in the install process.
  2. 2.
    Create a new variant for the entry and update the content.
  3. 3.
    Create a new audience and publish it.
  4. 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.js-react module via npm or yarn.
yarn add @ninetailed/experience.js-react

2. How to use

This is what the configuration of @ninetailed/experience.js-react looks like:
import React from 'react';
<NinetailedProvider
clientId={YOUR_NINETAILED_API_KEY}
>
//... Your Application Components
</NinetailedProvider>
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:
import React, { useEffect } from 'react';
import { useNinetailed } from '@ninetailed/experience.js-react';
export const Page = () => {
const { page } = useNinetailed();
useEffect(() => {
page();
}, [page]);
// ... your Page component
};
Call the page method each time your application routes a visitor, including the first page visit.

Step 5: Render Experiences

To show the personalization or experiment variants in the frontend you need to wrap the components with the <Experience> component from the React SDK.
import React, { useState, useEffect } from 'react';
import { Experience, useAnalytics } from '@ninetailed/experience.js-react';
import { getPageFromContentful, myExperienceMapper } from 'utils'
import Headline from 'components/Headline';
export const Page = () => {
// ...page view effect from Step 4
// fetch the content
const [page, setPage] = useState(null);
useEffect(() => {
// Fetch your content from Contentful as before, just make sure the variants will get fetched.
const { page } = getPageFromContentful();
setPage(page);
}, [setPage]);
return (
<>
<Experience
id={page.headline.sys.id}
component={Headline}
// See the "Utility Libraries" page for information on mapping experiences
experiences={myExperienceMapper(page.headline.nt_experiences)}
{...page.headline}
/>
{/* ...the rest of your page */}
</>
)
};
See the Rendering Personalization and Experiments