Installation

Installing and adding the Ninetailed Provider to serve Experience information.

Dependency Installation

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

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, Next.js or Gatsby 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.

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 an unindexed CMS
        useSDKEvaluation=true
      >
        <MyAppCode />
      </NinetailedProvider>
    </div>
  );   
}

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()

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 updated