diff --git a/README.md b/README.md index 92ace75..49d2831 100755 --- a/README.md +++ b/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 diff --git a/lib/module.js b/lib/module.js index 76abe2c..118891d 100644 --- a/lib/module.js +++ b/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 }, diff --git a/lib/plugin.js b/lib/plugin.js index 0ff8eac..75e2fea 100644 --- a/lib/plugin.js +++ b/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?