nuxt-google-optimize


> SSR friendly Google Optimize module for Nuxt.js

📖 Release Notes

Features

- Support multiple experiments (AB or MVT[Multi-Variant])
- Auto assign experiment/variant to users
- SSR support using cookies
- CSS and state injection
- Automatically revoke expired experiments from testers
- Ability to assign experiments based on context conditions (Route, State, etc)

Setup

- Add nuxt-google-optimize dependency using yarn or npm to your project
``sh
yarn add nuxt-google-optimize
`
OR
`sh
npm install nuxt-google-optimize --save
`

- Add nuxt-google-optimize to modules section of nuxt.config.js

`js
{
modules: [
'nuxt-google-optimize',
],

// Optional options
googleOptimize: {
// experimentsDir: '~/experiments',
// maxAge: 60 60 24 * 7 // 1 Week
// pushPlugin: true,
}
}
`

Usage

Create experiments directory inside your project.

Create experiments/index.js to define all available experiments:

`js
import backgroundColor from './background-color'

export default [
backgroundColor
]
`

$3

Each experiment should export an object to define itself.

experiments/background-color/index.js:

`js
export default {
// A helper exp-{name}-{var} class will be added to the root element
name: 'background-color',

// Google optimize experiment id
experimentID: '....',

// [optional] specify number of sections for MVT experiments
// sections: 1,

// [optional] maxAge for a user to test this experiment
// maxAge: 60 60 24, // 24 hours,

// [optional] Enable/Set experiment on certain conditions
// isEligible: ({ route }) => route.path !== '/foo'

// Implemented variants and their weights
variants: [
{ weight: 0 }, // <-- This is the default variant
{ weight: 2 },
{ weight: 1 }
],
}
`

$3

Global object $exp will be universally injected in the app context to determine the currently active experiment.

It has the following keys:

`json6
{
// Index of currently active experiment
"$experimentIndex": 0,

// Indext of currently active experiment variants
"$variantIndexes": [
1
],

// Same as $variantIndexes but each item is the real variant object
"$activeVariants": [
{
/ /
}
],

// Classes to be globally injected (see global style tests section)
"$classes": [
"exp-background-color-1" // exp-{experiment-name}-{variant-id}
],

// All of the keys of currently active experiment are available
"name": "background-color",
"experimentID": "testid",
"sections": 1,
"maxAge": 60,
"variants": [
/ all variants /
]
}
`

Using inside components:

`html

`

Using inside templates:

`html