Experience SDK

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

Add the <NinetailedProvider> component to the top level of the application, so that the 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 "main" or "development"
        environment="main"

        // Add any plugin instances
        plugins=[]

        // Specify an amount of time (ms) that an 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 true ONLY if using an unindexed CMS
        useSDKEvaluation=true
      >
        <MyAppCode />
      </NinetailedProvider>
    </div>
  );   
}

We recommend adding the <NinetailedProvider> component to the top level of the application. This way, the profile can be consumed from any child component.

The Next.js <NinetailedProvider> additionally hooks into the Next page router and automatically calls ninetailed.page() on every route change. Calling this method again will lead to duplicated events.

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, "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 true ONLY if using an unindexed CMS
        useSDKEvaluation=true
      >
        <Component {...pageProps} />
      </NinetailedProvider>
    </div>
  );   
}

Add the plugin to your plugins array in your gatsby-config.js|ts file. When using the Gatsby JS plugin you don't have to configure the NinetailedProvider as described for the React and Next.js SDKs.

The plugin automatically calls ninetailed.page() on every route change. Calling this method again will lead to duplicated events.

... // 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 PROPERTIES ARE OPTIONAL ===
      // === DEFAULT VALUES ARE SHOWN ===

      // Your Ninetailed environment, "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 true ONLY if using an unindexed CMS
      useSDKEvaluation: true
    }
  }
]

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, "main" or "development"
        environment: "main" // Default
    }, 
    // === THE FOLLOWING ARGUMENT AND ALL OF ITS PROPERTIES 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 true ONLY if using an unindexed CMS
        useSDKEvaluation: true
    }
);

The useNinetailed hook provides the tracking methods page, track, and identify. These will call the Experience API using the configuration parameters supplied to a <NinetailedProvider>.

import React from 'react';

import { useNinetailed } from '@ninetailed/experience.js-react';
// or import { useNinetailed } from '@ninetailed/experience.js-next';
// or import { useNinetailed } from '@ninetailed/experience.js-gatsby';

export const myComponent = () => {
  const { page, track, identify } = useNinetailed();

  page();
  identify('anAlias', {someTrait: "value"});

  return (
    <button 
      type="button" 
      onClick={() => { track('add_to_cart'); }}
    >
      Add to Cart
    </button>
  );
}

The page, track, and identify methods are available directly on a Ninetailed class instance.

import { Ninetailed } from '@ninetailed/experience.js';

const ninetailed = new Ninetailed({ clientId: "NINETAILED_API_KEY"})

ninetailed.page();
ninetailed.track('myEvent')
ninetailed.identify('alias', {traitName: "traitValue"})