Google is shutting down Optimize Sept 30, 2023. Read the annoucement
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-optimizedependency using yarn or npm to your project
yarn add nuxt-google-optimizeOR
npm install nuxt-google-optimize --save- Add
nuxt-google-optimizetomodulessection ofnuxt.config.js
{
modules: [
'nuxt-google-optimize',
],
// Optional options
googleOptimize: {
// experimentsDir: '~/experiments',
// maxAge: 60 * 60 * 24 * 7 // 1 Week
// pushPlugin: true,
// excludeBots: true,
// botExpression: /(bot|spider|crawler)/i
}
}Create experiments directory inside your project.
Create experiments/index.js to define all available experiments:
import backgroundColor from './background-color'
export default [
backgroundColor
]Each experiment should export an object to define itself.
experiments/background-color/index.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:
{
// Index of currently active experiment
"$experimentIndex": 0,
// Index 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:
<script>
export default {
methods: {
foo() {
// You can use this.$exp here
}
}
}
</script>Using inside templates:
<div v-if="$exp.name === 'something'">
<!-- You can optionally use $exp.$activeVariants and $exp.$variantIndexes here -- >
...
</div>
<div v-else>
...
</div>Inject global styles to page body.
layouts/default.vue:
<template>
<nuxt/>
</template>
<script>
export default {
head () {
return {
bodyAttrs: {
class: this.$exp.$classes.join(' ')
}
}
},
}
</script>If you have custom CSS for each test, you can import it inside your experiment's .js file.
experiments/background-color/index.js:
import './styles.scss'With Sass:
.exp-background-color {
// ---------------- Variant 1 ----------------
&-1 {
background-color: red;
}
// ---------------- Variant 2 ----------------
&-2 {
background-color: blue;
}
}With CSS:
/* Variant 1 */
.exp-background-color-1 {
background-color: red;
}
/* Variant 2 */
.exp-background-color-2 {
background-color: blue;
}- Clone this repository
- Install dependencies using
yarn installornpm install - Start development server using
yarn run devornpm run dev - Point your browser to
http://localhost:3000 - You will see a different colour based on the variant set for you
- In order to test your luck, try clearing your cookies and see if the background colour changes or not
MIT License - Alibaba Travels Co
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent