This document is created to list the VEC troubleshooting FAQs and some of the common issues related to Target VEC
Preliminary checks
Check that website allows query parameter
The VEC automatically appends the following query parameters to the page URL: mboxEdit=1 & mboxDisable=1.
So, please open the website in a separate tab and append at the end the above query parameters and observe if there is any issue
If the customer website is: www.customerwebsite.com, then open a new tab and check: www.customerwebsite.com?mboxEdit=1&mboxDisable=1
In case the customer is using custom active content like JavaScript and CSS files these should be downloaded over HTTPS and not HTTP.
Reference Document https://experienceleague.adobe.com/docs/target/using/experiences/vec/troubleshoot-composer/mixed-content.html?lang=en
You can check if the customer website supports iframe or blocks them by going to https://jsbin.com/ and paste below code and see if the customer website opens in an iframe:
!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
Replace facebook.com with the website URL
There could be one or multiple iframe busting techniques used, few of which are listed below
X-Frame-Options: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options
This header can be removed if needed via Requestly (Chrome Extension) as described on public the documentation:
Reference Document: https://docs.adobe.com/content/help/en/target/using/experiences/vec/troubleshoot-composer/troubleshooting-issues-related-to-the-visual-experience-composer-vec.html
This can be done through various JavaScript code.
A basic example:
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:
https://seclab.stanford.edu/websec/framebusting/framebust.pdf
target-vec.js
target-vec-helper.js
Figure out - 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?lang=en#
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.
Common issues :
1. Unable to log in to Online Banking in VEC to perform HTML Edit
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
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
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 https://experienceleague.adobe.com/docs/target/using/experiences/vec/troubleshoot-composer/troubleshoot-composer.html?lang=en