feat: add GTM handler and options

README.md

@@ -41,15 +41,71 @@ npm install nuxt-google-optimize --save
 
   // Optional options
   googleOptimize: {
-    // experimentsDir: '~/experiments',
-    // maxAge: 60 * 60 * 24 * 7 // 1 Week
-    // pushPlugin: true,
-    // excludeBots: true,
-    // botExpression: /(bot|spider|crawler)/i
+    /* module options */
   }
 }
 ```
 
+## Options
+
+### `experimentsDir`
+
+- Type: `String`
+- Default: `'~/experiments'`
+
+Provide path where experiments are located.
+
+### `maxAge`
+
+- Type: `Number`
+- Default: `60 * 60 * 24 * 7`
+
+Provides default max age for user to test.
+
+### `pushPlugin`
+
+- Type: `Boolean`
+- Default: `true`
+
+### `eventHandler`
+
+- Type: `Function`
+- Default:
+```js
+(experiment, context) => {
+  const exp =
+    experiment.experimentID + '.' + experiment.$variantIndexes.join('-')
+  const { ga } = window
+  if (!ga) return
+  ga('set', 'exp', exp)
+}
+```
+
+Provide custom event handler to send experiment details.
+
+Usage example:
+```js
+googleOptimize: {
+  eventHandler: (experiment, context) => {
+    const exp = experiment.experimentID + '.' + experiment.$variantIndexes.join('-')
+    const { ga } = window
+    if (!ga) return
+    ga('set', 'exp', exp)
+  }
+}
+```
+
+### `excludeBots`
+
+- Type: `Boolean`
+- Default: `true`
+
+### `botExpression`
+
+- Type: `RegExp`
+- Default: `/(bot|spider|crawler)/i`
+
+
 ## Usage
 
 Create `experiments` directory inside your project.
@@ -222,6 +278,42 @@ import './styles.scss'
 }
 ```
 
+## Usage with GTM
+
+- Set `options.eventHandler`:
+```js
+// GTM module
+{
+  eventHandler: (experiment, { $gtm }) => {
+    const exp = `${experiment.experimentID}.${experiment.$variantIndexes.join( '-' )}`
+    $gtm.push({ exp })
+  }
+}
+
+// Default datalayer
+{
+  eventHandler: (experiment, { $gtm }) => {
+    const exp = `${experiment.experimentID}.${experiment.$variantIndexes.join( '-' )}`
+    const { dataLayer } = window
+    if (!dataLayer) return
+    dataLayer.push({ exp })
+  }
+}
+```
+- 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,12 @@ module.exports = async function module (moduleOptions) {
       experimentsDir: '~/experiments',
       maxAge: 60 * 60 * 24 * 7, // 1 Week
       plugins: [],
+      eventHandler: (experiment, context) => {
+        const exp = experiment.experimentID + '.' + experiment.$variantIndexes.join('-')
+        const { ga } = window
+        if (!ga) return
+        ga('set', 'exp', exp)
+      },
       excludeBots: true,
       botExpression: /(bot|spider|crawler)/i
     },

lib/plugin.js

@@ -120,14 +120,12 @@ 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) {
-    return
-  }
-
-  const exp = experiment.experimentID + '.' + experiment.$variantIndexes.join('-')
+function googleOptimize(ctx) {
+  const { experiment } = ctx
+  if (process.server || !experiment || !experiment.experimentID) return
 
-  window.ga('set', 'exp', exp)
+  const handler = <%= serializeFunction(options.eventHandler) %>
+  handler(experiment, ctx)
 }
 
 // should we skip bots?