Quick Start for Developers (Next.js)
This guide describes the steps you need to follow to integrate Ninetailed into your website with Next.js.
This guideline walks you through setting up and integrating Contentful, Ninetailed, and Next.js. In this guide, you'll find:
- How to set up Ninetailed App on Contentful
- How to install the SDK for Next.js
- How to use Ninetailed Profiles in Next.js
- Steps you need to follow to personalize components in Next.js
- How to integrate Google Analytics with Ninetailed
- Next steps and further integrations
- 1.
- 2.Select the organization and space you want to install the app.
- 3.Authorize the app access and continue installing Ninetailed.
- 4.
- 5.Get your API Key. You can find your API Key in the Ninetailed account dashboard (You will need your API Key in the next steps):
Ninetailed API key
In this step, you'll find the steps you need to follow to add Ninetailed to Next.js. With the Next.js SDK, you can add dynamic content for personalization to any component.
Install the
@ninetailed/experience.js-next module via npm or yarn.Install module via npm:
npm install @ninetailed/experience.js-next
Install module via yarn:
yarn add @ninetailed/experience.js-next
This is what the configuration of
@ninetailed/experience.js-next looks like:import React from 'react';
import {
NinetailedProvider
} from '@ninetailed/experience.js-next';
export const App = () => {
return (<>
<NinetailedProvider clientId={YOUR_API_KEY}>
<YourAppCode />
</NinetailedProvider>
</>);
}
Ninetailed manages visitor profiles automatically, which gets updated via
page(), track(), identify() events. Ninetailed uses profiles internally to calculate your personalizations and render merge tags in your rich text components.type Profile = {
/**
* An id which can get set by you - e.x. CRM id.
*/
id?: string;
/**
* This is an internal identifier to find the visitor in our system.
*/
anonymousId: string;
/**
* The calculated audiences the visitor is in.
*/
audiences: string[];
/**
* Tratits you have set via identify(id: string, traits: Traits) calls.
*/
traits: Traits;
/**
* The current location of the user.
*/
location: Location;
};
Traits is a JSON dataset that can be set by you through identify calls. Whenever you send new traits to our system we deeply merge the traits of the user. "Traits" are commonly used in merge tags to build inline personalization like const headline = Hey ${profile.traits.firstname}👋.type Traits = {
[key: string]: string | number | boolean | Traits;
};
// example
const traits: Traits = {
"firstname": "Max",
"address": {
"street": "Allee 33"
},
"company": "Big fat Company"
}
Location is the last seen location of the user. You would normally use this to merge it into Richtext.type Location = {
coordinates?: {
latitude: number;
longitude: number;
};
city?: string;
postalCode?: string;
region?: string;
regionCode?: string;
country?: string;
continent?: string;
timezone?: string;
};
The
useProfile hook makes it really easy for you to access the profile of the visitor.import { useProfile } from '@ninetailed/experience.js-next';
The hook delivers the
profile and the loading and error state.const Greeting = () => {
const {loading, profile, error} = useProfile();
return <p>Hey {profile.traits.firstname}, nice weather in {profile.location.city}!</p>
}
As a Ninetailed App, we need to know about the visitor currently viewing the website to personalize the content. Our customer data platform is in charge of this information. In any case, you need to provide events about the user to our API to generate a profile over time.
In order to make this process as simple as possible, Ninetailed provides the
page(), track(), and identify() methods which can be used via the useAnalytics hook or the window object of the browser, for example, in a Tag Manager.The
useAnalytics hook provides the event tracking functions inside your React components. This is very handy if you want to send events from your code.import React from 'react';
import { useNinetailed } from '@ninetailed/experience.js-next';
const CallToAction = () => {
const { track, page, identify } = useNinetailed();
return (<button
type="button"
onClick={() => { track('built new Rick'); }}
>
build new Rick
</button>);
}
Page View
Page views should be sent on every page change. Our SDK populates all data needed as,
referrer, url, user-agent and other properties to be consumed by the API.type Page = () => Promise<void>;
Track
Track events are used to describe special actions the user did, like
signup or registered_for_newsletter.type Track = (event: string) => Promise<void>;
Identify
By identifying a user you add a custom id to the profile, like a Hubspot id or an id from your internal database. Even more important, you can set traits about this customer, like the
firstname, age or anything you want to personalize the content even more.type Identify = (uid: string, traits: Traits) => Promise<void>;
The Analytics SDK also add the
page(), track() and identify() functions to the window object. That way you can also access them from a Tag Manager. We recommend sending page views directly from the code as soon as the SDK is initialized so the personalizations are not delayed.To make personalizing your components as seamless as possible Ninetailed provides a
<Personalize /> component that wraps the component you'd like to personalize. It automatically detects the properties needed from the wrapped component and also applies a variants property.import React from 'react';
import { Personalize } from '@ninetailed/experience.js-next';
type HeadlineProps = {
text: string;
}
const Headline: React.FC<HeadlineProps> = ({ text }) => {
return <h1>{text}</h1>
};
export const Page = () => {
// These variants normally come from Contentful, just inlined here to see the structure ]
const variants = [
{
id:"variant-id",
text: "We build super nice websites for enterprise companies!",
audience: {
id : "enterprise-audience-id" // variants have an audience id, this id is usualy from the Ninetailed SDK
}
},
]
return (<Personalize
component={Headline}
variants={variants}
text="We build websites for everbody" // this is the baseline for user which are not in a audience.
/>);
};
The Ninetailed Contentful App allows your content creators to use inline personalization in Richtext fields. Inline personalization is done by adding embedded entries into the text. Also, using merge tags makes it very easy to use inline personalization.
import React from 'react';
import { documentToReactComponents, Options } from '@contentful/rich-text-react-renderer';
import { INLINES } from "@contentful/rich-text-types";
import { MergeTag } from '@ninetailed/experience.js-next';
const richTextOptions = (links: HeroHeadlineLinks): Options => {
const entryMap = new Map();
for (const entry of links.entries.inline) {
entryMap.set(entry?.sys.id, entry);
}
return {
renderNode: {
[INLINES.EMBEDDED_ENTRY]: (node) => {
const id = node.data.target.sys.id;
if (id) {
const mergeTag = entryMap.get(id);
return <MergeTag id={mergeTag.id}/>;
}
return <>{`${node.nodeType} ${id}`}</>;
}
}
};
};
const Greeting = ({ text }) => {
return documentToReactComponents(text.json, headlineOptions(text.links))
};
By integrating Google Analytics with the Ninetailed, you can send Ninetailed events to Google Analytics for analysis.
To use, install the package, include it in your project, and initialize the plugin with
NinetailedProviderimport { NinetailedProvider } from '@ninetailed/experience.js-next';
import { NinetailedGoogleAnalyticsPlugin } from '@ninetailed/experience.js-plugin-google-analytics'
<NinetailedProvider plugins={
[
new NinetailedGoogleAnalyticsPlugin({
actionTemplate: 'User has seen personalized component:{{Audience.id}}',
labelTemplate:'{{ baselineOrVariant }}: {{ component.__typename }} - {{ component.id }}',
})
]
}
>
After following these steps, you'll have Ninetailed integrated with Contentful that is ready to start creating personalized content for your audiences.
Find more information about how to create personalized content for your audiences in the Personalized Content and Audience Builder documents.