Start testing your pages in no time with easyAB

This plugin aims at helping entrepreneurs and tech savvy building better landing pages for their projects and products.

I'm in the mood for change.
What about a new color for my download button?
But wait. How will I be able to know which color is your favorite one?
Ok, that should do the trick:

$('#download-btn').easyab({
  'slot': 1,
  'name': 'download-button-color',
  'default-value': 'apple-green',
  'alternatives': [{
    'value': 'fire-red',
    'alternative': function($this) {
      $this.removeClass('btn-success').addClass('btn-danger');
    }
  }]
});

Hey fellow visitor, which button are you seeing right now? Apple Green or Fire Red?
Do you want to see the two versions running? I know you do.
Follow this link and reload the page multiple times.
Voilà ! You are now savvy enough to start testing on your own users using easyAB!

Multivariate testing made easy

I want to change both the text on top of my button and the color of the button. And I want to track the impact of each change independently.

That's multivariate testing. And that's easy:

  /* set an Analytics custom var on the slot 1 */
  $('.book-adjective').easyab({
    'slot': 1,
    'name': 'gs-book-adjective',
    'alternatives': [{
      'alternative': 'award winning'
    }]
  });

  /* set an Analytics custom var on the slot 2 */
  $('#purchase-button').easyab({
    'slot': 2,
    'name': 'gs-purchase-button',
    'alternatives': [{
      'alternative':
        function($this) {
          $this
            .removeClass('btn-success')
            .addClass('btn-primary');
        }
    }]
  });
/*
 *  ... don't forget to init analytics
 *  and to track whatever you feel like
 *  (e.g event on click on the purchase button)
 */

<div class="well text-center">
  <p>
  Check out my
  <b><span class="book-adjective">awesome</span>
  book</b>!
  <em>Only $4.99</em>
  </p>
  <button class="btn btn-success btn-large"
          id="purchase-button"
          onclick="_gaq.push(['_trackEvent',
              'Purchase actions',
              'Purchase']);">
    Get it now!
  </button>
</div>
                

Check out my awesome book! Only $4.99

Check out my award-winning book! Only $4.99

Check out my awesome book! Only $4.99

Check out my award-winning book! Only $4.99

Analytics

Options

easyAB let you track your changes using two ways: custom variables or events

Name type default description
slot number The custom variable's slot. required
name string The name (or key) of the custom var. required
alternatives Array.<object> The alternatives. required
Object structure:
  - alternative: required string or function.
  - value: optional string representing the custom var's value.
    default value: "alternativei" (i being the index of the array)
default-value string 'default' The name of the default value.
scope number 3 The scope of the custom var.
Name type default description
name string The name (or key) of the event. required
alternatives Array.<object> The alternatives. required
Object structure:
  - alternative: required string or function.
  - value: optional string representing the event's action.
    default value: "alternativei" (i being the index of the array)
default-value string 'default' The name of the default value.
event-label string undefined An optional label for the event.
event-value number undefined An optional value for the event.
event-noninteraction boolean true The non-interaction option of the event.
The default value for an event is usually 'false' but it makes sense
to sets this option to true in order to not affect the bounce rate.

Dev mode

To see the different versions of your page, append #!dev to the url. Then, open your console and refresh the page. That's it.

Side note - easyAB use cookies to select which version of the page users will see. Accordingly, users with cookies disabled will always see the default version of the page.

About

Developed by Romain Strock, also known as srom.
Like what you're seeing? Help me improve this plugin.
You can also follow me on Twitter, visit my github account or listen to some good music.

No more reading, no more thinking
Start building amazing landing pages with easyAB!