Skip to content
SSR friendly Google Optimize module for Nuxt.js
Branch: master
Clone or download
Latest commit e26d603 Jul 14, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci initial commit Jul 7, 2018
lib feat(module): accept plugins array Jul 8, 2018
test chore(release): fix html based on test config Jul 9, 2018
.editorconfig initial commit Jul 7, 2018
.eslintignore chore: fix eslint Jul 7, 2018
.eslintrc.js initial commit Jul 7, 2018
.gitignore initial commit Jul 7, 2018
CHANGELOG.md chore(release): 0.5.3 Jul 14, 2018
LICENSE initial commit Jul 7, 2018
README.md Fixed Typo In 'readme.md' Jul 7, 2018
package.json chore(release): 0.5.3 Jul 14, 2018
yarn.lock initial commit Jul 7, 2018

README.md

nuxt-google-optimize

npm (scoped with tag) npm CircleCI Codecov Dependencies js-standard-style

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

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

You can’t perform that action at this time.