nkoehring/vue-a2b

Split Testing for Vue.js

vue-a2b

split testing for Vuejs

Usage

Add the package to your project:

yarn add vue-a2b
# or
npm install vue-a2b

…and register it to Vue:

import VueAB from 'vue-a2b'
Vue.use(VueAB)

vue-a2b uses named slots for defining test variations. Any amount of variations is supported (A/B/n). The the variation identifier should be used as slot name and can be any valid string. Selection chances are given as ratio. In the first example, test A has twice the chance to be selected over test B:

Note: Selection chances are parsed as whole numbers, so instead of 2.5 and 1 use 5 and 2.

minimal example

<template>
  <split-test>
    <component slot="A" chance="2" />
    <component slot="B" chance="1" />
  </split-test>
</template>

more examples

Chances are optional. If left out, every test gets the same chance to be picked. The selection can also be forced with the always parameter, which is useful for testing:

<template>
  <split-test always="B"> <!-- will always choose B, no matter the chances -->
    <component slot="A" chance="2" />
    <component slot="B" chance="1" />
  </split-test>
</template>

If more than one element is part of the test, use template tags:

<template>
  <split-test>
    <template slot="A" chance="2">
      <button>hello</button>
      <button>World</button>
    </template>
    <template slot="B" chance="1">
      <button>hey ho</button>
      <button>lets go</button>
    </template>
  </split-test>
</template>

functional usage

Since version 0.2 functional usage is supported. The component scope now has the $abtest method. It can be used to initialize an A/B test without the <split-test> component or to get the test value:

To initialize a new test, created() is a good spot:

export default {
  created () {
    // creates a test 'fancy-bubbles' with 75% chance for even more bubbles
    this.$abtest('fancy-bubbles', { bubbles: 25, lotsOfBubbles: 75 })
  }
}

To get a value, for example in data, just call $abtest again:

export default {
  data () {
    return {
      more_bubbles: this.$abtest('fancy-bubbles') === 'lotsOfBubbles'
    }
  }
}

The function is reachable for the template as well:

<template>
  <div :class='$abtest("fancy-bubbles")'>bubbles!</div>
</template>

<style>
.lotsOfBubbles {
  font-size: var(--extra-big);
}
</style>

outside of components

vue-a2b exports the abtest method among others, so it is possible to access it via:

import { abtest } from 'vue-a2b'

Additionally randomCandidate is exported, which allows to get a randomly picked sample out of a list of VNodes or an object:

import { randomCandidate } from 'vue-a2b'

// pics a random candidate foo, bar, baz with 75%, 20%, 5% chance respectively
const candidate = randomCandidate({
  foo: 75,
  bar: 20,
  baz: 5
})

Settings

Test name

The test name needs to be set with the name attribute. If no name is given, it might be deferred from the parent components name attribute.

<template>
  <split-test name="the-one-test">
    <component slot="A" chance="2" />
    <component slot="B" chance="1" />
  </split-test>
</template>

Attention: Test name is mandatory!

Storage options

You can set storage method, name and expiry on initialization. Supported methods are cookie (the default) and localStorage.

Vue.use(VueAB, {
  storage: {
    method: 'localStorage',
    name: 'project42'
  }
})

The stored value expires after 30 days by default. This can be changed:

Vue.use(VueAB, {
  storage: {
    method: 'cookie',
    expiry: 7 // one week until the cookie expires
  }
})

Note: LocalStorage doesn't support expiration by default but the entries get
a timestamp and old entries will be ignored to make expiration possible.

Note: The expiry date is refreshed with every page visit. The entry only
expires, if the user doesn't come back in the specified time.

Component Name

By default <split-test> is the component that wraps a new test. This name can be overwritten on initialization:

Vue.use(VueAB, {component: 'a-b'})

<template>
  <a-b>
    <!-- variants -->
  </a-b>
</template>

Build setup

We recommend to use yarn but npm works too:

# Install dependencies
yarn install
# or
npm install

# Build for production with minification
yarn build
# or
npm run build

License

MIT © fromAtoB GmbH

vue-a2b's Issues

expires calc wrong in localstorage

key error

when setLocalStorage, the expires will be set to Date.now + 30days,
but when getLocalStorage, it test Date.now + 30days > lastDate.now + 30days, it equal to cacl Date.now > lastDate.now, it always true, so it always expired

Multiple root nodes returned from render function

With the following component template:

<template>
  <split-test name="discovery-experiment">
    <component-a slot="outcome1" chance="3" />
    <component-b slot="outcome2" chance="1" />
  </split-test>
</template>

I see this error:

[Vue warn]: Multiple root nodes returned from render function. Render function should return a single root node.

Looking at the render() function in src/index.js, variations[winner] is returning an Array with a single item in it which Vue does not like. I am using Vue 2.5.3.

Remember the version for recurring visitors

Hello there! First, I'd like to thank you for this Vue Plugin, it was a bit hard to find something as simple yet functional like this! :)

I have a quesiton: Although the version is stored in local storage, if I refresh the page, the version keeps changing between A and B based on the weight / chances, but if a visitor comes to the website by the first time and the plugin was serving at the time the version B, I'd like the plugin to remember the B version, so whenever they come again, they will see the B version, not the A or Z. Is there any chance to achieve this?

The reason for doing this is that I'd like to offer to the user a specific version of a feature, let's say a WYSIWYG editor, so the version A has a toolbar for text formatting and the version B is just plain text. If one of our users comes into the app/website and starts using the version A of the editor makes sense to serve the same version and not a different one every time they come, if that makes sense?

Thank you again and looking forward to hearing from you! 🎉

✌️

Example of how to analyze test / experiements?

Hey there, this looks really cool. I've been looking for a way to a/b test vue code (well marketing dept has). We are using google analytics w/ optimize on non-vue pages. I was curious how I could use something like this and collect analytics of which split test were more successful. Sorry for the novice question. Thanks!