Installation
This section describes how to install the Ninetailed GTM plugin to send experience events
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
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>
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 |
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 ({{ }}
).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. |
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>
Last modified 2mo ago