Alternative #6
Description
This is how I added optimizely to my app:
/**
* Adds Optimizely experiments to Toggles
*
* @NOTE Experiment names must match toggle names
* - Case-insensitive
* - Can use a ':' to separate toggle name and additional description
* Example: "newBanner: skewed to ios only"
* @NOTE Variation names should match toggle values
* - 'Original' variation is treated as undefined aka: FALSEY
* - Any other variation name is set to a string of the variation name aka: TRUTHY
*
*/
angular.module('app.core')
.run(function($rootScope, $window, Toggles) {
if (!$window.optimizely)
return;
function updateToggles() {
$window.optimizely.data.state.activeExperiments.forEach( experiment => {
let name = $window.optimizely.data.experiments[experiment].name.toLowerCase().split(':').shift().trim();
let variation = $window.optimizely.data.state.variationNamesMap[experiment].toLowerCase().trim();
if (variation !== 'original')
Toggles[name] = variation;
});
}
// Initialize the toggles
updateToggles();
// Update toggles whenever the page changes
$rootScope.$on('$locationChangeSuccess', () => {
$window.optimizely && $window.optimizely.push('activate');
updateToggles();
});
});So experiments and variations map as such:
| Experiment Name | Variation Names | Toggle Name | Toggle Values |
|---|---|---|---|
| NewNav | Original, Active | newnav | undefined, 'active' |
| NewNav: San Francisco Only | Original, Active | newnav | undefined, 'active' |
| Banners | Variation 1 | banners | 'variation 1' |
| banner: Holiday Variations | Christmas, Hanukkah, New Years | banner | 'christmas', 'hanukkah', 'new years' |
You can then inject Toggles anywhere in your app and act upon it and the designers do not have to write any javascript, you simply agree with them on toggle names and (if more than one) variation names.