Asynchronous Access to Optimizely Experiment States During Component Initialization

I am using optimizely tool to set up some experiments with metrics.

In my angular web application I check whether it is variant a or variant b when the component is initialized to do some custom logic.

optimizelyVarriationId = "";

ngOninit() {
const experimentStates = window.optimizely?.get("state").getExperimentStates({isActive: true});
console.log("experimentStates: ", experimentStates)

if(experimentStates) {
Object.keys(experimentStates).forEach((experimentId) => {
const experiment = experimentStates[experimentId];
this.optimizelyVarriationId = experiment.variation.id;
});
}

const myVarriationId = "323232323323";

if (myVarriationId === this.optimizelyVarriationId) {
// do some logic
}
}


The issue with 3rd party applications is that sometimes on ngOninit lifecyle, optimizely state is not initialized. So I end up getting in the console.log:

experimentStates: {}


which is wrong and it messes completely my logic.

if I do the same thing on a lifecycle that is triggered many times like ngDoCheck this is going to work. (but obviously I do not want this.)

Another solution is to use timeout given the fact that my component console logs optimizely state for example at:

18:15:30.230


and optimizely tool intilized console logs at:

18:15:30.686


but again it is something I do not want, as I will add delay to my web app and seems like a bad approach.

Lastly tried ngAfterViewInit but still, sometimes I get the state, sometimes I do not because of the async logic.

I am looking for a robust solution, to always have the latest data of optimizely state.

Continue reading...