The core responsibility of the Experience SDKs is to define a Ninetailedclass 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.
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';exportconstApp= () => {return ( <divid="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 instancesplugins=[] // 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 informationlocale="en-US"// Specify an alternative Experience API base URLurl="https://experience.ninetailed.co"// Set to to true ONLY if using an unindexed CMSuseSDKEvaluation=true > <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';exportconstApp= ({component, pageProps}) => {return ( <divid="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 instancesplugins=[] // 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 informationlocale="en-US"// Specify an alternative Experience API base URLurl="https://experience.ninetailed.co"// Set to to true ONLY if using an unindexed CMSuseSDKEvaluation=true > <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 configurationplugins: [...// 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 an unindexed CMS useSDKEvaluation:true } }]
import { Ninetailed } from'@ninetailed/experience.js';exportconstninetailed=newNinetailed( { // 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 an unindexed 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.
For a full description of instance properties and methods available to your application, consult the Ninetailed Instance documentation.