Installation

This section describes how to install the Ninetailed GTM plugin to send experience events

Install the GTM Plugin
To set up Ninetailed to send events to Google Tag Manager, you need to install the @ninetailed/experience.js-plugin-google-tagmanager package.
npm
yarn
npm install @ninetailed/experience.js-plugin-google-tagmanager
yarn add @ninetailed/experience.js-plugin-google-tagmanager
How To Use
Import the Ninetailed Google Tag Manager using the code below:
import { NinetailedGoogleTagmanagerPlugin } from '@ninetailed/experience.js-plugin-google-tagmanager';
Use the following code in your codebase:
<NinetailedProvider
   // ...
    plugins={[
      new NinetailedGoogleTagmanagerPlugin()
     ]}
  >
   //...
 </NinetailedProvider>
Default Data Layer Properties
Events sent from the Ninetailed SDK to the data layer contain six default variables.
Fields
Value Type
Value Description
Event
String
nt_experience
ninetailed_experience
String
CMS entry 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 Data Layer Properties
You can also define your own variables to push to GTM's data layer 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 GTM data layer 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 Use
This example shows passing the human-readable name of an audience to a custom data layer property titled ninetailed_audience_name. The default data layer properties are also pushed.
<NinetailedProvider
   // ...
    plugins={[
      new NinetailedGoogleTagmanagerPlugin({
        template: {
          ninetailed_audience_name: '{{ audience.name }}',
        },
      })
     ]}
  >
   //...
 </NinetailedProvider>

Fields	Value Type	Value Description
Event	String	`nt_experience`
ninetailed_experience	String	CMS entry 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

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.

Analytics - Previous

Google Tag Manager

How To Use

Last modified 2mo ago