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 tests as you or you Product Manager wishes

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