I was talking to a friend who runs a blog with a shop and we were discussing how he could improve some conversions.

I suggested that he A/B test some elements. He was convinced that he didn’t have the time or money for building a split testing system. He was under the impression that A/B testing must involve huge sample sizes, separate systems and complex analysis.

To help him get started I showed him how I do A/B testing on one of my side projects using only very simple JavaScript and Google Analytics.

It is very simple to set up, track and compare.

Here’s the an example based on the code from my application written in Vue and uses vue-gtag

if (localStorage.abVariant == null){
  if (Math.random() >= 0.5){
    localStorage.abVariant = true;
  } else {
    localStorage.abVariant = false;
  }
}

if (localStorage.abVariant === 'true'){
  this.abVariant = true;
  this.$gtag.event("A/B test name", {
    'event_category': "A/B Testing",
    'event_label': 'Variant shown'
  });
}

The template is very simple:

<button>
  <template v-if="abVariant">
    Variant button text
  </template>
  <template v-else>
    Original text
  </template>
</button>

The analysis is then very easy. You create one segment in Google Analytics that includes only sessions that have had an event with “A/B test name” as the action and another that excludes them.

Then you can compare the two segments for anything you need. The most obvious would be the difference in goal completions but also for things such as pages per session, session duration or time on page, and even flow.

It’s also easy to track the cohort size, so you can use an A/B Test calculator to see if your results are significant.

You can even change the 0.5 above if you want a different portion of your users to get the variant.

The example here is for Google Analytics but you can do the same with Mixpanel or Plausible just by changing the way the event is triggered.

Is it perfect? No, but it’s close to it and takes about ten minutes to implement.