Quick Start for Developers
The fastest way to implement Ninetailed in your current tech stack.
This quick start guide will walk you through setting up and integrating Ninetailed with your content source and a Next.js-driven front-end. For details on integrating Ninetailed into other React applications, see our For Developers section.
To find out all the required steps to install our app in your Content Source (such as Contentful or Contentstack), see our Content Sources section:
The Next.js SDK facilitates creating & updating profiles for visitors and chooses the correct experiences and variants of content to serve.
Install the
@ninetailed/experience.js-next module via npm or yarn, as well as the @ninetailed/experience.js-utils Utility Library.npm install @ninetailed/experience.js-next @ninetailed/experience.js-utils
# OR
yarn add @ninetailed/experience.js-next @ninetailed/experience.js-utils
pages/_app.tsx
import {
NinetailedProvider
} from '@ninetailed/experience.js-next';
export const App = ({Component, pageProps}) => {
return (
<div id="my-app">
<NinetailedProvider clientId={YOUR_API_KEY}>
<Component {...pageProps}/>
</NinetailedProvider>
<div/>
);
}
Your API Key can be found within the Ninetailed dashboard at https://app.ninetailed.io, under the left sidebar item
The
<NinetailedProvider> keeps track of the profile of the visitor and makes it available to the rest of the application.Profiles are objects that indicate the Ninetailed Audiences to which they belong. They are updated via
page , track , & identify events sent to the Ninetailed Experience API from your web application or connected data source.Ninetailed's SDKs, like the Next.js SDK being used here, provides the
page, track, and identify methods so that these events can be called by your application. components/CTA.js
import { useNinetailed } from '@ninetailed/experience.js-next';
const CallToAction = () => {
const { track, page, identify } = useNinetailed();
return (
<button
type="button"
onClick={() => { track('My Event'); }}
>
Click Me
</button>
);
}
The Next.js SDK will automatically call the
page method on every route change which will allow you to immediately start using most Audience rule types.To make personalizing or experimenting with your components as seamless as possible, React-based Ninetailed SDKs provide an
<Experience /> component that wraps the React component you want to use to render out the selected content variant. It ingests formatted content from your connected content source to determine what Ninetailed Experience and variant to render.Use the Ninetailed Utility Libraries to ensure that your Experience data are mapped correctly for the
<Experience> component. pages/[[slug]].tsx
import { Experience } from '@ninetailed/experience.js-next';
// Map the experiences attached to the content source data
import { ExperienceMapper } from '@ninetailed/experience.js-utils'
// Your own function to fetch data from your content source
import { fetchContentSourceData } from 'lib/api.js'
type HeadlineProps = {
text: string;
}
const Headline = ({ text }: HeadlineProps) => {
return <h1>{text}</h1>
};
export const getStaticProps({params}) => {
const page = fetchContentSourceData(params.slug)
return {
props: {
page
}
}
}
export const Page = (props) => {
// These experience data will come from your content source
// So the shape of your data will depend on your content
const mappedExperiences = props.page.headline.nt_experiences
// You will likely need to map your experience data before passing to the ExperienceMapper methods
.map((experience) => {
return {
id: experience.id,
name: experience.name
type: experience.nt_type as 'nt_personalization' | 'nt_experiment'
config: experience.nt_config,
audience: {
id: experience.nt_audience.nt_audience_id
},
variants: experience.varaints.map((variant) => {
return {
...variant,
id: variant.id
}
})
}
.filter((experience) => ExperienceMapper.isExperienceEntry(experience))
.map((experience) => ExperienceMapper.mapExperience(experience))
]
return (
<Experience
{...props.page.headline}
id={props.page.headline.contentSourceId}
component={Headline}
experiences={mappedExperiences}
/>
);
};
The example above uses
getStaticProps from Next.js to supply static data to the page and the <Experience> component to select and render Experience client-side, but you have complete control over where and how the <Experience> component renders. See the Rendering Experiences guide for more details.By integrating Google Tag Manager with Ninetailed, you can send experience view data to any analytics systems you configure as Google Tag Manager tags.
Install the package, install the plugin dependency and add the plugin to your
<NinetailedProvider> configuration from Step 1.import {
NinetailedProvider
} from '@ninetailed/experience.js-next';
import NinetailedGoogleTagmanagerPlugin from '@ninetailed/experience.js-google-tagmanager'
export const App = ({Component, pageProps}) => {
return (
<div id="my-app">
<NinetailedProvider
clientId={YOUR_API_KEY}
plugins={[
new NinetailedGoogleTagmanagerPlugin()
]}
>
<Component {...pageProps}/>
</NinetailedProvider>
<div/>
);
This quick start guide will provide you with a Next.js application ready for personalizations and experiments! Now you're ready to define Audiences and Experineces in your content source.
Last modified 2mo ago