<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1523709774591272&amp;ev=PageView&amp;noscript=1">

[How-to] perform A/B testing on your website

Posted by giosg.com on 07-Jul-2016 07:00:00

In a previous blog post (here), we gave you hands-on instructions on how to create rules. This time we are going to show you how to perform A/B testing for rules to compare two versions against each other to help you determine which one performs better.

You can use A/B testing to e.g. compare proactive and reactive approaches against each other. For example, you can show half of the group a custom autosuggest chat message and offer the other half a  static chat button element (which they can click if they want to start chatting). In addition, you can take an action, like autosuggest chat message or free delivery pop-up, modify it to create a second version (e.g. change the text, picture or color) and then, show half of your traffic the original version and the other half the modified version. Let's try!

Requirements

Degree of difficulty  Advanced                                  
Time required  15 min

To do this you need have giosg LIVE with the following features in use:

  • giosg RULES - for building custom rules to match actions with unique situations

Instructions

In our example, we have two different custom autosuggest (chat) messages that we are comparing against each other:

  • Group A visitors will be greeted with: ”Hi, what brings you in today?”
  • And, Group B visitors with: ”Hi, are you looking for something specific?”

 To get you started, there are three simple steps to follow:

1) First, create a ”Lottery rule” i.e. a rule that randomly draws visitors into either group A or B.

Lottery rule

  • Go to Rules and click + Create new rule, a new window will open
  • Choose the room where you want to display this rule from the ”At these rooms” menu
  • Click + Add new condition button to choose the right condition. Choose an action from the ”Perform this action” menu, in this case choose ”Run a custom Javascript” and then add this to the code field:

if (!window.localStorage.getItem('g_visitor_group')){

    var bool = Math.random() >= 0.50;

    if (bool){

        window.localStorage.setItem('g_visitor_group', 'A');

    }else{

        window.localStorage.setItem('g_visitor_group', 'B');

    }

}

  • Add a name for the rule by typing it to the ”Name” field under ”Settings” menu, remember to also enable the rule by clicking the ”Enabled” option.
  • Save changes

2) Then, create a variation to compare against the original

Rule group A

In this case, create two different custom autosuggest messages (one for Group A and another for group B): 

  • Choose the room where you want to display this rule from the ”At these rooms” menu
  • Click + Add new condition button to choose the condition to match. In this case, select ”Evaluate JavaScript expression” (under Advanced options) , then choose ”When truthy” and copy the following text to the field on the right :
 window.localStorage.getItem('g_visitor_group') ==  'A'
  • After this click + Add another action button and select ”Autosuggest chat”. Then type custom autosuggest message to the field under (=the greeting you want to show the visitor). Select a default person for autosuggest (=who is greeting the visitor). You can leave the Autosuggest close delay field empty.
  • Add a name for the rule by typing it to the ”Name” field under ”Settings” menu (e.g. autosuggest group A), remember to also enable the rule by clicking the ”Enabled” option.
  • Save changes

Then, before jumping to the next step, create another rule for group B. There are three (3) simple things you need to do differently, otherwise you can follow the instructions above.

  • After you have chosen the room where you want to display the rule, click + Add new condition button to choose the condition to match. Select ”Evaluate JavaScript expression” (under Advanced options) , choose ”When truthy” and copy the following text to the field on the right :
 window.localStorage.getItem('g_visitor_group') ==  'B'

  • Type a different custom autosuggest message (=the greeting you want to show the visitor)
  • Add a different name for the rule (e.g. autosuggest group B)

3) Use Rules Reporting to monitor the performance

When you have created the rules (lottery, group A and group B) and enabled them, then you still have the most exciting part ahead of you; monitoring the results. NB! The data is updated once in every 24 hours so you need to wait until the next day to get the first report.

Rules Reporting

To do this:

  • Go to Reports -> Rules
  • Click the + button to select rules to compare. You can select up to 6 rules to compare. In this case, you should select at least those Autosuggest group A and Autosuggest group B rules we just created.
  • Take a look at how different rules affect your goals (=shopping basket) and make changes accordingly

Congratulations! You have succesfully performed A/B testing for rules! You can now apply the same logic to test other rules (like pop-ups and banners) on your site as well.

If you have any questions or want to know more about creating and testing rules, come and chat with us!

 

Topics: How to