Comment on page
Installation
Installing and adding the Ninetailed Provider to serve Experience information.
React
Next.js
Gatsby
JavaScript
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
npm install @ninetailed/experience.js
# OR
yarn add @ninetailed/experience.js
The core responsibility of the Experience SDKs is to define a
Ninetailed
class instance based on your input configuration. The created instance is then responsible for:- keeping track of the current profile and providing a hook into when the profile changes
When working with the React or a React framework Ninetailed SDK, a Ninetailed instance will be created and made available to your application globally using a React context provider.
React
Next.js
Gatsby
JavaScript
Add the
<NinetailedProvider>
component to the top level of the application, so that the Ninetailed profile can be consumed from any child component.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. An API key uniquely identifying your Ninetailed account.
clientId="NINETAILED_API_KEY"
// === ALL OF THE FOLLOWING PROPS ARE OPTIONAL ===
// === DEFAULT VALUES ARE SHOWN ===
// Your Ninetailed environment, typically either "main" or "development"
environment="main"
// Add any plugin instances
plugins=[]
// Specify an amount of time (ms) that an <Experience /> component must be present in the viewport to register a component view
componentViewTrackingThreshold={2000}
// Specify a maximum amount of time (ms) to wait for an Experience API response before falling back to baseline content
requestTimeout={5000}
// Specify a locale to localize profile location information
locale="en-US"
// Specify an alternative Experience API base URL
url="https://experience.ninetailed.co"
>
<MyAppCode />
</NinetailedProvider>
</div>
);
}
Add the
<NinetailedProvider>
component to the top level of the application, so that the Ninetailed profile can be consumed from any child component.The Next.js
<NinetailedProvider>
also hooks into the Next's page router to automatically call ninetailed.page()
on every route change. Do not additionally call this method on your own, otherwise you will duplicate events.// pages/_app.(jsx|tsx)
import { NinetailedProvider } from '@ninetailed/experience.js-next';
export const App = ({component, pageProps}) => {
return (
<div id="my-app">
<NinetailedProvider
// REQUIRED. An API key uniquely identifying your Ninetailed account.
clientId="NINETAILED_API_KEY"
// === ALL OF THE FOLLOWING PROPS ARE OPTIONAL ===
// === DEFAULT VALUES ARE SHOWN ===
// Your Ninetailed environment, typically either "main" or "development"
environment="main"
// Add any plugin instances
plugins=[]
// Specify an amount of time (ms) that an <Experience /> component must be present in the viewport to register a component view
componentViewTrackingThreshold={2000}
// Specify a maximum amount of time (ms) to wait for an Experience API response before falling back to baseline content
requestTimeout={5000}
// Specify a locale to localize profile location information
locale="en-US"
// Specify an alternative Experience API base URL
url="https://experience.ninetailed.co"
>
<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 call this method on your own, otherwise you will duplicate events.gatsby-config.(js|ts)
... // Your Other Gatsby configuration
plugins: [
... // Your existing Gatsby plugins
{
resolve: `@ninetailed/experience.js-gatsby`,
options: {
// REQUIRED. An API key uniquely identifying your Ninetailed account.
clientId: "NINETAILED_API_KEY",
// === ALL OF FOLLOWING PROPERTIRES ARE OPTIONAL ===
// === DEFAULT VALUES ARE SHOWN ===
// Your Ninetailed environment, typically either "main" or "development"
environment: "main",
// Add any plugin instances
ninetailedPlugins: []
// Specify an amount of time (ms) that a component must be present in the viewport to register a component view
componentViewTrackingThreshold: 2000
// Specify a maximum amount of time (ms) to wait for an Experience API response before falling back to baseline content
requestTimeout: 5000
// Specify a locale to localize profile location information
locale: "en-US"
// Specify an alternative Experience API base URL
url: "https://experience.ninetailed.co"
}
}
]
import { Ninetailed } from '@ninetailed/experience.js';
export const ninetailed = new Ninetailed(
{
// REQUIRED. An API key uniquely identifying your Ninetailed account.
clientId: "NINETAILED_API_KEY",
// OPTIONAL. Your Ninetailed environment, typically either "main" or "development"
environment: "main", // Default
},
// === THE FOLLOWING ARGUMENT AND ALL OF ITS PROPERTIRES ARE OPTIONAL ===
// === DEFAULT VALUES ARE SHOWN ===
{
// Add any plugin instances
plugins: []
// Specify an amount of time (ms) that a component must be present in the viewport to register a component view
componentViewTrackingThreshold: 2000
// Specify a maximum amount of time (ms) to wait for an Experience API response before falling back to baseline content
requestTimeout: 5000
// Specify a locale to localize profile location information
locale: "en-US"
// Specify an alternative Experience API base URL
url: "https://experience.ninetailed.co"
}
);
Installing the Experience SDK exposes several Ninetailed properties and methods on a
window.ninetailed
object to facilitate testing and debugging.Properties and Methods | Description |
---|---|
page() , track() , and identify() | |
debug(arg: boolean) | Turn on debug mode, which will output additional information about your experiences assignement to the console. |
plugins | Access the methods of any plugins attached to the Ninetailed instance. |
profile | Output the current profile state. |
reset() | Discard the current profile. |
For a full description of instance properties and methods available to your application, consult the Ninetailed Instance documentation.
Last modified 3mo ago