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)
• Support external experiment source using axios

Setup

• Add nuxt-google-optimize dependency using yarn or npm to your project

yarn add nuxt-google-optimize

OR

npm install nuxt-google-optimize --save

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

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

  // Optional options
  googleOptimize: {
    // experimentsDir: '~/experiments',
    // maxAge: 60 * 60 * 24 * 7 // 1 Week
    // pushPlugin: true,
    // externalExperimentsSrc: 'https://my.experi.ment/list',
    // cookieDomain: '.experi.ment', // must valid domain/subdomain
    // useFetch: true, // use fetch() if possible for preload to work properly
  }
}

Usage

Create experiments directory inside your project.

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

import backgroundColor from './background-color'

export default [
  backgroundColor
]

Creating an experiment

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 }
  ],
}

$exp

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,

  // 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:

<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>

Global style tests

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;
}

Development

• Clone this repository
• Install dependencies using yarn install or npm install
• Start development server using yarn run dev or npm 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

License

MIT License - Alibaba Travels Co