Debugging Visual Experience Composer (VEC) issues with Single Page Applications (SPA)

Description

Environment

Adobe Target

Issue/Symptoms

The Adobe Target VEC for SPAs takes advantage of a new concept called Views: a logical group of visual elements that together make up an SPA experience.

Based on the fact that SPA does not rely on retrieving offers on page-load, there are a few limitations and prerequisites:

  • The SPA VEC does not support auto target, automated personalization, or recommendation 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 is as follows:

    Load VisitorAPI JS » Load at.js 2.x » Execute Target request (Prefetch call) » Call triggerView().

Resolution

While Debugging the VEC issues related to SPA, ensure the following:

  1. Ensure adobe.target.triggerView() function is fired for each view.

  2. Make sure that your page does not trim or remove the parameters: mboxEdit=1 and mboxDisable=1

    • 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 removes them while navigating from one page to another (without a page reload), the Target functionality breaks and the Target libraries do not load.

  3. 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 common error message is:

    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

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

  5. For issues wherein modification is no longer showing in the VEC but appears in the modification panel, and you are unable to delete the modifications from the panel -  ensure that there are no trailing spaces in the view name.

  6. Other details 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 the 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