# A simple A/B testing setup with Simple Analytics

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

{% embed url="<https://twitter.com/daniel_nguyenx/status/1692097334409343443>" %}

### 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.

{% embed url="<https://twitter.com/daniel_nguyenx/status/1695352922991890477>" %}

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.

{% code lineNumbers="true" %}

```jsx
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>
  )
}
```

{% endcode %}

### 2. Track the conversion of each version

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

I use [Simple Analytics](https://www.simpleanalytics.com/?referral=duvuw) for this, but you can use any other tools.

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:

```jsx
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.

![Set up goals in Simple Analytics](https://boltai.com/images/blog/sa-setup-goals.webp)

Do the same for variant `b`.

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

![Conversion stats in Simple Analytics](https://boltai.com/images/blog/sa-ab-test-report.webp)

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

Hope you find it useful. Find me on [Twitter](https://twitter.com/daniel_nguyenx) 👋


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.boltai.com/blog/a-simple-ab-testing-setup-with-simple-analytics.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.