Optimizely and AngularJS
Hi, Has anyone had success getting Optimizely and AngularJS to work together nicely? This is something we're considering testing out and wanted to see if others have run into problems/pitfalls/etc.
Solved! Go to Solution.
We use Angular JS for our registration process as the UX is much slicker and flows nicer. We've run quite a few A/B tests on this in the past, but when we set out we had some problems.
We found that all of the changes we wanted to make to the first page worked fine, but then the changes later on didn't seem to work. We contacted support and they advised us that because of the way the Optimizely runs variations we should manually activate our experiments with the manual activation sniper you can grab when editing your activation settings for an experiment. We gave that a blast and since then no faults whatsoever.
This article touches more on the subject https://help.optimizely.com/hc/en-us/articles/200040225-Activating-an-Optimizely-Experiment-dynamica...
Have fun testing!
One of our clients, Matt, has built another interesting example of how you can run experiments with AngularJS if you prefer to show / hide parts of your AngularJS templates. That way, most of the content of the experiment lives inside of your templates and Optimizely is used to activate it: https://github.com/mattvv/angular-optimizely
I have tested the plugin made by Matt for AngularJS and Optimizely, it works really well. It's a developer approach to the problem, so if you don't have any problems deploying new code, I think it's a great solution.
Hi @steve ,
I wanted to update this post and highlight a new Optimizely feature for our Enterprise customers that makes running experiments on single-page app sites a lot easier.
Optimizely has added a 3rd activation mode called 'Conditional Activation'. This allows you to activate an experiment, repeatedly if needed, based on a code condition becoming true. In the case of an AngularJS app, you could listen to events such as $locationChangeSuccess or watch a specific element using $watch to trigger your experiment at the right time.
Hope this helps!
Thanks @james. Enterprise doesn't make sense for us, so I guess we'll be stuck with the ng-optimizely directive for a while. I am curious how you guys decide what features get matched with different service tiers, since this seems like it would be useful to all your customers.
Thanks for contributing to the Optiverse! I'm Becca Bruggman a Solutions Architect at Optimizely and wanted to provide an update to the responses given regarding Optimizely and single page applications.
When using Optimizely on an Angular website, you have two options for triggering an experiment to run with every new view loaded:
Each has similar functionality, with the difference being that manual activation sits within your site code and programmically triggers the experiment code to run and conditional activation has polling functionality built-in from the Optimizely platform that fires when the designated condition resolves to true.
Manual activation is avaliable at all plan levels and Conditional Activation is a feature included with our Enterprise packages.
You can learn more about best practices when implementing Optimizely with Angulare [here].
Please follow-up if you have any questions!