nuxt-google-optimize

SSR friendly Google Optimize module for Nuxt.js

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

yarn add nuxt-google-optimize

npm install nuxt-google-optimize --save

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

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

  googleOptimize: {
    /* container Id required for async-hide */
    containerId: 'GTM-XXXXXXX',

    /*** Optional options: ***/

    /* Disable cookies on server side */
    disableServerCookies: true,

    /* Directory of experiments */
    experimentsDir: '~/experiments',

    /* Max age after which experiments are disabled */
    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:

import backgroundColor from './background-color'

export default {
  /* Define experiment list */
  experiments: [ backgroundColor ]
}

Extended (optional options) are:

export default {
  /* Callback that is called when async-hide is initialized. */
  onGoogleOptimizeInit,

  /* Callback that is called when async-hide is ready. Usually you want to
  remove your 'async-hide' class from body here. */
  onGoogleOptimizeReady,

  /* Timeout when onGoogleOptimizeReady is triggered, if not triggered
  successfully before. */
  asyncHideTimeout: 4000,

  /* Ship pre-rendered page with hide-async css class in body? */
  ssrShipWithAsyncHide: true,

  /* Disable cookies during development */
  devResetCookie: false,

  /* List of experiments */
  experiments: [
    carouselEnabled,
    demoExperiment
  ]
}

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

Helper

Can be used in ~/experiments/index.js. Import with:

import {
  devForceNoExperiment,
  devForceExperimentAndVariant,
  devNoCookie } from 'nuxt-google-optimize/helper'

devNoCookie

Disables Cookies. Syntax:

devNoCookie(config)

devForceNoExperiment

Disable all experiments. Syntax:

devForceNoExperiment(config)

devForceExperimentAndVariant

Force experiment and variant. Syntax:

devForceExperimentAndVariant(config, expName, variantIndex, sectionIndex = 0)

devForceExperiment

Force experiment. Syntax:

devForceExperiment(config, expName)

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

Release (to user repo)

npm pack # ?
git tag v0.5.3-mod
git push origin --tags

TODO (tw00)

Experiment might get changed by user, the cookie becomes invalid then

License

MIT License - Alibaba Travels Co

tw00/nuxt-google-optimize