Ninetailed
Ask or search…
K

Segment Plugin

Send Ninetailed Experience views as Twilio Segment `track` events.
Segment is a powerful customer data orchestration tool. This plugin allows you to send experience views to a Segment as track events via a connected Analytics.js source.
Looking to send data from Segment to Ninetailed instead? Check out the Customer Data documentation.

Installation

Install the dependency:
npm
yarn
npm install @ninetailed/experience.js-plugin-segment
yarn add @ninetailed/experience.js-plugin-segment
Then, add the plugin to the Ninetailed instance:
React, Next.js
Gatsby
import { NinetailedSegmentPlugin } from '@ninetailed/experience.js-plugin-segment'
<NinetailedProvider
// ...
plugins={[
new NinetailedSegmentPlugin()
]}
componentViewTrackingThreshold={2000} // (Optional prop) Number, default = 2000
>
//...
</NinetailedProvider>
gatsby-config.(js|ts)
plugins: [
// ...
{
resolve: `@ninetailed/experience.js-gatsby`,
options: {
// ...
componentViewTrackingThreshold: 2000, // (Optional prop) Number, default = 2000
ninetailedPlugins: [
{
resolve: `@ninetailed/experience.js-plugin-segment`,
options: {}
}
]
}
}
]

Timing Configuration

The Insights Plugin logs that a component has been seen only after the component has remained within the user's viewport for a specified amount of time (in milliseconds), determined by the value of the componentViewTrackingThreshold property on the Ninetailed instance (see code samples above). If the option is unspecified, the value defaults to 2000.

Default Data Layer Properties

Events sent from this plugin are named nt_experience. They are sent with five default parameters:
Parameters
Value Type
Value Description
ninetailed_experience
String
Experience ID of the experience
ninetailed_experience_name
String
Title of the experience entry from the CMS
ninetailed_variant
String
"control", "variant 1", "variant 2", …
ninetailed_audience
String
CMS entry ID of the audience
ninetailed_component
String
CMS entry ID of the shown variant

Custom Event Properties

You can also define your own variables to push to Segment by passing in a configuration object when instantiating the plugin. To do so, define a config object with a template property whose value is an object consisting of key-value pairs, where the key is the name of the property you want to add to the Segment track event and the value is a string of the desired variable value surrounded by double curly braces ({{ }}).

Available Properties

Property
Notes
experience.id
experience.type
nt_experiment or nt_personalization
experience.name
experience.description
audience.id
ALL_VISITORS if not set
audience.name
All Visitors if not set
audience.description
selectedVariant
selectedVariant.YOUR_PROP
Specify any property key from the selected experience variant
selectedVariantIndex
0, 1, 2, etc.
selectedVariantSelector
"control", "variant 1", "variant 2", etc. This is a mapping of selectedVariantIndex from above.

Example Custom Use

This example shows passing the human-readable name of an audience to a custom event property titled ninetailed_audience_name. The default event properties are also pushed.
React, Next.js
Gatsby
<NinetailedProvider
// ...
plugins={[
new NinetailedSegmentPlugin({
template: {
ninetailed_audience_name: '{{ audience.name }}',
},
})
]}
componentViewTrackingThreshold={2000}
>
//...
</NinetailedProvider>
gatsby-config.(js|ts)
plugins: [
// ...
{
resolve: `@ninetailed/experience.js-gatsby`,
options: {
// ...
componentViewTrackingThreshold: 2000,
ninetailedPlugins: [
{
resolve: `@ninetailed/experience.js-plugin-segment`,
options: {
template: {
ninetailed_audience_name: '{{ audience.name }}',
}
}
}
]
}
}
]