Rich-text Reply

Optimizely and AngularJS

steve 04-22-14
Accepted Solution

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.  

 

Thanks!

Level 2

MartinHerd 04-22-14
 

Re: Optimizely and AngularJS

Hey Steve, 

 

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! 

tobyurff 04-22-14
 

Re: Optimizely and AngularJS

Yes, we have quite a few customers who are using Optimizely on highly dynamic or single-page applications (SPA), often built with frameworks like Backbone.js, Ember or AngularJS.

If your app triggers URL changes via Javascript’s History API (https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history#The_push... you can simply trigger experiments that apply to the new URL to run by calling Optimizely’s Manual Activation method right after the URL changed and the new contents are available on the page: https://help.optimizely.com/hc/en-us/articles/200040225-Activating-an-Optimizely-Experiment-dynamica...

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
Optimizely
simondahla 05-12-14
 

Re: Optimizely and AngularJS

Hi Steve,

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.
doodirock 05-19-14
 

Re: Optimizely and AngularJS

So how would we test against multiple varients?  I see that we can see up the code for one varient.

steve 05-20-14
 

Re: Optimizely and AngularJS

We don't use multivariate, but the angular-optimizely directive mentioned by martinherd and tobyruff above worked pretty well for us. The directive works based on a global JavaScript variable set in your optimizely experiment and then injected into your angular scope. This approach should also work for multivariate.
Level 2
doodirock 05-21-14
 

Re: Optimizely and AngularJS

How have you guys handled this in a situation where you have a directive of your own with two different templates? That is where we are having trouble with things. We tried manual triggers, but it didnt seem to work
james 10-21-14
 

Re: Optimizely and AngularJS

[ Edited ]

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.

 

You can check out the announcement here and see some more detailed developer documentation with examples here.

 

Hope this helps!

Optimizely
james 10-21-14
 

Re: Optimizely and AngularJS

@doodirock - I'd love to try out our new Conditional Activation feature with the two different templates you mentioned you're working with.

Do you have a URL where I can see your code in action?
Optimizely
steve 10-21-14
 

Re: Optimizely and AngularJS

[ Edited ]

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,

--Steve

Level 2

Re: Optimizely and AngularJS

Hi @steve,

 

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!

 

Thanks,
Becca

lou 01-06-16
 

Re: Optimizely and AngularJS

You can add a $timeout, but first you have to change to Manual on your panel admin..
lou
Level 1