Published on

Getting Started With Personalization Using Ninetailed

Authors

Ninetailed Personalization

Introduction

Ninetailed's personalization and experimentation tool let you constantly iterate your messages to your customers using content from different headless sources. That means you can deliver targeted copy and products from your content platforms seamlessly.

In this short demo, we shall personalize messages for an Audience based in Nairobi prompting them to redeem coupon codes that will be used to test a Saas product. This message will only be displayed for users from the specified region.

Prerequisites

To fully follow this tutorial, you will need the following:

Setting a content model on Contentful

When using Contentful, a content model gives structure and organization to your content.Each content type is made up of fields that denote the type of data that will be included in the entry. For this Tutorial i will call the content model Coupons and it shall contain the following text fields.

  • Name
  • Description

Connect Contentful to Ninetailed

The next step is connecting Contentful and Ninetailed for personalization purposes. Follow the following steps :

  1. Go to your apps management page by clicking Apps in the navigation bar.

  2. To install Ninetailed, choose it from the list of applications available.

  3. To begin the installation, click Install.

  4. Allow access to Ninetailed in your space to continue the installation process.

  5. To finish the installation, click Connect to authenticate Ninetailed.

Set up the Connection

You will give your connection a name and an optional description in this step. Ninetailed will then install and carry out all required configurations in your project after that.

Remember to enable Advanced Model at this step.

Configure content types

The content types you want to set up for dynamic content personalization must be chosen.Click Personalize Content Types to begin customizing your content in Contentful after selecting the desired content types. In our case we shall be customizing the Greetings content model

Once configured your content model should look like this :

Ninetailed Personalization

Content personalization with Ninetailed

Within headless CMSs like Contentful, you can create tailored content for specific audiences based on different conditions using Ninetailed. To get started :

1. Create a baseline entry

  • To create a baseline click on the Content on the top navigation bar and click Add Entry.

  • Select the Greetings from the drop down as your content type and fill the fields as shown below :

baseline

Personalize the baseline

After creating the baseline :

  • To apply a personalization experience from the drop-down list, click Create Experience.

  • To create a personalization experience, click Create personalization.

  • A new interface to create personalization for this entry is loaded. Fill it using the steps recorded below :

baseline

Personalizing React components with Ninetailed

Creating a react application

The first step is to start your terminal/command prompt, navigate to the folder where you want to save your React application, and then execute this command:

npx create-react-app personalization

Install project dependencies.

To use Ninetailed and Contentful in our application we shall install the following project dependencies

npm install @ninetailed/experience.js-react @ninetailed/experience.js-utils-contentful contentful @types/lodash

Configuring Ninetailed

To use Ninetailed inside the application,

  • Add the Ninetailed provider to your App.js file
  • Add your Ninetailed API key to the Naintailed provider as shown below :
import { NinetailedProvider } from '@ninetailed/experience.js-react';

function App() {

  return (
    <NinetailedProvider clientId={'Your API KEY'}>
      {YOUR APP CODE}
    </NinetailedProvider>
  );
}

Creating Cta component

The Cta component will hold the fields defined in our content model. Create it inside the src folder and customize to your content model as as shown below :

baseline

Displaying Personalized Components

Wrap you custom component with the Experience component from Ninetailed.The Experience component takes a Component attribute, an experience attribute and the baseline component.

  <Experience
        {...componentProps}
        id={id}
        // @ts-ignore
        component={ComponentRenderer}
        experiences={experiences}
      />

Conclusion

If you don't know your customers, you can't give them what they want. Personalization helps you gain insights into their preferences and intent through data, so you can offer them tailored experiences and Ninetailed is the right tool meant for this seamlessly.

The final code repository can be found on Github