Google Tag Manager Plugin
Sending relevant events downstream to your customer data platforms or analytics tools.
Google Tag Manager is a system that helps deploy marketing tags on your website, without having to modify the code. Furthermore, with these Tags, you can track events and send the data received to tools like Google Analytics, to measure performance.
You can send tracked events or actions, for example, page visits, scroll depth, purchases, clicked links, form submissions, and more performed by the user on your personalized website.
As soon as the Google Tag Manager is integrated with your website, the tags are injected into every personalized component. Every time they get triggered by certain conditions like clicked buttons or time spent on a page, or when the component is in view, these actions, called events are sent to the Google Tag Manager through our GTM plugin that takes in the following parameters
- event name
- experience Id
- variant (name)
The GTM plugin requires these parameters to get the data it needs to send to your analytics tool.
To set up Ninetailed to send events to Google Tag Manager, you need to install Ninetailed's GTM plugin.
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:
React
Next
Gatsby
<NinetailedProvider
// ...
plugins={[
new NinetailedGoogleTagmanagerPlugin()
]}
>
//...
</NinetailedProvider>
<NinetailedProvider
// ...
plugins={[
new NinetailedGoogleTagmanagerPlugin()
]}
>
//...
</NinetailedProvider>
plugins: [
// ...
{
resolve: `@ninetailed/experience.js-gatsby`,
options: {
clientId: PUBLIC_NINETAILED_CLIENT_ID,
environment: PUBLIC_NINETAILED_ENVIRONMENT,
ninetailedPlugins: [
{
resolve: `@ninetailed/experience.js-plugin-google-tagmanager`,
options: {}
}
]
}
}
]
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 | 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 |
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.React
Next
Gatsby
<NinetailedProvider
// ...
plugins={[
new NinetailedGoogleTagmanagerPlugin({
template: {
ninetailed_audience_name: '{{ audience.name }}',
},
})
]}
>
//...
</NinetailedProvider>
Last modified 1mo ago