This article describes a solution to use when having Single-Page Application (SPA) based Web Channel pages. You can find information on how to manage your page when there is user interaction, but there is no entire page load needed.
Web Channel SPA support
Applying Single-Page Applications (SPA) in your Web Channel campaigns means that your site fits on a single page and SPA is dynamically rewriting, refreshing only the necessary part of it, in case of any user interactions. It can have many benefits compared to using API calls, which is always reloading the entire page from the content server on user actions.
When to use the go command?
SPA support practically means that there is no page load, only parts are refreshed by a script. The required element of the website is refreshing when there is user activity. The Emarsys JavaScript API (also referred to as Web Extend) is responsible for the data collection to capture the users' activity and behavior of the website visitors.
Use API calls if you have Web Extend data changes and data transaction is triggered for the first time between your Web Channel page and the content server.
Call the go command in the following cases:
- At the first user interactions on your page.
- At the first data transactions between your "client-side" page and the content server.
- To render your campaign with new Web Extend data.
For detailed information on how to use go command, see Web Extend (go) usage.
Applying the go command for already stored transactions, will corrupt the original reload functionality, clear the earlier rendered elements, rebuild the session and render the original campaigns with the new Web Extend data.
When to use the Reload function?
In case of using your Web Channel site on an SPA-based page, the whole page is not required to be refreshed on each user transaction.
In an SPA environment use the Reload function in the following cases:
- There have already been user interactions captured.
- There have already been transactions.
- To re-render the original transaction.
- To refresh the appropriate part of the page only.
- To re-calculate the current session data.
How to use the Reload function?
The Reload function is stored at the following location: ScarabUtil.loadedModules.emarsys_webpersonalization.instance
At your SPA-based Web Channel page use Reload, as follows: ScarabUtil.loadedModules.emarsys_webpersonalization.instance.reload()
Limitation
It is not recommended to use Predict Recommendations in a Web Channel campaign for an SPA website. Instead, it is suggested to utilize Web Recommender to offer product recommendations for an SPA website.