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

close this to read article

In this article, you’ll learn:

What are SPAs?
Types of SPAs
Custom URL usage for SPAs
Known Issues and Limitations

What are SPAs?

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 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.VWO = window.VWO || [];
window.VWO.push(['activate', {
 virtualPageUrl: 'NEW_VIRTUAL_PAGE_URL'
}]);

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.VWO = window.VWO || [];
window.VWO.push(['activate', {
  customUrl: 'http://mycustomurl.com/custom-url'
}]);

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.

If the actual URL is changing and you want to change the custom URL, use the following code snippet to update the custom URL:

(function() {
  window.VWO.push(['onEventReceive', 'uC', function() {
    // Add your custom url here
    window._vis_opt_url = 'http://myVisOptURL.com/vis-opt';
  }]);
})();

(function() {
  window.Wingify.push(['onEventReceive', 'uC', function() {
    // Add your custom url here
    window._vis_opt_url = 'http://myVisOptURL.com/vis-opt';
  }]);
})();

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.

window.VWO = window.VWO || [];
window.VWO.push(['updateSPAWaitTime', < time_in_ms > ]);

window.Wingify = window.Wingify || [];
window.Wingify.push(['updateSPAWaitTime', < time_in_ms > ]);

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.

window.VWO = window.VWO || [];
window.VWO.push(['applyChanges', < Array_of_exp_ids > ]);

window.Wingify = window.Wingify || [];
window.Wingify.push(['applyChanges', < Array_of_exp_ids > ]);

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.

window.VWO = window.VWO || [];
window.VWO.push(['revertChanges', < exp_id > ]);

window.Wingify = window.Wingify || [];
window.Wingify.push(['revertChanges', < exp_id > ]);

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.

VWO.push(['refreshElements', < Array_of_selector_paths > , < exp_ids > ]);

Wingify.push(['refreshElements', < Array_of_selector_paths > , < exp_ids > ]);

For example, Use the following code to apply changes to dynamic elements of the website:

VWO.push(['refreshElements', ['#phone-name']]);

/* CUSTOM CODE */
vwoRequestAnimationFrame = window.requestAnimationFrame || function(fun) {
  setTimeout(function() {
    fun();
  }, 17)
}
vwoRequestAnimationFrame(function apply() {
  // Change the below line with the action to be performed inside setInterval
  VWO.push(['refreshElements', ['.hs-button']]);
  vwoRequestAnimationFrame(apply);
});

Wingify.push(['refreshElements', ['#phone-name']]);

/* CUSTOM CODE */
requestAnimationFrameWrapper = window.requestAnimationFrame || function(fun) {
  setTimeout(function() {
    fun();
  }, 17)
}
requestAnimationFrameWrapper(function apply() {
  // Change the below line with the action to be performed inside setInterval
  Wingify.push(['refreshElements', ['.hs-button']]);
  requestAnimationFrameWrapper(apply);
});

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).

VWO.push(['activate', < should_keep_interval_running > ]);

Wingify.push(['activate', < should_keep_interval_running > ]);

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 Wingify users may encounter during the integration. Please reach us at support@wingify.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 Wingify 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.

Articles in this section