Troubleshooting issues related to the Visual Experience Composer and Enhanced Experience Composer

Display problems and other issues sometimes occur in the Adobe Target Visual Experience Composer (VEC) and the Enhanced Experience Composer (EEC) under certain conditions.

Be aware of the changes that impact the VEC and EEC when using the following Chrome releases:

NOTE
The following change affects all three updates outlined below:
  • Will not be able to use the VEC without the VEC Helper extension installed and enabled for password-protected pages of your sites. Your site login cookies are considered 3rd-party cookies and are not sent with login requests inside the VEC editor in Browse mode. The only exception is when your site login cookies already have the SameSite=None and Secure attributes set.

Chrome 94 (September 21, 2021): With the impending changes planned for the Chrome 94 release (September 21, 2021), the following change impacts all users with Chrome 94+ browser versions:

  • The command-line flag --disable-features=SameSiteByDefaultCookies,CookiesWithoutSameSiteMustBeSecure will be removed.

Chrome 91 (May 25, 2021): With the changes implemented for the Chrome 91 release (May 25, 2021), the following change impacts all users with Chrome 91+ browser versions:

  • The flags #same-site-by-default-cookies and #cookies-without-same-site-must-be-secure have been removed from chrome://flags. This behavior is now enabled by default.

Chrome 80 (August 2020): With the changes implemented in August 2020, all users with Chrome 80+ browser versions:

  • Will not be able to download Target libraries while editing an activity (when these aren’t already on the site). This is because the download call is made from the customer domain towards a secured Adobe domain and is rejected as unauthenticated.
  • The EEC will not function for all users because it is not able to set the SameSite attribute for cookies on adobemc.com domain. Without this attribute, the browser rejects these cookies, causing the EEC to fail.

Determine which cookies are blocked

To determine which cookies are blocked because of the SameSite cookie enforcement policies, use the Developer Tools in Chrome.

  1. To access the Developer Tools, while viewing the VEC in Chrome, click the ellipsis icon at the top-right corner of Chrome > More Tools > Developer Tools.

  2. Click the Network tab > then look for blocked cookies.

    note note
    NOTE
    Use the Has blocked cookies checkbox to make finding blocked cookies easier.

    The following illustration shows a blocked cookie:

    Developer Tools > Network tab showing a blocked cookie

Adobe Target VEC Helper extension

Starting with version 0.7.1, the Adobe Target VEC Helper browser extension adds the SameSite=None and Secure attributes to all cookies on responses originating from webpages edited inside the VEC when the “Cookies” toggle is turned ON in the extension UI:

Adobe Target VEC Helper extension UIAdobe Target VEC Helper extension UI

Alternatives and workarounds

Use one of the following options to ensure that your VEC and EEC continue to work as expected:

  • Download and use the updated VEC Helper extension.

  • Use the Mozilla Firefox browser. Firefox is not yet enforcing this policy.

  • Use the following flags to run Google Chrome from the command line until September 21, 2021. After September 21, features that require cookies will no longer work in the VEC, such as login or cookie consent popups. If you update to Chrome 94, you must manually generate cookies with SameSite=none and Secure on your websites.

    code language-none
    --disable-features=SameSiteByDefaultCookies,CookiesWithoutSameSiteMustBeSecure
    

Does Target support multi-level iframes?

Target does not support multi-level iframes. If your website loads an iframe that has a child iframe, at.js interacts with the parent iframe only. Target libraries do not interact with the child iframe.

As a workaround, you can add a page in the experience with the URL of the child iframe.

When I try to edit a page, all I see is a spinner instead of my page. (VEC and EEC) section_313001039F79446DB28C70D932AF5F58

This situation can happen if the URL contains a # character. To fix the issue, switch into Browse mode in the Visual Experience Composer, and then switch back to Compose mode. The spinner should go away and the page should load.

Content Security Policy (CSP) headers block the Target libraries on my website. (VEC and EEC) section_89A30C7A213D43BFA0822E66B482B803

If your website’s CSP headers block Target libraries, then loads the website but prevents editing, ensure that the Target libraries are not blocked.

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

cps_headers image

As a workaround, you can configure a Requestly rule to remove CSP headers, as shown below:

cps_headers_2 image

You can configure a similar Requestly rule for any header that causes a resource to not load inside the VEC.

For Requestly, 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.

The VEC or EEC appears broken or does not initialize when re-editing a saved activity. (VEC and EEC) section_5AC3BA8F8FBB451EA814F298D0645E54

If the website has changed outside of the Visual Experience Composer after the experience was defined, selectors on which actions were taken earlier cannot be found when the activity is opened for re-editing. The page appears broken, and no warning displays.

The VEC or EEC does not show my rotating banners and other content containing JavaScript. (VEC and EEC) section_8B5BE6EB050B42D6A14A054724C41330

By default, the Visual Experience Composer blocks JavaScript elements. You can work with these elements if you disable JavaScript in the Visual Experience Composer settings. Depending on how the site is set up, some items might continue to display incorrectly or to remain unavailable.

When I change one element on the page, multiple elements change. (VEC and EEC) section_309188ACF34942989BE473F63C5710AF

If the same DOM element ID is used on multiple elements on the page, changing one of those elements changes all elements with that ID. To prevent this from happening, an ID should be used only once on each page. This practice is a standard HTML best practice. For more information, see Page Modification Scenarios.

I can’t edit experiences for an iFrame-busting site. (VEC and EEC) section_9FE266B964314F2EB75604B4D7047200

This issue can be addressed by enabling the Enhanced Experience Composer. Click Administation > Visual Experience Composer, then select the check box that enables the Enhanced Experience Composer. The Enhanced Experience Composer uses an Adobe-managed proxy to load your page for editing. This proxy allows editing on iFrame-busting sites and allows editing on sites and pages where you have not yet added Adobe Target code. The activities do not deliver to the site until the code has been added. Some sites may not load via the Enhanced Experience Composer, in which case you can uncheck this option to load the Visual Experience Composer via an iFrame.

NOTE
Your locally hosted pages or pages that are not accessible outside your network are not accessible to the Adobe proxy server and cannot be opened in the EEC. These pages might include staging URLs, User Acceptance Testing (UAT) URLs, or locally hosted pages.

I want to set up tests on pages that don’t have the mbox/target implementation done yet. (VEC and EEC) section_DE63BCCB5B124E10A71FA579B582A80A

See “I can’t edit experiences for an iFrame-bursting site” above.

Bold and italic text styles with Edit Text/HTML or Change text/HTML do not show on my page. Sometimes the text disappears after applying these style changes. (VEC and EEC) section_7A71D6DF41084C58B34C18701E8774E5

If you use Edit Text/HTML in the Visual Experience Composer for A/B or Experience Targeting activities or Change Text/HTML for Automated Personalization or Multivariate Test activities to make text bold or italic, those styles might not be applied on the page or the text disappears from the page in the Visual Experience Composer. This happens because of the way the rich-text editor applies these styles might interfere with the website markup.

If you see this issue:

  1. Click the HTML button in the rich-text editor to enter source editing mode.

  2. Find the styles text elements.

    • For bold text, change <strong> elements to <b>.

    • For italic text, change <em> elements to <i>.

For Automated Personalization activities, image swapping appears broken in the VEC or EEC. (VEC and EEC) section_88AABFDFE6A3420299B0D508B12A3994

Adding an image offer to a location takes the full dimension of the original image space in the VEC or EEC. On delivery, the image is not expanded and is shown as it is, so there is no impact on delivery.

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