Rich-text Reply

Optimizely implementation in an angular2 single page application (SPA)

emyna 02-10-17

Optimizely implementation in an angular2 single page application (SPA)

Hello,

 

What's the best way to implement the optimizely code in a single-page application written with angular2?

At the moment we have the main snippet within GTM, which I now know is not the best way, according to this article: https://help.optimizely.com/Set_Up_Optimizely/How_Optimizely_affects_page_load_speed

 

So I would like to write a technical brief to my developer to understand how to place the main code properly in a single-page application.

 

 

Level 1

rockymcg 02-14-17
 

Re: Optimizely implementation in an angular2 single page application (SPA)

Hey There,

We generally don't recommend implementing our snippet using a tag manager because it doesn't allow you to control when our snippet is loaded to your site. GTM in particular loads all scripts asynchronously, which can cause an issue where the Original page flashes in the browser window before Optimizely applies changes. This can be a confusing experience for users. You can read more about this issue here.

 

By default, the Optimizely snippet depends on a page reload to activate an experiment. Since Single Page Apps, by nature, don't reload when the user navigates to a new view; Optimizely doesn't get a chance to re-activate when the view changes. More information on this subject is available here.

 

It looks like you're currently using Optimizely Classic with your site. Optimizely Classic was designed at time when Single Page Apps were less relevant on the web. We do still have some workarounds for using Optimizely with Single Page apps, such as manual and conditional activation— but in general, Optimizely X has more options for users running Single Page Apps.

Optimizely
RyanC 02-15-17
 

Re: Optimizely implementation in an angular2 single page application (SPA)

The ideal position is at the beginning of the head tag, and the only way to accomplish this is to get the developer to insert the Optimizely snippet directly into the html code. then I would recommend going through the settings of the project to have a feel what is available and adaptable to your situation.
Ryan
------------------------------------------------
The best solution is the simplest.
Experimentation Hero