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: 3 months 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 (about 3 years ago)
- Default Branch: master
- Last Pushed: 2023-12-20T17:35:51.000Z (over 1 year ago)
- Last Synced: 2024-04-25T14:02:06.813Z (about 1 year 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
debug: process.env.NODE_ENV !== 'production', // 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.
### `debug`
- Type: `Boolean`
- Default:
- Development: `true`
- Production: `false`
Enables or disables printing Segment reports to the console.
## Usage
It can be used inside components like:
```js
{
data: () => ({
payBtnLabel: null as string | null,
}),
mounted() {
// Scenario: Determine an experiment variant and display a label accordingly.
const expA = this.$abtest('experiment-a');
if (expA === 0) {
this.payBtnLabel = 'Place order';
} else {
this.payBtnLabel = 'Pay now!';
}
// Scenario: Force a specific variant programmatically.
const expB = this.$abtest('experiment-b', { forceVariant: 1 });
console.log('Variant for expB is always 1');
// Scenario: Assign a variant and report it for analytics.
const expC = this.$abtest('experiment-c', { reportVariant: true });
console.log(`Variant for expC is ${expC}, and it was reported.`);
// Scenario: Avoid activating an A/B test at a specific step.
// (No variant assignment or reporting is done.)
const expD = this.$abtest('experiment-d', { assignVariant: false });
console.log('Variant for expD is always 0');
// Scenario: Report analytics and append specific properties.
// (experiment, but additional data is sent.)
const expE = this.$abtest('experiment-e', { reportVariant: true, segment: { properties: { device: 'mobile' } } });
console.log(`Variant for expE is ${expE}, and will include the properties: { experiment: 'experiment-e', variant: ${expE}, device: 'mobile' }`);
}
}
```
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).