ab-translate

ab-translate

Quickly create AB Tests for texts without coding via Wix Babel & Guineapig.

The prcess requries two simple steps:

1. Setup - one time config for a project to support the AB Translate flow
2. Test - create as many text tests as you or you Product Manager wishes without writing a single line of code!!!!1 😱

Setup

Do this once, for each project that you want to run translations tests in

Yoshi (new stack)

1. Install the package npm i ab-translate --save or yarn add ab-translate
2. Configure the specs defaults in your package.json file (example):

"yoshi": {
  "petriSpecs": {
    onlyForLoggedInUsers: false, // default: true
    scopes: ['my-projects-translation-scope'] // default: [<artifactId>]
  }
}

1. Save the petri experiments object to the window (e.g. window.__EXPERIMENTS__ = '<%= experiments %>';). Notice: make sure that you conduct the experiments for the scope in step #2
2. In the src/i18n.js file add the following code to the backend task (example)

import abTranslate from ‘ab-translate/dist/src/abTranslate-runtime’;

backend: {
  crossDomain: true,
  parse: translations => {
    try {
      return abTranslate(window.__EXPERIMENTS__, JSON.parse(translations));
    } catch (e) {
      return translations;
    }
  }
}

Wix Grunt (old stack)

1. Install the package npm i ab-translate --save
2. Configure the specs defaults in your local Gruntfile.js file:

grunt.modifyTask('petriExperiments', {
  options: {
    onlyForLoggedInUsers: false, // default: true
    scopes: ['my-projects-translation-scope'] // default: [<artifactId>]
  }
});

1. Add the Angular abTranslateProvider to your index.vm file (example)

<script src="bower_components/ab-translate.git/abTranslate.angular-runtime.bundle.min.js"></script>

1. Transform the translations using the abTranslateProvider and the project's experimentManagerProvider (example). Notice: make sure that you conduct the experiments for the scope in step #2

angular.module('myApp', [])
  .config(function($translateProvider, abTranslateProvider, experimentManagerProvider) {
    const preferredLanguage = $translateProvider.preferredLanguage();
    const translations = $translateProvider.translations()[preferredLanguage];
    const translationsWithExperiments = abTranslateProvider.abTranslate.default(
      experimentManagerProvider.experiments,
      translations
    );
    $translateProvider.translations(preferredLanguage, translationsWithExperiments);
  });

Test