Installation

Installing and adding the Ninetailed Provider to serve Experience information.

Dependency Installation

React

npm install @ninetailed/experience.js-react
# OR
yarn add @ninetailed/experience.js-react

Next.js

npm install @ninetailed/experience.js-next
# OR
yarn add @ninetailed/experience.js-next

Gatsby

npm install @ninetailed/experience.js-gatsby
# OR
yarn add @ninetailed/experience.js-gatsby

JavaScript

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

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"
        
        // Set to to true ONLY if using a CMS other than Contentful
        useSDKEvaluation=true
      >
        <MyAppCode />
      </NinetailedProvider>
    </div>
  );   
}

Next.js

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"
        
        // Set to to true ONLY if using a CMS other than Contentful
        useSDKEvaluation=true
      >
        <Component {...pageProps} />
      </NinetailedProvider>
    </div>
  );   
}
}

Gatsby

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",
      
      // Set to to true ONLY if using a CMS other than Contentful
      useSDKEvaluation: true
    }
  }
]

JavaScript

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"
        
        // Set to to true ONLY if using a CMS other than Contentful
        useSDKEvaluation: true
    }
);

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.