DocumentationTargetTarget Guide

Troubleshooting issues related to the Visual Experience Composer

Last update: Tue Apr 09 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

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) section_8A7D3F4AD2CC4C3B823EE9432B97E06F

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 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) section_71E7601BE9894E3DA3A7FBBB72B6B0C1

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-based Experience Composer.

NOTE
In addition to the following information, you can use the Adobe Target Visual Editing Helper 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 note
        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

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) does-not-load

  • Best compatibility with VEC is ensured by the newest version of the extension: Adobe Experience Cloud Visual Editing Helper extension.

    To verify whether you are using the latest version, go to Extensions > Manage Extensions then click Details.

  • The Visual Experience Composer requires authoring libraries in order to perform modifications on the web page. These libraries are embedded in the at.js library and are downloaded by the extension from Adobe servers each time VEC is used.

    The extension downloads at.js library regardless of whether at.js or the Adobe Experience Platform Web SDK are already included in the page.

    Ensure there are no invalid changes added to the at.js headers configured in the Administration > Implementation section.

  • Ensure that the web page is not blocking requests mandatory for loading when embedded within an iFrame. This includes the use of frame-ancestors CSP directives or custom JS code embedded in the customer website, meta HTML tags, or the x-frame-options header.

  • Ensure that the web page’s Javascript does not interfere with the authoring libraries. Do not use or include files using the following reserved names:

    • target-vec-helper.js

    • target-vec.js

    • target.js

    • admin.css

    • sizzle.js

    • mixContentCheck.html

      Additionally, accidental overriding of variables or events defined within these files could lead to issues with VEC.

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

  • 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) section_FA2A18E8FD6A4274B2E395DBAA2FB407

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.

Issues caused by CSS conflicts in the Visual Experience Composer

Verify whether there are any CSS files that might impact the visibility while loading the web page in the editor. For example using the overflow: hidden property on the page body could lead to scrolling issues or trigger click events that could interfere with the menu for authoring.

recommendation-more-help
3d9ad939-5908-4b30-aac1-a4ad253cd654