Javascript multivariant and AB testing using Google Analytics and Math.rand()
JavaScript CoffeeScript Shell
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
public
README.markdown
start.sh

README.markdown

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.