Skip to content

๐Ÿ“Š NuxtJS module for A/B testing with Google Optimize

License

Notifications You must be signed in to change notification settings

dogchef-be/nuxt-goptimize

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

59 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

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 or dataLayer
  • Force a specific variant via url or param. E.g. url?gopt_experiment-x=1 or this.$abtest('experiment-x', true, 1);
  • Avoid activating the a/b test anywhere. E.g. this.$abtest('experiment-x', false);
  • 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:

Setup

Google Optimize

  1. Create a new experiment:
Name: Experiment X
Type of experience: A/B test
  1. Add variants names:
Original: this.$abtest('my_experiment') = 0
Variant A: this.$abtest('my_experiment') = 1
Variant B: this.$abtest('my_experiment') = 2
  1. Define a page targeting:

WHEN URL equals SERVER_SIDE

  1. Define experiment's objectives.

Nuxt.js Module

  1. Add nuxt-goptimize dependency to your project:
npm install nuxt-goptimize
  1. Add nuxt-goptimize module and configuration to nuxt.config.js:
export default {
  // ...other config options
  modules: ["nuxt-goptimize"];
  googleOptimize: {
    experiments: '~/experiments.js', // optional
  }
}
  1. 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.$abtest('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],
  },
];
  1. (Optional) TypeScript support. Add nuxt-goptimize to the types section of tsconfig.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() {
    // 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, 1);
    console.log('expB is always 1');

    // 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 expC = this.$abtest('experiment-c', false)
    console.log('expC is always 0');
  }
}

Credits

License

See the LICENSE file for license rights and limitations (MIT).