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.
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
Add the
<NinetailedProvider> component to the top level of the application, so that the Ninetailed profile can be consumed from any child component.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'
}
}
]
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>
}
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 |
Last modified 30d ago