SSR friendly Google Optimize module for Nuxt.js
npm install nuxt-google-optimize





> SSR friendly Google Optimize module for Nuxt.js
- 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)
- Add nuxt-google-optimize dependency using yarn or npm to your project
``sh`
yarn add nuxt-google-optimize`
ORsh`
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,
}
}
`
Create experiments directory inside your project.
Create experiments/index.js to define all available experiments:
`js
import backgroundColor from './background-color'
export default [
backgroundColor
]
`
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 }
],
}
`
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