Getting Started

Installation

Install the Engauge tracking snippet

With NPM:
npm i -S engauge

Setup

First, make sure to sign up for an engauge account at engaugeab.com and get an API key.

Initialize Engauge

Create a new Engauge object, passing in your Api key and keeping a reference to it.

var apiKey = 'yourAPIKeyHere';
var engauge = new Engauge(apiKey);

Define the variations

Next, define your experiment by calling engauge.experiment() and passing in an object containing the following parameters:

  • name The name for your experiment. This must be unique. Try to be descriptive and consider including the date so you don't risk naming collisions.
  • variants These are the two variants you will be using in the experiment. Pass in an object whose two keys are the names or your variants. The values for each key should be an object containing one key, activate, whose value is a function that will be called once the variant is chosen. New visitors will be put into an experiment bucket during this step, whereas returning visitors will see the same variant they saw before.

Keep a reference to this experiment.

Here is a simple example for setting up an experiment with jQuery:

var experiment = engauge.experiment({
    name: 'signup-button',
    variants: {
        // This is the first variant. It should be your control.
        '#ff5722': {
            activate: function() {
                $('#signup-col').html('<button class="variant-1 signup-button">Try it Free</button>');
            }
        },
        // This is the second variant. 
        '#9c27b0': {
            activate: function() {
                $('#signup-col').html('<button class="variant-2 signup-button">Try it Free</button>');
            }
        }
    }
});
  • You can pass any function to the activate method for each variant. Your function will be called once the corresponding variant has been chosen.
  • Hint: 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 = 'yourAPIKeyHere';
    var engauge = new Engauge(apiKey);
    var experiment = engauge.experiment({
        name: 'signup-button',
        variants: {
            '#ff5722': {
                activate: function() {
                    $('#signup-col').html('<button class="variant-1 signup-button">Try it Free</button>');
                }
            },
            '#9c27b0': {
                activate: function() {
                    $('#signup-col').html('<button class="variant-2 signup-button">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();