Configuring Single Page Application / Server Side Rendering Support in Editor Settings for Your Website in VWO

Nowadays, to cater to dynamic updates, enhanced loading speed, and less load on the server, most of the websites are designed as single-page applications (SPAs). In SPAs, most resources (HTML/CSS/Scripts) are only loaded once throughout the lifespan of an application. Only data is transmitted back and forth. 

Consider that you have some dynamic elements on your webpages that typically appear after a delay or some user actions and using a VWO test campaign, you have made changes to some of these elements. Now, to ensure that the modification you made to such elements gets applied each time a campaign is loaded, VWO has two different implementations. 

While one deals with the changes that appear on the webpage after the VWO campaign is executed, the other one aims at applying changes to the elements of a website built on frameworks like GatsbyJS, Next.js, ReactJS, etc. Let’s delve more into each one of these.

1. Keep applying changes even after the page is loaded

This implementation typically caters to situations where the element that you modified, appears on the web after the page has loaded, either after some delay or by some user action.

Consider that you have an e-commerce website where when you click on the HELP button, a contact support form appears as a pop-up. Now, you wish to apply changes to the elements present in the form. Here, in technical terms, the form was not present in the DOM initially but got added as soon the HELP button was clicked.

To ensure that the changes get applied to such elements, each time the campaign is loaded, VWO has in-built support for Mutation Observer. This continuously looks for the changes (DOM changes) that are being added on the webpage after the campaign is loaded completely. As soon as a change is detected, VWO applies modifications to it.

NOTE: Mutation Observer only monitors the changes once the campaign has been executed and post this, applies changes to the elements that are new on the webpage and the changes are not yet applied to them.

Configuring “Keep applying changes even after the page is loaded” Setting in VWO

VWO lets you configure this setting both at the campaign level and at the account level using the VWO Editor. If you are unsure of how to configure these settings, please contact VWO support at support@vwo.com.

NOTE: This setting when configured at the campaign level overrides the one configured at the account level, only for the current campaign.

Campaign-level Configuration
Configuring this setting at the campaign-level ensures that it’s only applicable to the current campaign.

Procedure

1. Login to your VWO account.
2. Go to TESTING and create a campaign, say A/B.
3. Enter the relevant information in the fields present on the URL(S) page and click NEXT.
4. In the VWO editor, click on the SETTINGS option present at the bottom and choose SPA/SSR support options.
5. To apply the changes after the page is loaded, enable the option Keep applying changes even after the page is loaded.
6. Once done, click SAVE.

Account-level Configuration
Configuring this setting at the account-level ensures that it’s only applicable for future campaigns. 

Procedure

1. Login to your VWO account.
2. Go to ACCOUNT SETTINGS > CAMPAIGN SETTINGS.
3. Scroll down to the Editor Settings section and choose the SPA/SSR Support options.
4. To apply the changes after the page is loaded, enable the option Keep applying changes even after the page is loaded.
5. Once done, click SAVE.

2. Delay applying changes until framework rendering is complete

This implementation is used particularly to apply changes to the elements of a website built on frameworks like GatsbyJS, Next.js, ReactJS, etc. 

Such frameworks ensure that no one can make changes to the webpage until the entire rendering is complete. This, at times, leads to a situation wherein the changes you applied to the elements in your test campaign don’t get applied or get applied to some elements while for some, appears in their original form when the framework is fully rendered (thus reversing the changes made by the VWO editor).

To handle this, VWO keeps the modified elements hidden until the framework rendering is complete and during this wait time, VWO keeps detecting the changes on the web page. Once the framework rendering is complete, the VWO campaign starts executing.

Here, the user has two timer options that are configured based on how slow or fast your website loads.

• The frequency at which VWO will check if the framework has completed rendering
  This is the frequency at which VWO scans the web page to check if the rendering is complete or not. By default, it is set to 10 milliseconds which typically mean that after every 10 milliseconds, VWO will run this check and as soon VWO detects that there were no changes in the last 10 milliseconds, the VWO campaign starts executing.
  

• Maximum timeout after which changes are applied to the elements regardless of framework rendering state
  This is the timeout interval after which VWO will not check for the changes on the webpage. Once this timeout interval is reached, VWO applies the campaign changes, no matter what.

Configuring “Delay applying changes until framework rendering is complete” Setting in VWO

VWO lets you configure this setting both at the campaign level and at the account level using the VWO Editor. If you are unsure of how to configure these settings, please contact VWO support at support@vwo.com.

NOTE: This setting when configured at the campaign level overrides the one configured at the account level, only for the current campaign.

Campaign-level Configuration
Configuring this setting at the campaign-level ensures that it’s only applicable to the current campaign.

Procedure

1. Login to your VWO account.
2. Go to TESTING and create a campaign, say A/B.
3. Enter the relevant information in the fields present on the URL(S) page and click NEXT.
4. In the VWO editor, click on the SETTINGS option present at the bottom and choose SPA/SSR support options.
5. To apply changes until framework rendering is complete, enable the option Delay applying changes until framework rendering is complete and configure the following two fields:
   a. The frequency at which VWO will check if the framework has completed rendering
   b. Maximum timeout after which changes are applied to the elements regardless of framework rendering state
6. Once done, click SAVE.

Account-level Configuration
Configuring this setting at the account-level ensures that it’s only applicable for future campaigns. 

Procedure

1. Login to your VWO account.
2. Go to ACCOUNT SETTINGS > CAMPAIGN SETTINGS.
3. Scroll down to the Editor Settings section and choose the SPA/SSR Support options.
4. To apply changes until framework rendering is complete, enable the option Delay applying changes until framework rendering is complete and enter the time in milliseconds for the following two fields:
   a. Frequency at which VWO will check if the framework has completed rendering
   b. Maximum timeout after which changes are applied to the elements regardless of framework rendering state
5. Once done, click SAVE.