BoltAI Blog
BoltAI HomepageBlogDocumentation
  • BoltAI Blog
  • What is ChatGPT o1? Understanding Its Features, Benefits, and Uses
  • Claude 3.5 Sonnet vs GPT-4o: A Comprehensive Comparison
  • ChatGPT API Cost: Features, Plans, Pros and Cons
  • How to Use ChatGPT API: A Comprehensive Guide
  • Top AI Tools for Developers: Boost Productivity and Code Smarter
  • How to Run LLM Locally on Mac: A Step-by-Step Guide
  • How to Use ChatGPT as a Search Engine: A Complete Guide
  • ChatGPT vs Claude: Which AI Tool Fits Your Needs?
  • ChatGPT vs Gemini: Which AI Tool Is Right For You?
  • Perplexity vs. ChatGPT: Our In-Depth Comparison
  • How to Train ChatGPT on Your Own Data: Enhance AI Accuracy & Relevance
  • DeepSeek vs. ChatGPT: Which AI Model Is Right for You?
  • Exploring the Top 10 ChatGPT Alternatives for Better AI Conversations in 2025
  • Top 7 AI Tools for Students to Boost Productivity and Success in 2025
  • How to Get a ChatGPT API Key: Step-by-Step Guide
  • Tech Stack Analysis for a Cross-Platform Offline-First AI Chat Client
  • BoltAI Projects, DeepSeek support and more
  • A Developer’s Guide to Bard vs. ChatGPT for Coding
  • ChatGPT Keyboard Shortcuts for Mac: Enhance Your Workflow with Quick Commands
  • ChatGPT for Programmers: How to Boost Productivity and Efficiency
  • Here’s Our Step-by-Step Guide on How to Use Mistral 7B
  • Claude vs. ChatGPT for Coding: Which AI Assistant is Best for You?
  • Amazon Bedrock & xAI support, cache breakpoint and more
  • Advanced Voice Mode, Improved Document Analysis and more
  • How to use local Whisper instance in BoltAI
  • Optimize Ollama Models for BoltAI
  • How to use xAI in BoltAI?
  • How BoltAI handles your API keys
  • How to build an AI Coding Assistant with BoltAI
  • Best Black Friday Deals 2024 for Mac
  • A simple A/B testing setup with Simple Analytics
Powered by GitBook
On this page
  • How does it work?
  • 1. Show 2 versions of the website to different users
  • 2. Track the conversion of each version
  • 3. A report dashboard to check the result
  • That's all

Was this helpful?

A simple A/B testing setup with Simple Analytics

PreviousBest Black Friday Deals 2024 for Mac

Last updated 8 months ago

Was this helpful?

I recently tweeted this and people seems to find it interesting. In this post, I'm going to share my Super Simple Setup™ for A/B Testing with React (Next.JS) & Simple Analytics

How does it work?

So basically we need to:

  1. Randomly show 2 versions of the website to different users

  2. Track the conversion of each version

  3. A report dashboard to check the result

Let talk about each step.

1. Show 2 versions of the website to different users

We want to show each visitor a version of the website. One version is the "control" group, or the version already in use. The second version changes a single element.

How these versions behave is up to you. For example, below I was running a headline test. Variant A (left) and variant B (right).

You can run other tests for calls to action text, pop ups, featured images etc. but the method is the same.

Since I'm already using Next.JS, I figured it would be faster to just store these variant in cookie and use a simple conditional rendering to show the content of each version.

Note: I don't use Server-Side Rendering so it might render an empty h1 before it shows the correct content.

import Cookies from 'js-cookie'
import { useEffect, useState } from 'react'

function Page() {
  const [variant, setVariant] = useState(null)

  useEffect(() => {
    let cookieValue = Cookies.get('variant')
    if (!cookieValue) {
      cookieValue = Math.random() < 0.5 ? 'a' : 'b'
      Cookies.set('variant', cookieValue, {
        expires: 30,
      })
    }

    setVariant(cookieValue)
  }, [])

  return (
    <h1>
      {variant === 'a' && <span>Current headline</span>}
      {variant === 'b' && <span>New headline</span>}
      {variant === null && <span>&nbsp;</span>}
    </h1>
  )
}

2. Track the conversion of each version

Now we got the variant stored in cookie. We need to track the conversionevent of each version.

Tracking these conversion events with Simple Analytics is, well, simple. For BoltAI, I want to track the number of downloads.

So it looks something like this:

function Hero() {
  const handleBeforeDownload = () => {
    const variant = Cookies.get('variant') || null
    if variant {
      window.sa_event && window.sa_event('click_download', { variant })
    } else {
      window.sa_event && window.sa_event('click_download')
    }
  }

  return (
    <Button onClick={handleBeforeDownload}>
      <span className="mx-2">Download</span>
    </Button>
  )
}

3. A report dashboard to check the result

In Simple Analytics website dashboard, open tab "Goals", click "Add goal".

  • Pick the conversion event name. It's click_download in my case

  • Make sure to filter unique visits & with the right variant

  • Set a friendly name.

Do the same for variant b.

Now you should be able to see the conversion stats on the dashboard.

There is one minor issue here is that you will need to track the start date of the experiment manually. But hey, did I mention this is a stupid implementation 😄

That's all

I use for this, but you can use any other tools.

Set up goals in Simple Analytics
Conversion stats in Simple Analytics

Hope you find it useful. Find me on 👋

Simple Analytics
Twitter