Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dogchef-be/nuxt-ab-segment
📊 NuxtJS module for A/B testing with Segment Analytics
https://github.com/dogchef-be/nuxt-ab-segment
nuxt nuxt-module nuxt-typescript nuxtjs nuxtjs-ts segment-analytics typescript-support
Last synced: 7 days ago
JSON representation
📊 NuxtJS module for A/B testing with Segment Analytics
- Host: GitHub
- URL: https://github.com/dogchef-be/nuxt-ab-segment
- Owner: dogchef-be
- License: mit
- Created: 2022-05-06T13:13:48.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-12-20T17:35:51.000Z (11 months ago)
- Last Synced: 2024-04-25T14:02:06.813Z (7 months ago)
- Topics: nuxt, nuxt-module, nuxt-typescript, nuxtjs, nuxtjs-ts, segment-analytics, typescript-support
- Language: TypeScript
- Homepage:
- Size: 2.04 MB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
nuxt-ab-segment
NuxtJS module for A/B testing with Segment Analytics
## Table of contents
- [Main features](#main-features)
- [Dependencies](#dependencies)
- [Setup](#setup)
- [Options](#options)
- [Usage](#usage)
- [Credits](#credits)
- [License](#license)
## Main features
- Run multiple experiments simultaneously
- TypeScript support
- Cookies to persist variants across users
- Force a specific variant via url or param. E.g. `url?abs_experiment-x=1` or `this.$abtest('experiment-x', true, true, 1);`
- Prevent automatic reporting of a/b test analytics. E.g. `this.$abtest('experiment-x', true, false);`
- Avoid activating the a/b test anywhere. E.g. `this.$abtest('experiment-x', false);`
- Disable all a/b tests by cookie (`abs_disabled=1`), which is useful for E2E tests in CI/CD pipelines
## Dependencies
- [nuxt-segment](https://github.com/dansmaculotte/nuxt-segment)
- Or any other alternative to inject [Segment Analytics](https://segment.com)
## Setup
1. Add `nuxt-ab-segment` dependency to your project:
```bash
npm install nuxt-ab-segment
```
2. Add `nuxt-ab-segment` module and configuration to `nuxt.config.js`:
```js
export default {
// ...other config options
modules: ["nuxt-ab-segment"];
abSegment: {
event: "AB Test", // optional
experiments: '~/experiments.js', // optional
}
}
```
3. Create the `experiments.js` in project's root with an array of your experiments. An example:
```js
/**
* {
* name: string; A name to identify the experiment on this.$abtest('NAME_HERE')
* maxAgeDays: number; Number of days to persist the cookie of user's active variant
* variants: number[]; An array of variants weights
* }
*/
module.exports = [
{
name: "experiment-x",
maxAgeDays: 15,
variants: [50, 50],
},
];
```
4. (Optional) TypeScript support. Add `nuxt-ab-segment` to the `types` section of `tsconfig.json`:
```json
{
"compilerOptions": {
"types": ["nuxt-ab-segment"]
}
}
```
## Options
### `event`
- Type: `String`
- Default: `AB Test`
Event name reported to Segment.
### `experiments`
- Type: `String`
- Default: `~/experiments.js`
File path for your experiments definition.
## Usage
It can be used inside components like:
```js
{
data: () => ({
payBtnLabel: null as string | null,
}),
mounted() {
// Scenario: Determine an experiment variant and then display a label depending on it.
const expA = this.$abtest('experiment-a');
if (expA === 0) {
this.payBtnLabel = 'Place order';
} else {
this.payBtnLabel = 'Pay now!';
}
// Scenario: We want to force a specific variant programmatically.
const expB = this.$abtest('experiment-b', true, true, 1);
console.log('expB is always 1');
// Scenario: Prevent reporting analytics in a specific part of the code.
// (meaning.. assigning a variant but preventing it from being reported).
const expC = this.$abtest('experiment-c', true, false)
console.log('expC is ' + expC + ' but was not reported');
// Scenario: We have steps and we want to avoid activating the a/b test in any step.
// (meaning.. avoid assigning a variant and reporting it).
const expD = this.$abtest('experiment-d', false)
console.log('expD is always 0');
}
}
```
An example of event properties reported to Segment:
```js
{
experiment: 'experiment-x',
variant: 1
}
```
## Credits
- [Brandon Mills](https://github.com/btmills) for `weightedRandom()`
## License
See the LICENSE file for license rights and limitations (MIT).