SPAs are applications that run in a browser and do not require a page load during use. The following high-level steps provide an overview of how SPAs work:
The browser downloads the entire application as a web document.
When a user navigates through the application, the browser renders the content from the specific sections, without reloading the entire page from the server.
To use VWO for your single-page applications, you need to add the SmartCode in the head section of your website. To know how to do this, refer to Configuring SmartCode for your Website
NOTE: Make sure to replace the account_id value in the code with your
actual VWO account ID.
Types of SPAs
All interactions with a SPA take place on one page. Some examples of SPAs are Gmail and Google Maps. There are two types of SPAs:
SPAs that change URLs
SPAs that do not change URLs
SPAs that change URLs
By default, VWO supports integration with SPAs that change URLs. You need not add any additional code to track SPAs that uses Hashmark or HTML5 History API.
1. SPAS THAT USE HASHMARK (#)
Refers to applications that use hashmarks (#) in their URL to route users to different sections of the application. The hashmark (#) is an identifier used to point the browser to a specific page or section of the application. These hashmarks (#) are not sent to the server as an HTTP request and are only used as crawlers to let your server know which section of the application to display.
Example: Consider a URL http://example.com/sports.html#football. The hashmark (#) here identifies the section of the application that refers to football. The part of the URL after # changes for every section in the application.
2. SPAS THAT USE HTML5 HISTORY API
Example: Consider a URL http://example.com/sports.html/football. The “/football” part of the URL identifies the content section that the user is currently accessing. Navigating to another sports section will simply change the “/football” to “/hockey” without reloading the entire page from the server (using history API).
3. SPAs that do not change URL
Refers to applications that do not hash marks (#) or change URL when visitors land on a section in the application. To run VWO on such SPAs, you must create a virtual page using a custom URL.
The virtualURL API allows VWO to load the new URLs in the current session:
All session Recordings, Heatmap, Goals, and Funnels are tracked on the new page.
The code will execute again after checking URL eligibility, segment conditions, and other campaign settings.
All changes will apply again for the selected variations.
To load the new page in VWO, use the following API to trigger the virtual page. Like any normal URL change, all the tests will re-run with the new URL provided in the API.
Using Custom URLs for SPA
Most SPAs load website resources on the first page load. Thereafter, the URLs of the website does not change. For example, a flight booking website wherein the URL remains the same even if you navigate to different sections of the page.
Using Custom URLs you can set up imaginary URLs to find and remember specific sections or pages of the website. Custom URLs allow you to track multiple pages of your website even if the website pages do not have a consistent pattern. There are two different use cases for using custom URL on SPAs:
If the actual URL does not change and you want to run the test on custom URL, use the following code snippet.
NOTE: The code will only work with the existing campaigns on the page and
no new campaigns can be fetched using a new URL. To provide custom URL and
fetch campaign details with the new URL, use the virtual URL API mentioned
in the previous section.
If actual URL is changing and you want to change the custom URL, use the following code snippet to update the custom URL:
Changing Timeout Duration
By default, VWO applies change on any element that loads within 2 seconds on the page after any URL update. If you want to modify the timeout, use the following API.
Where time_in_ms is the time in milliseconds.
Apply changes manually
You can manually apply changes to using the following API call. This will be useful for dynamic content, such as infinite scrolling cases, modal boxes, and other similar cases of dynamic content.
Where Array_of_exp_ids is an array containing all test Ids to apply changes.
Revert CSS changes manually
To revert the CSS of any test using API, use the following call function.
NOTE: You can not revert JS changes or editor changes. This API will only
revert the CSS changes.
Applying Changes on Dynamic Elements
If your website has dynamic content that is changed by ajax calls or some other ways, you can use refreshElement API call to instruct VWO to update the dynamic content.
For example, Use the following code to apply changes on dynamic elements of the website:
If the changes are still not being applied, then you can force the change by manually calling activate function in setinterval (Use this with precaution as it may cause the website to lag).
The SPA integration module is continuously evolving and we are working hard to improve the feature. We have compiled a list of known issues that VWO users may encounter during the integration. Please reach us at email@example.com for any assistance or information about SPA integration.
SPA Integrations for third-party tools are in development and will be announced when available. You can reach our support team for any related queries.
Most SPA frameworks like Angularjs and Reactjs use bindings to update DOM content. If you have applied a conflicting change on the page using the VWO editor, updates may not reflect on the page.
If you are running a Split URL test on SPA websites that have HTML5 with History mode enabled, you may see the control briefly till the page is refreshed and loaded again.
Changes applied to JS/CSS will not be removed/reverted until a page refresh. If you want to revert changes manually, refer to the ‘Revert CSS changes manually’ section above.
You may notice that sometimes the original content of the page displays despite using the hide element option. This happens because most SPA frameworks render their content component-wise. Your changes will reflect after a page refresh.