Getting Started
First, create an account at engaugeab.com and get an API key.
Installation
Install the Engauge tracking snippet
With NPM:
npm install engauge --save
Setup
Here is a simple example for setting up an experiment with jQuery:
Create a new Engauge object, passing in your Api key
var apiKey = 'yourAccountApiKey';
var engauge = new Engauge(apiKey);
Define the variations
var experiment = engauge.experiment({
name: 'signup-button',
variants: {
'#ff5722': {
activate: function() {
console.info('you\'re about to see version A of \"Try it Free\" button, color #ff5722 ...');
$('#signup-col').html('<button id="signup-button" class="btn btn-raised btn-lg btn-warning">Try it Free</button>');
}
},
'#9c27b0': {
activate: function() {
console.info('You\'re about to see version B of \"Try it Free\" button, color #9c27b0 ...');
$('#signup-col').html('<button id="signup-button" class="btn btn-raised btn-lg btn-warning-b">Try it Free</button>');
}
}
}
});
- You can assign any function to the
activate
method for each variation. - Protip: if you name your goal any valid css color, the chart in the dashboard will be colored accordingly.
- Experiment names must be unique.
Define a goal
var button_clicked_goal = engauge.goal('button clicked');
$('#signup-button').on('click', function() {
button_clicked_goal.complete();
});
- The chosen variant will be tied to the goal automatically.
Plug the goal into the experiment
button_clicked_goal.add_experiment(experiment);
Full Example
function initEngauge() {
var apiKey = 'test';
var engauge = new Engauge(apiKey);
var experiment = engauge.experiment({
name: 'signup-button',
variants: {
'#ff5722': {
activate: function() {
console.info('you\'re about to see version A of \"Try it Free\" button, color #ff5722 ...');
$('#signup-col').html('<button id="signup-button" class="btn btn-raised btn-lg btn-warning">Try it Free</button>');
}
},
'#9c27b0': {
activate: function() {
console.info('You\'re about to see version B of \"Try it Free\" button, color #9c27b0 ...');
$('#signup-col').html('<button id="signup-button" class="btn btn-raised btn-lg btn-warning-b">Try it Free</button>');
}
}
}
});
var button_clicked_goal = engauge.goal('button clicked');
$('#signup-button').on('click', function() {
button_clicked_goal.complete();
});
button_clicked_goal.add_experiment(experiment);
}
initEngauge();