Troubleshooting SPAs
When Digital is embedded in an SPA based site, there are specific steps necessary to solve common issues.
Form Invitation Triggers
Suppose a Digital survey is configured as an Invitation Trigger, that uses a Targeting Rule to display the form. The Targeting Rule is based on a Custom Parameter, for example a JavaScript variable. When the targeting rule is satisfied the form should be displayed.
An SPA updates the page directly, usually using Java or JavaScript. A visitor interacts with the JavaScript controlling the SPA, it changes the contents of any JavaScript variable or cookie.
In this situation, the Digital embed code has already executed, so the SPA's changes to the contents of JavaScript variables or cookies are not evaluated and fail to trigger and display the form.
In order for the Digital code to evaluate changes in the JavaScript variable contents, use the KAMPYLE_ONSITE_SDK.updatePageView()
function to force a re-evaluation of the Targeting criteria and associated rules which use JavaScript variables or cookies. See SPA integration.
Automatic SPAs
Some SPAs automatically move from page to page and this could interrupt the feedback process.
An example of this is when a visitor is navigating to a new page in an SPA and a Digital form has been triggered and displayed the navigation process should halt until the form is closed or feedback has been submitted. At that point an API can be called to determine if a form has been opened, if so, it suspends the page navigation. If the form is not displayed the visitor can continue standard navigation. Once the form is open it generates an event when it is closed to allow the browser to continue navigating.
Use the KAMPYLE_ONSITE_SDK.isSurveyDisplayed()
API method which returns true
if a form is currently being displayed on the page. Use this to determine when the SPA website navigation should be suspended to prevent form completion being interrupted.
Use the neb_displayClosed
event to detect when the invitation is declined, or the form closed, or submitted so the SPA allows the visitor to navigate to the next page.
For example:
if (window.KAMPYLE_ONSITE_SDK && typeof window.KAMPYLE_ONSITE_SDK.isSurveyDisplayed() === 'function' ){
var surveyDisplayed = window.KAMPYLE_ONSITE_SDK.isSurveyDisplayed();
}
if (surveyDisplayed){
window.addEventListener('neb_displayClosed', performNavigation);
}
else {performNavigation);
}