Utility Libraries

More utilities to integrate Ninetailed within your current tech stack.

Our Experience API utility libraries provide methods to map experience content to the format required by the <Experience> component exported by our React, Next.js, and Gatsby SDKs.
Use the Contentful Utility SDK if you are are retrieving content and experiences from Contentful's RESTful content APIs, including:
the Contentful Content Delivery API
the Contentful Content Preview API
For all other sources, including:
the Contentful GraphQL API
the Contentstack Content Delivery API
your own content APIs
use the JavaScript Utility SDK and map your experiences to the type required by the ExperienceMapper class methods.
JavaScript Library Usage
npm install @ninetailed/experience.js-utils
# OR
yarn add @ninetailed/experience.js-utils
import { ExperienceMapper } from '@ninetailed/experience.js-utils';
​
// Example: mapping experiences for consumption by the React <Experience> component
const mappedExperiences = (myEntry.nt_experiences || [])
  .map((experience) => {
    return {
      id: experience.id,
      name: experience.name
      type: experience.nt_type as 'nt_personalization' | 'nt_experiment'
      config: experience.nt_config,
      audience: {
        id: experience.nt_audience.nt_audience_id
      },
      variants: experience.varaints.map((variant) => {
        return {
          ...variant,
          id: variant.id
        }
      })
    }
  })
  .filter((experience) => ExperienceMapper.isExperienceEntry(experience))
  .map((experience) => ExperienceMapper.mapExperience(experience));
Contentful Library Usage
npm install @ninetailed/experience.js-utils-contentful
# OR
yarn add @ninetailed/experience.js-utils-contentful
import { ExperienceMapper } from '@ninetailed/experience.js-utils-contentful'
​
// Example: mapping experiences for consumption by the React <Experience> component
const experiences = (myEntry.fields.nt_experiences || [])
    .filter(ExperienceMapper.isExperienceEntry)
    .map(ExperienceMapper.mapExperience)
ExperienceMapper Class Methods
isExperienceEntry
Determines if a provided entry is of valid type to be consumed by mapExperience. Use with .filter to remove any invalidly typed experiences.
mapExperience
Transform an experience to the type required by the <Experience> component.
isExperimentEntry
Determines if a provided entry is of valid type to be consumed by mapExperiment. Use with .filter to remove any invalidly typed experiments.
mapExperiment
Transform an experiment to the type required by the React and Next.js <NinetailedProvider> experiments prop.
mapCustomExperience
[Contentful Library only] If you need to modify how the variants referenced by an experience entry retrieved from Contentful are mapped, use this method to pass a custom variant mapping function. Example usage:
const experiences = myExperience.fields.nt_experiences
  .filter(ExperienceMapper.isExperienceEntry)
  .map((experience) => {
    ExperienceMapper.mapCustomExperience(experience, (variant) => {
      id: variant.sys.id // required
      // Return any other fields required
      ...variant.fields,
      foo: 'bar',
      myCustomField: variant.fields.baz,
    });
  })
mapBaselineWithExperiences
[Contentful Library only] Supply an object representing a baseline entry and it's attached experiences and return an array of filtered and mapped experiences. 

Rendering Experiences

Plugins

Last modified 2mo ago