As Conversion Specialists at Blue Mango, we don’t like to rely on our gut feeling. That’s why we tests as much as we can. The success of these tests is often due to looking at more than the quantitative data only.

The ‘why’ of A/B-testing

Inspiration doesn’t just fall from the sky. Before we start testing we like to do some preliminary research. For instance, heat maps can help us to determine which elements on a page get attention and which are ignored by our visitors. Let’s say, a heat map of a certain page shows us that there are hardly any mouse moves near one of the offers. With the help of Visual Website Optimizer (VWO) we can design a variant that contains some directional cues to the neglected offer and launch an A/B-test. So far so good..

But imagine that we don’t see a significant difference in conversions between the page with and without the directional cues. The big question then is; were the cues not driving enough attention to the offer or was the offer simply not attractive enough? In both cases there is something to improve with a follow up A/B-test. But to get an answer to this question, again we need the heat maps.

Integrating the non-integratables

Now there are a few examples of heat map tools that can easily be integrated with A/B-testing tools, using nothing more than a simple checkbox. The integration itself is quite important, because otherwise the variants will all end up in one big messy heat map. This would also be the case when using one of our favorite heat map tools: Mouseflow, because VWO doesn’t support an integration with them. Unless..

We create our own connection! Mouseflow supports the functionality to configure your own page path via the mouseflowPath variable. If we add the variant of the A/B test to the actual path we can measure all variants separately in Mouseflow. VWO stores the variant of the A/B test in a cookie called _vis_opt_exp_[experiment_id]_combi. By using the getCookie function we retrieved the variant which we added to the mouseflowPath variable before the Mouseflow script was loaded.

<script>
  function getCookie(cname)
  {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++)
    {
      var c = ca[i].trim();
      if (c.indexOf(name)==0) return c.substring(name.length,c.length);
    }
    return "";
  }
  var experimentId = 40;
  if(getCookie('_vis_opt_exp_'+experimentId+'_combi') != ""){
      var mouseflowPath = location.protocol + '//' + location.host + location.pathname + getCookie('_vis_opt_exp_'+experimentId+'_combi');
  }
  </script>
  

Please take into account that the variable experimentId (40 in this example) should be changed to the actual experiment ID.

So there you go! Separate heatmaps for each variant of you’re A/B-test. So now we also don’t have to rely on our gut feeling anymore when we’re wondering why the variant did or didn’t win the test.

Written together with Bart Persoons