Ninetailed
Search
K

Getting Started

Installing and adding the Ninetailed Provider to serve Experience information.
This guide will help you integrate Ninetailed's Experience SDK into your application blazingly fast, enabling you to unlock the power of dynamic experiences for your users.

Installation

React
Next
Gatsby
npm install @ninetailed/experience.js-react
# OR
yarn add @ninetailed/experience.js-react
npm install @ninetailed/experience.js-next
# OR
yarn add @ninetailed/experience.js-next
npm install @ninetailed/experience.js-gatsby
# OR
yarn add @ninetailed/experience.js-gatsby

Adding the Ninetailed Provider

Add the <NinetailedProvider> component to the top level of the application, so that the Ninetailed profile can be consumed from any child component.
Your API Key can be found in the Ninetailed Dashboard.
React
Next
Gatsby
import React from 'react';
import MyAppCode from '../myAppCode.jsx';
import {
NinetailedProvider
} from '@ninetailed/experience.js-react';
export const App = () => {
return (<div id="my-app">
<NinetailedProvider
/* required */
clientId="Your_API_Key"
/* The environment defaults to main - set this if you want to use another */
environment="main"
/* Sets needed plugins */
plugins=[]
/* Translate Location names to the set locale - useful for Mergetags */
locale="en-US"
/* The maximum loading time until the fallback (Baseline) will be shown */
requestTimeout={500}
>
<MyAppCode />
</NinetialedProvider>
</>);
}
Note that instantiating the <NinetailedProvider> from the Ninetailed Next.js SDK also hooks into Next.js' page router to automatically call ninetailed.page() on every route change. Do not additionally track them on your own as you would duplicate events.
// pages/_app.jsx
import {
NinetailedProvider
} from '@ninetailed/experience.js-next';
export const App = ({Component, pageProps}) => {
return (<div id="my-app">
<NinetailedProvider
/* required */
clientId={YOUR_API_KEY}
/* required */
clientId="Your_API_Key"
/* The environment defaults to main - set this if you want to use another */
environment="main"
/* Sets needed plugins */
plugins=[]
/* Translate Location names to the set locale - useful for Mergetags */
locale="en-US"
/* The maximum loading time until the fallback (Baseline) will be shown */
requestTimeout={500}
>
<Component {...pageProps}/>
</NinetailedProvider>
<div/>);
}
Add the plugin to your plugins array in your gatsby-config.js|ts file. By using the Gatsby JS plugin there's no need to configure the NinetailedProvider as described for the React and Next.js SDKs.
The plugin automatically calls ninetailed.page() on every route change. Do not additionally track them on your own as you would duplicate events.
plugins: [
...your other gatsby plugins
{
resolve: `@ninetailed/experience.js-gatsby`,
options: {
clientId: 'your api key'
}
}
]

Using the User Profile

The useProfile hook allows you to access the profile of the visitor. The hook delivers the profile, the loading and error state.
// or '@ninetailed/experience.js-next', or '@ninetailed/experience.js-gatsby'
import { useProfile } from '@ninetailed/experience.js-react';
const Greeting = () => {
const { loading, profile, error } = useProfile();
return <p>Hey {profile.traits.firstname}, nice weather in {profile.location.city}!</p>
}

Client Side Methods

Installing the Experience SDK exposes several Ninetailed properties and methods on a window.ninetailed object to facilitate testing and debugging.
Properties
Description
profile
Output the current profile state.
page()
Send a page view event of the current page.
track(id: string, properties?: object)
Send a track event of a given name, and optionally properties of the event.
identify(id: string, traits?: object)
Send an identify event to alias the current profile and/or to send traits. Use an empty string as the id to target the current profile without supplying an alias.
debug(arg: boolean)
Turn on debug mode, which will output additional information about your experiences assignement to the console.
reset()
Discard the current profile.
plugins
Access the methods of installed Ninetailed plugins