Troubleshooting issues related to the Visual Experience Composer

Display problems sometimes occur in the Adobe Target Visual Experience Composer (VEC) under certain conditions.

When I open my website in the Visual Experience Composer, the Target libraries do not load. (VEC only)

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.

My page won’t open in the EEC, or loads slowly. Activities or experiences load slowly in the VEC. (VEC only)

Several issues can affect page performance in the Target experience composers. Some common issues include:

  • You do not have an mbox on the page.
  • Your site uses proxy blocking, which does not allow the page to be opened in either experience composer.
  • Your site doesn’t allow itself to be opened in an iFrame.

If issues occur in the Enhanced Experience Composer, try turning off the Enhanced Experience Composer and use the Visual Experience Composer instead.

To disable the Enhanced Experience Composer, go to Administration > Visual Experience Composer and turn off the Enable Enhanced Experience Composer option.

Some users see the following error message in the console:

Console error message

If neither the Visual Experience Composer nor the Enhanced Experience Composer works, use a browser extension like Requestly (Chrome or Firefox) or Modify Response Headers (Firefox) that can overwrite the X-Frames header options for your site and allow them to be loaded in iFrames, enabling the VEC. If you are unable to use browser extensions, use the Form Composer.

NOTE

In addition to the following information, you can use the Adobe Target VEC Helper browser extension for Google Chrome.

NOTE

These plugins should be used only in the context of VEC editing.

For the Requestly extension, whenever there is a need to remove headers, you should do either of following:

  • Add URL rules for the URL that you want to open in the VEC so that headers are removed for those URLs only.

  • Enable the rule when you are editing in the VEC and disable the rule when you are not using the VEC.

For the Modify Response Header extension (Firefox), because you can’t add a URL rule, you must do the following:

  • Enable the rule when you are editing in the VEC and disable the rule when you are not using the VEC.

To use the Requestly extension on Chrome or Firefox:

  1. Turn off the Enhanced Experienced Composer.

  2. Install the Requestly browser extension on Chrome or Firefox.

  3. Open the extension and configure it using the following:

  4. Select Modify headers.

  5. Enter the following:

    • Rule name

    • Modification rules

      • Toggle Add to Remove.

      • Toggle Request to Response.

      • Enter “X-Frame-Options” as the header name.

      • Repeat previous steps and enter “x-frame-options” as the header name.

        NOTE

        Headers that are manipulated via Requestly are case sensitive.

      • Change Equals to Contains as the condition for the source URL and enter the URL of the activity that you are trying to load in the VEC.

      chrome_extension image

  6. Click Save.

    requestly image

    You should now be able to load the page quickly with the Visual Experience Composer.

To use the Modify Response Headers extension on Firefox:

  1. Install the Modify Response Headers on Firefox and restart the browser.
  2. From your Firefox extensions, select the Modify Response Headers extension.
  3. Click Preferences.
  4. Select Filter from the Action drop down.
  5. In the Header Name field, enter: X-Frame-Options.
  6. Repeat Steps 4 and 5 to add a filter with x-frame-options.
  7. Click Add.
  8. Click Start.

firefox_extension image

After setting up an extension, open Target. Your pages should now load in the Visual Experience Composer, even if the Enhanced Experience Composer is disabled.

My page does not display in the VEC (VEC only)

  • The browser is not supported.

  • The browser is blocking a non-secure page on a secure site.

    Click the icon to the left of the URL in the browser address bar and click Disable protection on this page

  • You entered an invalid URL.

  • You have not entered a default URL in your account setup page.

    Ensure that this setting is enabled, then download and update at.js on your website.

  • If you try using the new Visual Editing Helper extension and then go back to the old extension and Target fails to load your website, clear all browser data and disable the new extension.

  • If your website fails to load in the VEC, or behaves unexpectedly, a potential fix is to accept cookies on your website in the browser before trying to load the website in Target.

The VEC appears broken when I use browse mode. (VEC only)

While using browse mode, if you access a URL that does not have Target libraries implemented (at.js or Adobe Experience Platform Web SDK) or contains a frame-buster header, the VEC appears broken. Due to browser security concerns, Target cannot properly access the URL you navigated to or the VEC URL does not update consistently if the page loads.

This issue occurs because VEC loads the web page in an <iframe>. The current security mechanisms of browsers prevent the Target UI from accessing the elements of the given frame because of the same-origin policy. Browsers block scripts trying to access a frame with a different origin and that includes information such as the location.href.

You must use the new Visual Editing Helper extension (recommended) or the old extension to inject the Target library into the pages in order to browse them optimally.

On this page