VEC issues with SPA

Description


The Adobe Target VEC for SPAs takes advantage of a new concept called Views: a logical group of visual elements that together make up a SPA experience. Based on the fact that in SPA we do not rely on retrieving offers on page-load hence there are a few limitations and prerequisites :

 

  • The SPA VEC does not support Auto Target, Automated Personalization, or Recommendations activities.
  • at.js 2.0+ and the “adobe.target.triggerView()” function must be implemented in the app before you can use the SPA VEC.
  • The Order of operations for initial page load  : Load VisitorAPI JS  Load at.js 2.x  Execute Target request (Prefetch call)  Call triggerView().


The Adobe Target VEC for SPAs takes advantage of a new concept called Views: a logical group of visual elements that together make up a SPA experience. Based on the fact that in SPA we do not rely on retrieving offers on page-load hence there are a few limitations and prerequisites :

Resolution

While Debugging the VEC issues related to SPA please ensure that the following things are checked :

  1. Ensure adobe.target.triggerView() function is fired for each view.
  2. Make sure that your page does not remove the parameters “mboxEdit=1&mboxDisable=1”. As documented :

Target adds two parameters (mboxEdit=1 and mboxDisable=1) while opening the website in the Visual Experience Composer.

If your website (specially Single Page Apps), trims our parameters or actually removes them while navigating from one page to another (without a page reload) the Target functionality breaks and the Target libraries do not load.
To avoid this problem, ensure that you do not trim or remove these two parameters.

  1. Look for any error message that might show up in the Console Logs. For example, there could be an issue with the i-frame blocking the view load.

A few common error messages may be :

Uncaught DOMException: Blocked a frame with origin “https://view.ceros.com” from accessing a cross-origin frame.
at https://view.ceros.com/hitachi-vantara/hitachi-vantara-x-t-systems?heightOverride=4696&mobileHeightOverride=9696:610:38

  1. Also check for Target view notification call in the network logs (Target notification call with 204 status). If the call is blocked then check for the status.

  2. For a few issues wherein modification is no longer showing in the VEC, but it does show in the modification panel and we are unable to delete the modifications from the panel: Please ensure there is no trailing spaces in the view name. Other details that you need to ensure while setting up the view name are :

No trailing spaces.
Cannot be empty.
View name should be unique for all pages.
View name should not start or end with ‘/’. This is because the customer would generally extract the View name from URL path. For us, “home” and “/home” are different.
The same view should not be consecutively triggered multiple times with the {page: true} option.

On this page