Viewing the variations of your test on a live site can be a drag. Normally, you’ll have to force your testing tool of choice to show you a specifiek variation. With Optimizely, you basically have three options:

• Preview variations in Optimizely
• Force 100% of the traffic to one variation
• Manually set up a URL parameter based on the experiment ID & the variation you want to show

Wouldn’t it be great to easily switch between your variations when you’re looking at the live website (with the test running)? Well, now you can.

Using Andre Scholten’s VWO Switcher as a base, I’ve created a JavaScript bookmark that acts as a switcher for Optimizely. All you have to do is add a bookmark and fill out the code below as the location.

Bookmark code:

javascript:function readCookie(o){for(var e=o+"=",t=document.cookie.split(";"),n=0;n<t.length;n++){for(var i=t[n];" "==i.charAt(0);)i=i.substring(1,i.length);if(0==i.indexOf(e))return i.substring(e.length,i.length)}return null}var names="Fill out your Optimizely variation of choice:";if(null!==readCookie("optimizelyBuckets")){if(txt=prompt(names+"\r\nChoose version: \n 0 for Default\n 1+ for Variations"),null!=txt){var oTest=decodeURIComponent(readCookie("optimizelyBuckets"));oTest=JSON.parse(oTest);var oId="";for(var key in oTest)oId=key;window.location.href=document.location.protocol+"//"+document.location.host+document.location.pathname+"?optimizely_x"+oId+"="+txt}}else alert("No live experiment on this page.");
  

When you click the bookmark, you’ll get the following pop-up:

Just type your variation of choice in the input field and press OK. That’s it. If you want to know more about the technical details, read ahead.

How does it work?

The idea is simple: get the Optimizely experiment ID of a running test and use Optimizely’s variation parameter to force a variation. The magic is getting the correct experiment ID automatically. Here’s the code that does just that:

          var oTest = decodeURIComponent(readCookie('optimizelyBuckets'));
          oTest = JSON.parse(oTest);
          var oId = '';
          for (var key in oTest) {oId = key;};
          window.location.href = document.location.protocol + '//' +document.location.host + 					document.location.pathname + '?optimizely_x' + oId + '=' + txt;

  

An explanation for each line:

• var oTest: get & decode the value of the optimizelyBucket cookie (with a standard cookie function).
• JSON.parse(oTest): the optimizelyBucket cookie contains a JSON object. Parse it, so you can use it as a JSON object.
• var oId: get the first key of the object (this is the experiment ID).
• window.location.href: redirect the page to the current url with the correct ‘?optimizely_x’ parameter added to force a variation.

That’s it. If you’re interested in the full beautified code of the bookmark, here it is:

var names = "Fill out your optimizely test ID:";

  function readCookie(name) {
      var nameEQ = name + "=";
      var ca = document.cookie.split(';');
      for (var i = 0; i < ca.length; i++) {
          var c = ca[i];
          while (c.charAt(0) == ' ') c = c.substring(1, c.length);
          if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
      };
      return null;
  };
  if (readCookie('optimizelyBuckets') !== null) {
      txt = prompt(names + "\r\nChoose version: \n 0 for Default\n 1+ for Variations");
      if (txt != null) {
          var oTest = decodeURIComponent(readCookie('optimizelyBuckets'));
          oTest = JSON.parse(oTest);
      var oId = '';
          for (var key in oTest) {oId = key;};
      window.location.href = document.location.protocol + '//' +document.location.host + document.location.pathname + '?optimizely_x' + oId + '=' + txt;
       }
  } else {
      alert("No live experiment on this page.");
  };
  void(0);
  

If you regularly test with Optimizely, life just became a little easier.

Happy switching!