How to Use Wingify for Single Page Applications (SPA)?

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:

1. The browser downloads the entire application as a web document.

2. The browser executes JavaScript to identify different sections of the application (based on the hash marks or URLs used to identify a section).

3. 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 Wingify 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:

• Ensure to replace the account_id value in the SmartCode snippet with your actual Wingify account ID.

• To check if you have correctly installed the SmartCode on your webpage, use the SmartCode Checker. 

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, Wingify 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 Wingify on such SPAs, you must create a virtual page using a custom URL.

The virtualURL API allows Wingify 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 Wingify, 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.

window.Wingify = window.Wingify || [];
window.Wingify.push(['activate', {
  virtualPageUrl: 'NEW_VIRTUAL_PAGE_URL'
}]);

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.

window.Wingify = window.Wingify || [];
window.Wingify.push(['activate', {
  customUrl: 'http://mycustomurl.com/custom-url'
}]);

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 a custom URL and fetch campaign details with the new URL, use the virtual URL API mentioned in the previous section.