A/B testing made incredible simple
Never be happy with your conversion rate. Just remember that every page can be better. This library makes A/B testing incredible simple and works very well with web components. Go here to see a demo https://appnest-demo.firebaseapp.com/ab-test.
➤ Table of Contents
- ➤ Installation
- ➤ Usage
- ➤ A/B test web components using lit-html
- ➤ How to measure the data using Google Analytics?
- ➤ Contributors
- ➤ License
npm i @appnest/ab-test
experiment() function to add an experiment where you test one of multiple variations. The function takes an id of the experiment and an array of potential variations. The function optionally takes an instance of a
Test class where the selected values will be added. If none is specified the function will use a global instance.
We want the headline to be the same next time the user reloads the page. To load the selected variations from local storage we use the
load() function on the
To save the values to local storage we use the
Ultimately we want to save the selected variations each time new experiments are added to the test. To do that we listen for the
update event on the
test object. It's also here we want to send information about the selected values to our analytics tools.
➤ A/B test web components using lit-html
If you want to test different web components using
lit-html you can use the
experimentElement() function. This function is a lit directive that takes an id of the test and a map, mapping each tag name to its corresponding import function. Optionally it takes a map of properties that should be set on the element. If the element doesn't need an import simple pass the value null.
➤ How to measure the data using Google Analytics?
You can use many tools to measure the AB test. Google Analytics is a nice free choice. Start by going to https://analytics.google.com/analytics/web/ and create an account. Then add the tracking code to your
Now, let's say you want to AB test a title for the header. It can either be "Buy today" or "Get instant access". First you should define the title using the
experiment() function, giving it an ID and an array with the two variations.
Add the title to the correct place in the header. Next you want send the data to Google Analytics. You can do that by using the global
gtag() function and setting a dimension. Read more about the approach here. We are going to create the dimension in Google Analytics in next step, but lets assume for now its
dimension1. Since dimensions only take primitive values we stringify the object specifying the selected variations.
We now go to
Google Analytics → Admin → Property → Custom Definitions → Custom Dimensions and create a custom dimension called
AB Test. Set the scope to
session. Remember that you cannot delete custom dimensions after they have been created and that you can have a maximum of 20 in each view. Therefore you can consider creating a new view for this purpose.
Next we go to
Google Analytics → Admin → View → Segments and create two segments. We call the first segment for
AB Header Title 1 and the other segment for
AB Header Title 2. In the first segment we go to the tab
Conditions and add a filter that includes the
AB Test dimension we created before if the dimension contains
"header.title.text":"Buy today". We do the same for the other segment but only includes the dimension if it contains
"header.title.text":"Get instant access".
Then we go to
Google Analytics → Admin → View → Goals and create some goals that can capture conversions. That could for example be sign ups to the newsletter. Make sure to track this from your app since we need the data to figure out which variation is doing best.
Now we need to set up a view so we can figure out what variations are doing the best. Go to
Google Analytics → Customization → Custom Reports and create a new report. Select the conversion rate of the goals you are measuring as your
Metric Groups. The
Dimension Drilldowns should be the
AB Test dimension you created.
Go to the report you just created and select the two segments
AB Header Title 1 and
AB Header Title 2. Click save and you are done! You will now be able to track which headline is doing best. Wait a couple of weeks and select the one that are doing best.
You should always try to only have one AB test going on at a given time.
Licensed under MIT.