|
In this article, you’ll learn: |
About SPA
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.
-
The browser executes JavaScript to identify different sections of the application (based on the hash marks or URLs used to identify a section).
-
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
1. Ensure to replace the account_id value in the SmartCode snippet with your actual VWO account ID.
2. To check if you have correctly installed the SmartCode on your webpage, enter the URL in the SmartCode Checker in the Settings > SmartCode section of your VWO Account. See SmartCode Checker in VWO to know what different results mean.
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.
- 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. - SPAs THAT USE HTML5 HISTORY API
Refers to single-page applications that do not use hash marks (#), but change the URL every time a user visits a section in the application using HTML5 History API. Such SPAs allow you to change the URL displayed in the browser through JavaScript, without having to reload the page.
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).
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 do 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 a custom URL, use the following code snippet.
If the 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 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.
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 to dynamic elements of the website:
If the changes are still not being applied, then you can force the change by manually calling the activate function in setinterval (Use this with precaution as it may cause the website to lag).
Known Issues/Limitations
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 support@vwo.com for any assistance or information about SPA integration.
-
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.
-
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.