Please note this is in the latest version of our Conversion Package so you may be using an older version. If you are unsure please contact the support team.
What is a Single Page Application?
A Single Page Application (SPA) is a web app that loads a single HTML page and dynamically updates the content without refreshing the page.
Why is this relevant to WTO?
By default, Optimize will only evaluate and execute your experiences once as the page loads. Since SPAs do not trigger traditional page loads, additional logic is needed to ensure tests are evaluated and served when necessary within SPAs
Configuration
An example of the config you should expect is:
WT.SPA = {
regex: /portion-of-site-that-is-an-SPA/i,
method: function() {
return thingToLookFor; // method goes here
}
};
Available options
The options available for the SPA configuration are:
Name | Data type | Explanation |
regex
| Regular Expression, or Array of Regular Expressions | A check against the full URL. Can be used to avoid the functionality running unnecessarily. |
method | Function Must return a value | Information to be looked up and compared to previous states to confirm that a route change has taken place and re-execution is necessary. |
Examples of Methods:
Method | Explanation |
| Monitor the entire URL for any change |
| Monitor for changes in the path, example checkout/billing to checkout/payment |
| Monitor for hash changes, example #billing to #payment |
| Monitor for changes in a URL parameter value for a specified key, for example step=billing to step=payment |
WT.SPA = {
regex: /\/checkout\//i,
method: function() { return document.location.pathname }
};In the above example, the SPA configuration would only be triggered on pages where the URL contains /checkout/. We then compare the URL Path for changes from the previous check, and if found, will re-execute your experiences.
What if my URLs are not reliable or don't update?
method is a function that lets you check against any condition and return a value. It does not need to be a URL/pathname check.
For example, if you need to find the name of an "active step" in your navigation, you can have a method function like:
method: function(){
return document.querySelector('nav li.active span').textContent
}So, as long as there is something on the page that we can check against, the above approach will be suitable for you.