Google Tag Manager plugin
The Google Tag Manager plugin sends data to a Google Tag Manager (GTM) container already present on your client-side application when an <Experience> component remains in the viewport for a specified amount of time. This allows you to forward events representing impressions of experiments and personalizations to any tags you have configured in GTM, including any downstream analytics systems you have configured as tags.
Installation
To set up Ninetailed to send events to Google Tag Manager, you need to install Ninetailed's GTM plugin.
npm install @ninetailed/experience.js-plugin-google-tagmanageryarn add @ninetailed/experience.js-plugin-google-tagmanagerThen, add the plugin to the Ninetailed instance:
import { NinetailedGoogleTagmanagerPlugin } from '@ninetailed/experience.js-plugin-google-tagmanager';<NinetailedProvider
// ...
plugins={[
new NinetailedGoogleTagmanagerPlugin()
]}
componentViewTrackingThreshold={2000} // (Optional prop) Number, default = 2000
>
//...
</NinetailedProvider>plugins: [
// ...
{
resolve: `@ninetailed/experience.js-gatsby`,
options: {
// ...
componentViewTrackingThreshold: 2000, // (Optional prop) Number, default = 2000
ninetailedPlugins: [
{
resolve: `@ninetailed/experience.js-plugin-google-tagmanager`,
options: {}
}
]
}
}
]import { Ninetailed } from '@ninetailed/experience.js';
import { NinetailedGoogleTagmanagerPlugin } from '@ninetailed/experience.js-plugin-google-tagmanager';
export const ninetailed = new Ninetailed(
{
clientId: // Your client ID
environment: // Your Ninetailed environment
},
{
plugins: [
new NinetailedGoogleTagmanagerPlugin()
],
// Specify an amount of time (ms) that a component must be present in the viewport to register a component view
componentViewTrackingThreshold: 2000,
}
);Timing configuration
The Google Tag Manager Plugin logs that an element has been seen only after the element 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 the following default properties:
| Parameter | 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 GTM's data layer on each event 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 custom 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 }}',
},
})
]}
componentViewTrackingThreshold={2000}
>
//...
</NinetailedProvider>plugins: [
// ...
{
resolve: `@ninetailed/experience.js-gatsby`,
options: {
// ...
componentViewTrackingThreshold: 2000,
ninetailedPlugins: [
{
resolve: `@ninetailed/experience.js-plugin-google-tagmanager`,
options: {
template: {
ninetailed_audience_name: '{{ audience.name }}',
}
}
}
]
}
}
]import { Ninetailed } from '@ninetailed/experience.js';
import { NinetailedGoogleTagmanagerPlugin } from '@ninetailed/experience.js-plugin-google-tagmanager';
export const ninetailed = new Ninetailed(
{
clientId: // Your client ID
environment: // Your Ninetailed environment
},
{
plugins: [
new NinetailedGoogleTagmanagerPlugin({
template: {
ninetailed_audience_name: '{{ audience.name }}',
},
})
],
// Specify an amount of time (ms) that a component must be present in the viewport to register a component view
componentViewTrackingThreshold: 2000,
}
);