Skip to content

mattvv/angular-optimizely

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

angular-optmizely

A simple directive to allow A/B testing with optimizely in angular applications.

Usage

  1. bower install angular-optimizely
  2. Include the ngshowvariant.js script provided by this component into your app.
  3. Add ngshowvariant as a module dependency to your app.
  4. Insert the ng-show-variant directive into your template where you wish to conditionally show items.
<code>
    <div ng-show-variant="alphabet">variant alphabet is running</div>
    <div ng-show-variant="cactus">variant cactus is running</div>
    <div ng-show-variant="cactus,alphabet">variant cactus or alphabet is running</div>
    <div ng-show-variant="none">No variant is enabled</div>
    <div ng-show-variant="cactus,none">either variant cactus or no variant is enabled</div>
 </code>

In optimizely, add custom javascript where you wish to change the variant:

//set which variant you would like
window.variant= "optmizely1";

//tell angular the variant has changed.
var scope = angular.element(document.getElementById('main')).injector().get('$rootScope');

scope.$apply( function() {
  scope.$broadcast('$updateVariant');
});

License

MIT