1053817 - Figure out how to make Angular and Optimizely work together

Status: RESOLVED WORKSFORME

(Webmaker Graveyard :: Metrics, defect)

Description

[Adam Lofting (:adamlofting)]

As an initial problem, when I try to edit webmaker.org/signup in optimizely, it shows me the homepage.

Comment 1

[Jon Buckley [:jbuck]]

The only reason I can think of off the top of my head is that it's not passing the path properly. Angular routes pages based on it ( https://github.com/mozilla/webmaker.org/blob/master/public/js/angular/app.js#L4-L72 )

Comment 2

[Adam Lofting (:adamlofting)]

I think there are some clues in here, but I'll investigate in more detail soon: http://community.optimizely.com/t5/Using-Optimizely/Optimizely-and-AngularJS/td-p/490

Comment 3

[Adam Lofting (:adamlofting)]

CC: Ricardo: just FYI re the test we're talking about for the homepage / footer.

Comment 4

[Adam Lofting (:adamlofting)]

Here's a bit more reading that might help, but it certainly makes it more fiddly to use Optimizely: https://jack.ofspades.com/angular-optimizely/

I've opened a support to ticket with them to see if they have any other ideas.

Comment 5

[Adam Lofting (:adamlofting)]

Had a detailed reply from Optimizely. Working with Angular is going to be more complex, but the initial display issue is just an x-frame setting: See Bug 1054969

I will add the notes about Angular in a subsequent comment.

Comment 6

[Adam Lofting (:adamlofting)]

"After that is fixed, there are some things with Angular I'd like to point out - primarily, you will most likely need to manually activate your experiments. This is because Angular.js allows you to bind data within your page dynamically without a new page load.

The issue with these kinds of technologies and Optimizely is that the Optimizely snippet needs to execute for your changes to show. By default Angular.js doesn't reload the page and Optimizely only executes once on the first page load. 

We suggest a couple of ways to get Optimizely to execute your variation code at the appropriate time.

Our recommended solution is to use our manual activation feature [https://help.optimizely.com/hc/en-us/articles/200040225-Activating-an-Optimizely-Experiment-dynamically-after-a-page-has-loaded]. Manual activation allows you to choose when Optimizely executes a particular experiment using an API call. This is especially helpful when you want to run an Optimizely experiment as the result of a user action like a click or a page action like moving from one step of a form to another.

Another workaround is to wrap your variation code in Optimizely with conditional logic or an interval. You can find a code sample for that technique here. [https://help.optimizely.com/hc/en-us/articles/200040635-Modifying-content-that-is-not-immediately-available]"

Comment 7

[Matt Thompson (@OpenMatt :OpenMatt)]

* Still needed? Should we tackle this for [oct3]?

Comment 8

[Adam Lofting (:adamlofting)]

Yep, this is still needed. It's more for long-term value than any urgent tasks.

I have some other priorities for the next couple weeks and unpredictable availability so this might jump a couple of trains.

Comment 9

[Matt Thompson (@OpenMatt :OpenMatt)]

* The [oct3] train has now left the station. So please update the whiteboard with [oct17], or whatever train you're now planning to put this on. Thanks!

Comment 10

[Matt Thompson (@OpenMatt :OpenMatt)]

* the [oct17] train has now left the station
* so please update with [oct31], [nov14], [nov28], etc.

Comment 11

[Matt Thompson (@OpenMatt :OpenMatt)]

* [oct17] has passed. Please update the whiteboard.

Comment 12

[Adam Lofting (:adamlofting)]

We have a workaround for using Optimizely across multiple copies of an angular page. Let's not spend more time on this given the shift from Angular to React.