Comment on page
Installation

Installing and adding the Ninetailed Provider to serve Experience information.
Dependency Installation
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
Creating a Ninetailed Instance
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
exposing declarative methods to interact with the Experience API​
providing extensibility to the instance through plugins​
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.
Your API Key can be found in the Ninetailed Dashboard.
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"
    }
);
​
​
Browser Instance Access
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()
The core tracking methods of Ninetailed. See Sending Events for detailing information.
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.
Properties and Methods	Description
`page()`, `track()`, and `identify()`	The core tracking methods of Ninetailed. See Sending Events for detailing information.
`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.
Introduction
Sending Events
Last modified 3mo ago