🧬 Nuxt A/B Testing

[![Nuxt][nuxt-src]][nuxt-href] [![npm version][npm-version-src]][https://www.npmjs.com/package/nuxt-ab-testing]

A powerful and easy-to-use A/B testing module for Nuxt.js applications.

📚 Table of Contents

• Features
• Installation
• Usage
  • Basic Setup
  • Creating an Experiment
  • Checking Variants
  • Tracking Events
• API Reference
• Configuration
• Contributing
• License

✨ Features

• 🚀  Easy integration with Nuxt.js projects
• 🔧  Automatic variant assignment
• 📊  Built-in event tracking

💻 Installation

Install the module using your preferred package manager:

# Using npm
npm install nuxt-ab-testing

# Using yarn
yarn add nuxt-ab-testing

# Using pnpm
pnpm add nuxt-ab-testing

🚀 Usage

Basic Setup

1. Add the module to your nuxt.config.ts:

export default defineNuxtConfig({
  modules: ["nuxt-ab-testing"],

  public: {
    abTesting: {
      projectId: "your-project-id",
    },
  },
});

Creating an Experiment

Use the useExperiment composable in your Vue component:

<script setup>
import { useExperiment } from "#app";

const experiment = useExperiment("66b035275d5278173af744xx");

experiment.setVariants([
  { id: "66b035275d5278173af744xx", name: "blue", weight: 0.5 },
  { id: "66b035275d5278173af744xx", name: "red", weight: 0.5 },
]);
</script>

Checking Variants

Check which variant the user is assigned to:

You can use experiment.isVariant to check if the user is in a specific variant.

It works in both template and script setup.

// script setup
<script setup>
const buttonColor = experiment.isVariant("blue") ? "blue" : "red";
</script>

// template
<template>
  <button v-if="experiment.isVariant('blue')" class="bg-blue-500">
    Click me
  </button>
  <button v-else class="bg-red-500">Click me</button>
</template>

Tracking Events

Track conversion events using the trackExperimentEvent composable:

<script setup>
function handleClick() {
  trackExperimentEvent("66b035275d5278173af744xx");
}
</script>

<template>
  <button @click="handleClick">Click me</button>
</template>

📘 API Reference

useExperiment(experimentId: string)

Creates an experiment instance.

• setVariants(variants: Variant[]): void - Sets the variants for the experiment
• isVariant(variantName: string): boolean - Checks if the current variant matches the given name
• currentVariant: Ref<Variant | null> - The current variant for the user

trackExperimentEvent(eventId: string, data?: object)

Tracks a custom event for the experiment. Optionally pass data to track.

⚙️ Configuration

Configure the module in your nuxt.config.ts:

export default defineNuxtConfig({
  // ... other config
  abTesting: {
    projectId: "your-project-id",
    cookieKey: "experiments",
  },
});

IMO it's better to manually track page views using the trackExperimentEvent composable. It's not an analytics app, so only track what you need.

🤝 Contributing

If you do have suggestions for improvements, let me know!