Quick start guide

This quick start guide will walk you through setting up and integrating Ninetailed with your content source and front-end. The exact setup procedure for each step varies based on your content management system (CMS), front-end framework, and the mechanism by which you retrieve content from your CMS, so each step will reference further documentation.

Introduction

Installing Ninetailed into an application requires a few essential steps. These steps require modifying both your content model and application. We strongly recommend you create a development instance of both on which to perform these steps.

1. Create a Ninetailed account.
2. Create a content source.
3. Choose content types to extend with Ninetailed.
4. Extend your application with Ninetailed SDKs.
5. Publish a Ninetailed Audience and Experience.
6. Configure Insights and/or Other Analytics.

Step 1: Create a Ninetailed account

Access app.ninetailed.io and create a new account.

Step 2: Create a Content Source

From your new account dashboard, create a new content source. A content source represents a Ninetailed connection to a content management system (CMS) project.

Take note of which Ninetailed Environment you have created your content source in. When you create a content source, the Ninetailed app is installed in that content source and any created Ninetailed Audiences and Experiences are synchronized to your Ninetailed account.

Step 3: Select the content types to extend with Ninetailed

Personalized content and experiment variations are entries of your existing CMS content types. You have to decide what content types should have their content model extended to support adding experiences (personalizations or experiments).

Identify one or more content types in your content model that represent sections on a page. When you're first getting started, we recommend choosing the content type that corresponds to your largest above the fold elements on most pages.

Once you've decided, follow the instructions applicable to your CMS to extend the content model of these content types. This adds a one-to-many reference field of Ninetailed Experience entries, a content type that was installed when you created the content source.

For more information about extending your content types, see Add Experiences to content types and get steps specific to your content source.

Step 4: Extend your application with Ninetailed SDKs

Ninetailed integrates in your application using our SDKs. Ninetailed SDKs are responsible for storing a profile that represents the state of a user and communicating with the Experience API using events to update it. The SDKs also provide methods and components so you can declaratively render the correct experience content according to the current profile.

This installation process can be broken down into several steps, as follows:

a. Install packages

You have to install at least two dependencies in your project:

1. An SDK for your library or framework.
2. A utils package responsible for mapping content source data to a format consumable by SDK components.

For more information of what dependencies to install, see the Installation and Utility Libraries docs.

b. Create a Ninetailed instance

A Ninetailed instance holds the profile, provides callable events, updates the profile in response to called events, and provided several configuration options. You'll need to instantiate one using the API key assigned to you on account creation and the Ninetailed Environment in which your content source was created.

Your API Key can be found within the Ninetailed dashboard, under the left sidebar item. Your environment will be either main or development and will be visible in the top left corner of the dashboard.

If you're using the JavaScript SDK, you have to ensure the rest of your application can access your created Ninetailed instance. Our React, Next.js, and Gatsby SDKs do this through a React context provider.

For more information about the steps specific to your front-end, see Create a Ninetailed instance.

c. Create and update profiles with events

Profiles are objects that indicate the Ninetailed Audiences to which they belong. They are created and updated via page , track , and identify events sent to the Ninetailed Experience API from your web application or connected data source.

Your application should call page on every route change so that it receives a profile from the Experience API on first page visit and so content authors can use most Ninetailed Audience rules right away.

Adding the Next.js <NinetailedProvider> in a Next.js Pages router project or the Ninetailed Gatsby Plugin in a Gatsby project, automatically hooks into the routers of those frameworks to call page for you on each route change. For all other implementations, consider how to call page on each route change within your chosen library or framework's routing solution. At the bare minimum, your application should call page, track, or identify at least once, typically on first page load, to receive a profile.

For more information, see Send events and Audience rules.

d. Render Experiences

React-based Ninetailed SDKs provide an <Experience /> component that wraps the React component you want to use to render out the selected content variant. It ingests formatted content from your connected content source to determine what Ninetailed Experience and variant to render.

The <Experience> component requires your content source data to be mapped to a specific format. You have to use a Ninetailed Utility Libraries to ensure that your content source Experience data are mapped correctly.

For more information, see Render Experiences.

Step 5: Configure Insights and/or Other Analytics

Ninetailed displays analytics of your Audiences, the content entries your Audiences have seen, and the performance of your Experiences inside of the CMS. These are Audience Insights, Component Insights, and Experience Insights, respectively.

Audience Insights are automatically populated after publishing an Audience. Component and Experience Insights require installing the Insights Plugin, which sends impression events of Experiences to Ninetailed. You also have to send at least one track event to log a conversion event you're interested in for Experience Insights to provide meaningful data.

Additionally, you can send Experience impression events to destinations like Google Tag Manager and Segment with Ninetailed plugins. In combination with your existing conversion event data in your systems, you can get started with analysis of experiments immediately using tools you're already familiar with.

Step 6: Publish a Ninetailed Audience and Experience

Now that a connection is established and your codebase can support rendering experiences, it's time to create content. The segments (Ninetailed Audiences), experiments and personalizations (Ninetailed Experiences), and variations of content are all content entries that you create in your content source.

Your content entry structure will look like this:

• Your baseline content entry will be a entry using one of your exisitng content types.
• It will reference a list of Ninetailed Experience entries.
• Each Ninetailed Experience will reference a Ninetailed Audience, indicating to whom to show the Experience, and a list of a components that will show different content when the Experience is active.
• Each component will show the baseline and variant content.
• Variants are simply content entries within your content source based on your existing content types.

For a step-by-step guide, watch the following video:

• Video - Intro to Ninetailed

Next steps

This guide suggested extending one content type with Ninetailed. You can extend additional content types so they can also be personalized or experimented with.

Plugins are useful for extending the capabilities of Ninetailed. Many Ninetailed users choose to instrument the Preview Plugin to allow their content authors to preview Experiences before they are published. The Preview Plugin also integrates with CMS live preview product features for powerful auditing workflows.