vue-a2b

> split testing for Vuejs

Usage

Add the package to your project:

`` bash
yarn add vue-a2b


or


npm install vue-a2b
`

…and register it to Vue:

` js
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.

$3

` html

`

$3

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:

` html

`

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

` html

`

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 component or to get the test value:

To initialize a new test, created() is a good spot:
` js
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:
` js
export default {
data () {
return {
more_bubbles: this.$abtest('fancy-bubbles') === 'lotsOfBubbles'
}
}
}
`

The function is reachable for the template as well:

`html



`

$3

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

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

$3

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.

` html

`

Attention: Test name is mandatory!

$3

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

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

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

` js
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.

$3

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

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

`

Build setup

We recommend to use yarn but npm works too:

` bash


Install dependencies

yarn install

or

npm install

Build for production with minification

yarn build

or

npm run build
``

License

MIT © fromAtoB GmbH