feat: add GTM handler and options

README.md

@@ -44,6 +44,8 @@ npm install nuxt-google-optimize --save
     // experimentsDir: '~/experiments',
     // maxAge: 60 * 60 * 24 * 7 // 1 Week
     // pushPlugin: true,
+    // eventHandler: 'ga', // 'ga' = Google Analytics integration || 'gtm' = @nuxtjs/gtm-module integration || 'dataLayer' = GTM integration
+    // dataLayer: 'dataLayer', // eventHandler option has to be 'dataLayer' when implementing custom GTM dataLayer
     // excludeBots: true,
     // botExpression: /(bot|spider|crawler)/i
   }
@@ -222,6 +224,22 @@ import './styles.scss'
 }
 ```
 
+## Usage with GTM
+
+- Set `options.eventHandler` to 'gtm' or 'dataLayer' depending which integration style you use for Tag Manager.
+- Edit your "Page view (Google Analytics)" -tag in [Google Tag Manager](https://tagmanager.google.com/#/home)
+  - Add new "Fields to Set":
+    - Field Name: exp
+    - Value: {{googleOptimizeExp}}
+- Add new Data Layer Variable called "googleOptimizeExp" as defined above.
+  - Variable type: Data Layer Variable
+  - Data Layer Variable Name: exp
+
+[Source for this setup lossleader's answer in StackOverflow](https://stackoverflow.com/a/53253769/871677)
+
+Now this module pushes experiment id and variable number to Google Analytics via Google Tag Manager.
+experiment.experimentID + '.' + experiment.$variantIndexes.join('-')
+
 ## Development
 
 - Clone this repository

lib/module.js

@@ -7,6 +7,8 @@ module.exports = async function module (moduleOptions) {
       experimentsDir: '~/experiments',
       maxAge: 60 * 60 * 24 * 7, // 1 Week
       plugins: [],
+      eventHandler: 'ga',
+      dataLayer: 'dataLayer',
       excludeBots: true,
       botExpression: /(bot|spider|crawler)/i
     },

lib/plugin.js

@@ -120,14 +120,32 @@ function setCookie(ctx, name, value, maxAge = <%= options.maxAge %>) {
 }
 
 // https://developers.google.com/optimize/devguides/experiments
-function googleOptimize({ experiment }) {
-  if (process.server || !window.ga || !experiment || !experiment.experimentID) {
+function googleOptimize(ctx) {
+  const { experiment } = ctx
+  if (process.server || !experiment || !experiment.experimentID) {
     return
   }
 
-  const exp = experiment.experimentID + '.' + experiment.$variantIndexes.join('-')
-
-  window.ga('set', 'exp', exp)
+  // Choose method to track experiment and variant
+  <% if (options.eventHandler === 'ga') { %>
+    // Use Google Analytics integration
+    // https://developers.google.com/optimize/devguides/experiments
+    const exp = experiment.experimentID + '.' + experiment.$variantIndexes.join('-')
+    if (!window.ga) return
+    window.ga('set', 'exp', exp)
+  <% } else if (options.eventHandler === 'gtm') { %>
+    // Use @nuxtjs/gtm-module
+    if (!ctx.$gtm) return
+    ctx.$gtm.push({
+      exp: exp
+    })
+  <% } else if (options.eventHandler === 'dataLayer') { %>
+    // Use other tag manager integration
+    if (!window[options.dataLayer]) return
+    window[options.dataLayer].push({
+      exp: exp
+    })
+  <% } %>
 }
 
 // should we skip bots?