Up and Running With Ninetailed
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. Because 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.
Create a Ninetailed account
Create a content source
Choose content types to extend with Ninetailed
Extend your application with Ninetailed SDKs
Publish a Ninetailed Audience and Experience
Configure Insights and/or Other Analytics
Step 1: Create a Ninetailed Account
Head to app.ninetailed.io and create a new account. It's free!
Step 2: Create a Content Source
From your new account dashboard at app.ninetailed.io, 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.
Creating a content source will install the Ninetailed app in that content source and synchronize any created Ninetailed Audiences and Experiences to your Ninetailed account.
This installation process will vary by your CMS, but you will always need at least two content types available to complete installation.
See the Create a Content Source documentation for instructions specific to your CMS.
Step 3: Choose Content Types to Extend with Ninetailed
Personalized content and experiment variations are entries of your existing CMS content types. You'll need 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 will add a one-to-many reference field of Ninetailed Experience entries, a content type that was installed when you created the content source.
Reference Add Experiences to Content Types to get steps specific to your content source.
Step 4: Extend Your Application with Ninetailed SDKs
Ninetailed deeply 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 SDK is 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.
a. Install Packages
You'll need to install at least two dependencies in your project:
An SDK for your library or framework
A utils package responsible for mapping content source data to a format consumable by SDK components
See the Installation docs and Utility Libraries docs for details of what dependencies to install.
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 crated.
Your API Key can be found within the Ninetailed dashboard at https://app.ninetailed.io, 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'll want 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.
See Creating a Ninetailed Instance for steps specific to your front-end.
c. Build Profiles with Events
Profiles are objects that indicate the Ninetailed Audiences to which they belong. They are updated via page , track , & identify events sent to the Ninetailed Experience API from your web application or connected data source.
Our Next.js and Gatsby applications automatically call page on each route change. We recommend doing this no matter what library or framework you are using so that your content authors can use most Ninetailed rules right away. At minimum, your application should call page, track, or identify at least once.
See Sending Events and Audience Rules for more information.
d. Render Experiences
To make personalizing or experimenting with your components as seamless as possible, 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 a your content source data to be mapped to a specific format. You'll want to use a Ninetailed Utility Libraries to ensure that your content source Experience data are mapped correctly.
See the Rendering Experiences guide for more details.
Step 5: 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 & 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
Find a step-by-step guide here:
See Audiences and Experiences for more details on creating these content types.
Step 6: 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 will be automatically populated after publishing an Audience. Component and Experience Insights require installing the Insights Plugin, which sends impression events of Experiences to Ninetailed. You'll also need 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.
See our Explore and Analyze section, as well as Plugins for more information.
Next Steps
This guide suggested extending one content type with Ninetailed. You'll likely want to extend additional content types so they can also be personalized or experimented with.
Plugins are useful for extending the capabilities of Ninetailed. These were briefly touched on in the Configure Insights section of this guide. Many Ninetailed users install 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.
Last updated