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

Nowadays, most websites are designed as Single-Page Applications (SPAs) to accommodate dynamic updates, enhance loading speed, and reduce server load. In SPAs, most resources (HTML/CSS/Scripts) are only loaded once throughout an application's lifespan. Only data is transmitted back and forth. 

Consider that you have some dynamic elements on your web pages 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. To ensure that the modification you made to such elements gets applied each time a campaign is loaded, VWO has some implementations:

1. Keep Applying Changes Even After the Page is Loaded

This setting typically caters to situations where the element 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 a contact support form appears as a pop-up when you click on the HELP button. Now, you wish to apply changes to the form's elements. Here, in technical terms, the form was not present in the DOM initially but was added as soon as the HELP button was clicked.

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

To learn how you can configure this setting in VWO, click here.

2. Re-apply Changes Whenever Modified Elements are Rendered Afresh

This setting primarily ensures that the modifications made by VWO Editor are reliably applied to websites built with frameworks such as React, Gatsby, Next.js, Angular, Vue, etc.

The challenge with such frameworks is that they can completely re-render page elements based on user actions or events, resulting in instances where VWO changes are reverted, and the elements go back to their original state.

If you notice something similar in your website's campaigns, we recommend enabling this setting. When enabled, VWO will constantly monitor all the elements to which you have made changes. If the underlying framework attempts to re-render the page elements, VWO will re-apply the changes to ensure that the visitors experience the change consistently.

To learn how you can configure this setting in VWO, click here.

Configuring SPA/SSR Settings in VWO

VWO lets you configure the SPA/SSR settings at the campaign level and at the workspace level using the VWO Editor. 

Configuring SPA/SSR Setting at the Campaign Level

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

Procedure

1. Log in 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 at the bottom and choose SPA/SSR support options.
5. Enable the setting that's most relevant to your use case.
   
6. Once done, click SAVE.

Configuring SPA/SSR Setting at the Workspace Level

Configuring this setting at the workspace level ensures that it’s only applicable for future campaigns. 

Procedure

1. Log in to your VWO account.
2. Go to Account Settings > Campaign.
3. Scroll down to the Editor Settings section and choose the SPA/SSR Support options.
4. Enable the setting that's most relevant to your use case.
   
5. Once done, click Save.