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!
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
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. |
To see the different versions of your page, append #!dev to the url. Then, open your console and refresh the page. That's it.
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.