Running an A/B Test

Fortunately, the KISSmetrics Javascript API allows you do most of the work for an A/B experiment with one call to KM.ab. Check our APIs section for more details on which APIs support which features. Below constitutes a complete A/B test:

A few things to note:

<!-- 
  Here is our signup button. Notice that it is hidden by
  setting the style to "display: none". Also notice that
  it is by default using the "green" image.
-->
<img src="/images/green.png" id="signup_button" style="display: none"/>

<script>
  // If for some reason KISSmetrics doesn't load or there is an
  // error we'll just show the default green button after 1.5s
  var abTimeout1 = setTimeout(function(){
    document.getElementById("signup_button").style.display = '';
  }, 1500);
  
  // Now we need to add some Javascript code to run our A/B test
  // Using _kmq.push to call our setup function ensures that it 
  // is only called once KM is loaded
  _kmq.push(function(){
    // Set up the experiment (this is the meat and potatoes)
    var color = KM.ab("Signup Button Color", ["red", "green"]);
    // Set the button color
    var button = document.getElementById("signup_button");
    button.src = "/images/"+color+".png"; // Set the button color
    button.style.display = ''; // Show the button
    // Clear the timeout, since this worked fine
    clearTimeout(abTimeout1);
  });

  // Record when someone clicks on the button
  _kmq.push(["trackClick", "signup_button", "Clicked Signup"])
</script>

• We use the asynchronous API to make sure that our page will still work in the rare event that the KISSmetrics Javascript doesn’t load (and also to prevent Javascript timing errors). If you just call KM.ab without going through _kmq you risk exposing your users to Javascript errors.
• We keep the button hidden until we determine the color. To make sure our users see a button (even if there is an error with KISSmetrics) we also set a timeout to display the button. While this latter step isn’t strictly necessary, it is strongly recommended.
• In this example we use the result of KM.ab to set the src attribute of our image. If the variants you were testing were more complicated you might have both variants in HTML, as two separate elements on the page (with both hidden) and then just show the appropriate variant when you get the selected variant from KM.ab.
• We use the trackClick method to record when a user clicks on our signup button. Notice how this event doesn’t have any reference to our A/B test. That’s because we don’t need to tie them together; the results of all of our A/B experiments will be available for every event you record with KISSmetrics on your site. So if you are already recording events on your site with KISSmetrics it will be even easier for you to integrate A/B testing - just add the experiments and they’ll interface with your existing events.

KM.ab does several things. It:

• Randomly assigns the current visitor to one of the variants passed in and returns the selected variant.
• Ensures that subsequent calls will return the same variant for the same visitor.
• Sets a KISSmetrics property with a name equal to the name of your experiment and a value equal to the selected variant (so in our example above it will set the property “Signup Button Color” to “red” or “green”). You will be able to use this to segment your visitors when viewing your funnel in KISSmetrics.