https://github.com/schibsted-tech-polska/sabot

Simple A/B tester, implemented completely on the frontend with option to report to any backend.
https://github.com/schibsted-tech-polska/sabot

Last synced: 3 days ago
JSON representation

Simple A/B tester, implemented completely on the frontend with option to report to any backend.

• Host: GitHub
• URL: https://github.com/schibsted-tech-polska/sabot
• Owner: Schibsted-Tech-Polska
• Created: 2015-06-22T10:05:01.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2016-03-04T10:27:49.000Z (over 8 years ago)
• Last Synced: 2024-11-09T19:02:36.578Z (5 days ago)
• Language: JavaScript
• Size: 68.4 KB
• Stars: 2
• Watchers: 16
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# sabot

[![Build Status](https://travis-ci.org/Schibsted-Tech-Polska/sabot.svg?branch=master)](https://travis-ci.org/Schibsted-Tech-Polska/sabot)

Sabot (Simple A/B Testing tool) is a client-side library for A/B testing with minimal setup and requirements.

* tests are set up directly in your HTML markup

* runs entirely on the client-side

* can report to any backend of your choosing with a minimal amount of glue-code

## Requirements

JQuery has to be available in the environment for sabot to work.

## Setup

You need the sabot.js file - the easiest way is using bower:

```sh

# bower install --save sabot

```

And in your HTML:

```html

```

First, you have to set up a test with a `` tag.

```html

  

```

* **data-name** - that's the name of the test you want to run

* **data-variants** - these are all the possible variants the test will include, along with what percentage of users

  you want to present with a given variant

* **data-conversion-event** - a selector and a DOM event that will say "successful conversion" - the example means

  "whenever somebody clicks on an element with class 'button'". You can use any JQuery-compatible selector as the

  first part, and any DOM event as the second.

Once you have a test set up, variants are trivial to do:

```html

  


    Subscribe!

  

  


    Interested?

  

```


Sabot will pick one variant per-test (according to the rules in the meta tag), and leave just those containers that are

marked with `data-ab="test:"`.

## Reporting

Sabot can report to any back-end. It accepts two callbacks - one will be called when a variant is picked, the other -

when a successful conversion is recorded. It expects the callbacks to return a promise/deferred, so you can return the

result of `$.ajax()` directly:

```javascript

sabot({

  onVariantChosen: function(test, variant) {

    var url = "http://my-backend.example.com/?test=" + test + "&variant=" + variant;

    return $.ajax({type: 'PUT', url: url}); // send a PUT request.

  },

  onConversion: function(test, variant) { ... }

});

```

And that's it - you should be set up for your A/B tests!

## Local vs global conversion events

By default, the listener looking for conversion events will only listen to events **from inside the data-ab containers**. If you want to listen to events happenning anywhere in the document, it's a bit different:

```html

  

        

  


    

  

  


  

  Buy!

```


Note that **data-conversion-event-global** is used instead of data-conversion-event - this ensures that events coming from the top-level  will be captured properly.