255BITS/xander

Javascript multivariant and AB testing using Google Analytics and Math.rand()

Xander

Multivariate Testing in JavaScript made easy. Also see xander.io, the pro version of xander.

Principles:

• Multivariate testing should be simple for developers and designers
• Variants should be cheap to add and simple to view
• Analytics should be useful and available for review
• If you are using xander.io, your website should get better over time without manual intervention.

Library Requirements

• xander.io (optional)
• Google Analytics
• jQuery

Browser support:

• Internet Explorer 6 and above
• Firefox 2 and above
• All modern browsers

Installation

• Include xander-client javascript file

CDN

  <script src='http://cdn.xander.io/xander-1.0.js'></script>

Usage

Multivariate testing for HTML elements

• Defining a variant

    <div id="callToAction">
      <div data-variant="logic" class='red hide'>
        If you have a website with users, you should be multivariate testing.  It's the only way to ensure your changes are actually what users want.
      </div>
      <div data-variant="google" class='blue hide'>
        Multivariate testing is used by Google to optimize their search results.
      </div>
      <div data-variant='silly' class='green hide'>
        You can't multivariate test your life... yet - but now you can easily multivariate test your websites!
      </div>
    </div>

• This variant sets up a three way test between logic, google, and silly calls to action variants so we can see which phrasing works best.

• The data will be available in Google Analytics (or xander.io if you chose to use it)

• We have a simple hide class that sets 'display: none'. This avoids flicker after the page loads.

Multivariate testing for CSS classes

• Defining testable CSS classes

    <section id='signup' data-css-variants="green blue" />

• One of the two green or blue classes will be added to your #signup button.

• Variation reports are based on ids

Goals

Goals are a simple way to track conversions. In Google Analytics they correlate specifically to _trackPageview's.

Defining a goal

  <form data-goal="New User" onsubmit='processInfo(); return false'>
    <!-- Here's where you could multivariate test the form. -->
    <h1> Sign up for our amazing product </h1>
    <input type='submit'> Sign up </input>
  </form>

Potential Pitfall

Be careful when using cross-domain links that redirect the browser, xander may not get a chance to fire the goal reached event. This is not a concern if the goal targets a new window.

Technical Details of Goals

Goals in Xander work by binding to an element's jquery click event (or submit event in the case of a form).

If you can't get the goal to trigger - console.log is your friend. Open up your console and you will see some messages from xander when your page is setup and again when a goal is pressed.

If all else fails, you can call:

  xander.goalReached("New User");

Verifying your variant test is setup

• Setup your variants and page goal
• Click your page goal
• Log in to Google Analytics
• If you are using Google Analytics and not xander.io, you will likely face a problem where Google Analytics will reflect your test data. This can be filtered in google analytics, or just use http://xander.io.

Rerolling a page

You can now call a rerollVariants method to get a whole new version of your site.

  xander.reroll(); // reroll all CSS and content variants
  xander.reroll($("#choices")); // reroll the #choices variant

Event Handlers

onVariantChosen(callback)

variant is an object that looks like:

{
  'section id' : 'chosen variant'
}

Usage

This allows you to execute custom javascript for specific variants

xander.onVariantChosen(function(variant) {
  if (variant.signup === 'red-button') {
    // Execute custom javascript for the red button variant of signup
  }
});

Commercial offerings

If you like xander, but don't like the sample distribution using Math.rand() - or don't like having to review your variant's performance, check out xander.io . It's a SAAS that uses 90/10 testing to figure out your best performing variant (with a friendly UI).

Note, xander inserts a tracking pixel on your site in the event that you would like to upgrade. To disable this, add this after your script include.

  <script>
    xander.disableTrackingPixel()
  </script>

Related Work

• ABalytics
• Send us a message if there's anything else that should be listed.