nuxt-goptimize
NuxtJS module for A/B testing with Google Optimize
Note: Google Optimize is used for reporting (only).
Table of contents
Main features
- Run multiple experiments simultaneously
- TypeScript support
- Cookies to persist variants across users
- Event handlers
ga
ordataLayer
- Force a specific variant via url or param. E.g.
url?experiment-x=1
orthis.$exp('experiment-x', 1);
- Disable all a/b tests by cookie (
gopt_disabled=1
), which can be useful for E2E tests in CI/CD pipelines
Dependencies
You can choose one of the following options which injects Google Analytics into your application:
- analytics.js
- @nuxtjs/google-analytics
- 3rd-party such as Segment
Setup
Google Optimize
- Create a new experiment:
Name: Experiment X
Type of experience: A/B test
- Add variants names:
Original: this.$gexp('my_experiment') = 0
Variant A: this.$gexp('my_experiment') = 1
Variant B: this.$gexp('my_experiment') = 2
- Define a page targeting:
WHEN
URL equals
SERVER_SIDE
- Define experiment's objectives.
Nuxt.js Module
- Add
nuxt-goptimize
dependency to your project:
npm install nuxt-goptimize
- Add
nuxt-goptimize
module and configuration tonuxt.config.js
:
export default {
// ...other config options
modules: ["nuxt-goptimize"];
googleOptimize: {
experiments: '~/experiments.js', // optional
}
}
- Create the
experiments.js
in project's root with an array of your experiments. An example:
/**
* {
* name: string; A name to identify the experiment on this.$gexp('NAME_HERE')
* id: string; Experiment ID of Google Optimize
* 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",
id: "IUhKJR2MSTiPMVGAwJDFBL",
maxAgeDays: 15,
variants: [50, 50],
},
];
- (Optional) TypeScript support. Add
nuxt-goptimize
to thetypes
section oftsconfig.json
:
{
"compilerOptions": {
"types": ["nuxt-goptimize"]
}
}
Options
experiments
- Type:
String
- Default:
~/experiments.js
File path for your experiments definition.
eventHandler
- Type:
String
- Default:
ga
- Values:
ga
,dataLayer
Event handler to let Google know about variants in-use.
Usage
It can be used inside components like:
{
data: () => ({
payBtnLabel: null as string | null,
isScenarioA: true,
}),
mounted() {
// Example 1: normal usage
const activeVariant = this.$gexp('experiment-x');
if (activeVariant === 0) {
this.payBtnLabel = 'Place order';
} else {
this.payBtnLabel = 'Pay now!';
}
// Example 2: force variant 1
if (this.isScenarioA) {
this.$gexp('experiment-y', 1)
// do something else..
}
}
}
Credits
- Brandon Mills for
weightedRandom()
License
See the LICENSE file for license rights and limitations (MIT).