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
OR
npm install nuxt-google-optimize --save
- Add
nuxt-google-optimize
tomodules
section ofnuxt.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:
backgroundColor
Creating an experiment
Each experiment should export an object to define itself.
experiments/background-color/index.js
:
// 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:
Using inside templates:
<!-- You can optionally use $exp.$activeVariants and $exp.$variantIndexes here -- > ... ...
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
:
With Sass:
.exp-background-color
With CSS:
/* Variant 1 */ /* Variant 2 */
Development
- Clone this repository
- Install dependencies using
yarn install
ornpm install
- Start development server using
yarn run dev
ornpm 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