VEC FAQs and Common Issues

Learn how to troubleshoot Adobe Target Visual Experience Composer (VEC) with insights on iframe challenges, mixed content and resolving common VEC issues.

Description description

Environment

Adobe Target

Issue/Symptoms

This document is created to list the VEC troubleshooting FAQs and some of the common issues related to Target VEC.

Resolution resolution

Preliminary checks:

  1. Query Parameters

    Check that website allows query parameter. The VEC automatically appends the following query parameters to the page URL:mboxEdit=1 & mboxDisable=1. Open the website in a separate tab and append at the end the above query parameters and observe if there is any issue. If your website is: www.customerwebsite.com, then open a new tab and check: www.customerwebsite.com?mboxEdit=1&mboxDisable=1

  2. Mixed Content should be allowed

    In case you are using custom active content like JavaScript and CSS files, these should be downloaded over HTTPS and not HTTP.

    Reference Document Enabling mixed content in your browser

  3. The webpage should be accessible within an iframe.  Check if the website supports iframe or blocks them by going to jsbin and paste below code. See if the website opens in an iframe. Replace facebook.com with the website URL.

    code language-none
    !DOCTYPE html    html    head    meta charset="utf-8"     meta name="viewport" content="width=device-width"      titleJS Bin/title     /head    body       iframe src="https://www.facebook.com" height="700";width="850"/iframe    /body    /html
    
  4. There could be one or multiple iframe busting techniques used, few of which are listed below:

  5. JS Based Iframe Busting. This can be done through various JavaScript code.

    • A basic example:

      code language-none
      script
      if(top != window) {
         body.style.display = none;
      }
      /script
      

There are plenty of other JavaScript iFrame Busting techniques and can be seen the most used on this link: Busting Frame Busting

  • Following Target JS scripts are downloaded

    • target-vec.js
    • target-vec-helper.js
  • If the DOM structure has changed there could be errors in VEC where configured modifications are not visible in VEC.

    Figure out the Selector for which action is broken: In Console, you can check using: _AT.querySelectorAll('<selector>')

    Reference Document for selector configuration: https://experienceleague.adobe.com/docs/target/using/experiences/vec/vec-selectors.html

  • Handle duplicate Ids on the page:

    As Target uses selectors of the page to create and deliver recommendations, so it is essential to ensure that the page is a compiant to the below points:

    • Use Classes
    • Use unique attributes present in the elements
    • Check if the selector matches the Unique element
    • Remove dynamic classNames from selectors like active, selected, etc.

Please make sure elements are not contained within an iframe itself, as VEC loads content in an iframe so iframe within a parent iframe would not work.

Common issues:

  1. Unable to log in to Online Banking in VEC to perform HTML edit

    • Adobe Target VEC requires the VEC helper extension to load the page.
    • Allow insecure content from the site settings.
    • Set the EEC as disabled.
    • Navigate to the page in VEC using “Browse mode
    • Click  Compose to do the changes.
  2. Trigger views are not available within VEC to create modifications

    • The page may be using service workers which would not allow trigger views to be available. Here are the steps to work around this scenario:

      • After loading the page in VEC, make sure to disable EEC from Page Delivery, disable service workers, and enable both options in the VEC Helper Extension: Inject Target Libraries and Cookies.
      • Click Browse and click Accept Cookies.
      • Click in the address bar from the VEC page and press Enter so that the page refreshes properly within VEC. View names should show up including in the overlay.
      • Ensure that the Trigger Views function is consistently firing on the page. Views will be available only when the Trigger Views  function fires.
  3. Unable to access authorized pages within VEC

    • Access the authorized page in a browser outside VEC. Then access the page in Target, in the New Browser tab of the same window.
  4. Unable to access the page using Shadow DOM within Target VEC

    • Ensure that the page is using the latest target library
    • Ensure that all the web components are loaded before the page is accessed in VEC
  5. Unable to accept cookies and browse the website within VEC

    • Access the cookies browser outside VEC. Then access the page in Target, in the New Browser tab of the same window.

More common VEC issues and their resolutions are also listed here
Troubleshooting the Visual Experience Composer and Enhanced Experience Composer

recommendation-more-help
3d58f420-19b5-47a0-a122-5c9dab55ec7f