可视化体验编辑器最佳实践和限制

要在帐户级别启用增强型体验编辑器，请单击管理 > 可视化体验编辑器，然后将启用增强型体验编辑器开关切换到“开启”位置。

在可视化体验编辑器中创建活动时，要在活动级别启用增强型体验编辑器，请单击配置> 页面交付，然后将启用增强型体验编辑器开关切换到“开启”位置。

加载增强型体验编辑器的问题可以通过列入允许列表以下IP地址来解决。 这些IP地址用于用于增强型体验编辑器代理的Adobe服务器。 仅在编辑活动时才需要这些地址。 您网站的访客不需要列入允许列表这些IP地址。

有关详细信息，请参阅​ 与增强型体验编辑器相关的问题疑难解答 ​中的EEC无法加载在公共IP上不可访问的内部QA URL。

主体元素内的任何内容都应该具有唯一 ID。 如果有新元素注入到主体中且移动了周围的代码，那么这样做至少有助于识别父元素。

Target不需要ID，但使用ID会提高通过体验编辑器创建的体验的可靠性。 在交付体验时，Target使用CSS选择器修改您的内容。 在编辑体验时，可视化体验编辑器会将选择器定位到要修改的HTML元素的最近祖先（具有非null ID属性）。 因此，不建议使用任何机制（包括 JavaScript 库）来设置或修改 HTML ID 属性。 尽管这些ID可能可供Target体验编辑器用于创建活动，但如果JavaScript修改ID，则创建体验时使用的ID在体验运行时可能不可用。 如果 ID 不可用，则定位到该 ID 的选择器将会失败。

在Visual Experience Composer中编辑CSS类时，使用描述性类名使类易于识别很有用。 这有助于确保您编辑的是正确的 CSS 类，并且您的页面会按预期显示。

隐藏或删除元素时，请勿使用 !important CSS 属性。

如果!important CSS属性存在，则target.js在交付期间所做的更改将会被站点的CSS规则覆盖。

<a>Anchor Text</a>

或

<a href=""> <img src=""> </img> </a>

例如，如果您执行了 2 项操作：

• 将一个类添加到 Element 1
• 为 Element 1 编辑 HTML

每次更改都会在VEC中创建一个新元素。 因为第 2 个操作修改了 Element 1，如果删除 Element 1，则第 2 个操作将没有任何可修改的内容，因此更改不再有效。

换言之，如果您添加一个带有文本的元素，然后在单独的操作中使用不同的文本对该元素进行编辑，则代码编辑器会将两种操作当做单独的元素显示。 在编辑元素时，您创建了一个新元素，该元素修改了之前创建的原始元素，在其中包含已编辑的文本。 如果删除了原始元素，则编辑后的文本将无法找到被编辑的元素，而且也不会显示出来。 第二个元素会保留在元素列表中，但不会对页面产生影响，因为它所更改的元素不再存在。

查看可视化体验编辑器​🔗中使用的元素选择器。

• 对于粗体文本，请使用 <b> 而不是 <strong>。
• 对于斜体文本，请使用 <i> 而不是 <em>。

使用 <strong> 和 <em> 标记可能会导致意外结果。

对页面组件（例如，滑块、轮播等）执行操作（编辑HTML）时，投放可能会显示为已中断。 VEC会在JavaScript实例化页面组件后执行操作。

但是，当页面内容交付给访客时，会在组件实例化之前应用该操作。 因此，此组件的功能可能会也可能不会中断交付操作。 功能取决于其页面上用于定义组件的脚本的性质。

如果您对交付进行了测试，且在第一次可以正常交付，您仍无法保证它会继续正常工作。 因为可能会（或可能不会）存在争用条件。

• 如果存在争用情况，投放会间歇性工作。
• 如果没有竞争条件，则始终可以进行交付。

多次测试您的页面，以确保可以按预期正常预期。

例如，如果您的代码如下所示，则无法在 VEC 中定位购物车 (Shopping Cart) 文本：

<a href="https://www.botanicchoice.com/shop.axd/Cart">
   <img alt="Shopping Cart"src="/images/ico-cart.gif"></img>
   Shopping Cart:
   <span id="HeaderCartQtyTotal">
      0
  </span>
  Items
  <span id="HeaderCartPriceTotal"></span>
</a>

在此示例中，在VEC中选择了整个锚点元素，如果执行了定位，则会对其他元素产生不利影响。

例如，为了打开www.abc.com，使用了以下URL参数：

www.abc.com?mboxEdit=1&mboxDisable=1

这些参数允许您在 iframe 中进行编辑。

添加这些参数后，请确保您的网站会按预期加载。

关闭网站上的iframe嵌套技术，并检查网站是否按预期在虚拟页面上的iframe中打开。 例如：

<!DOCTYPE
<html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <iframe src="https://www.homedepot.com"</iframe>
</body>
</html>

如果已标记为点击跟踪的元素进行了重新排列，则重新排列元素的路径会发生更改。 因此，位于重新排列之前原始元素所在位置的元素是跟踪其点击的元素。

之所以会发生这种情况，是因为交付活动内容的代码和跟踪点击的代码都包含在一段传递到页面的代码中。 如果您浏览到其他页面并设置点击跟踪，则活动内容代码和点击跟踪代码都会传递到该页面。 如果点击跟踪页面具有与运行测试的页面类似的页面结构，则测试内容也可能会出现在点击跟踪页面上。

例如，如果您的页面包含：

<div>
  <div class="mboxDefault" >
  </div>
  <script>mboxCreate('myMbox');
</div>`

不应在体验中选择外部div，因为页面中硬编码的mbox仍会调用Target并收到响应。 此响应会干扰本是针对较大页面元素的响应。

由于Google Chrome🔗中更新了V3清单策略，在浏览器分析原始DOM之前，扩展无法再对其进行修改。 因此，某些安全脚本（例如iframe-busting实施）可能会阻止页面在VEC中加载。

为确保兼容性，当页面加载到Target iframe中时，应有条件地禁用这些脚本。 通过检查window.adobeVecExtension对象的存在可以安全地完成此过程，该对象在VEC加载期间由Target注入。

以下代码片段是iframe-busting代码的示例，此类代码可能会导致VEC中无法加载网页：

window.top.location = window.self.location;

top.location.href = self.location.href;

当网页嵌入到Target中时，可以使用简单检查进行验证。 代码片段应如下所示：

if(!window.adobeVecExtension) {
    // additional security logic
}

例如，如果您的页面包含一个带有六个图像的轮播，并且您想要将一个图像与该轮播的第二个图像交换，则更改图像操作不起作用。

解决方法是选择父容器并使用编辑HTML操作编辑轮盘的HTML以更新所需图像的图像源。

加载页面后，该脚本将在target.js的范围内执行。 因此，无法从脚本块外部访问本地声明的任何变量或函数。

错误：

<script>
  var myVar = 123;
  function myFunc() {
    //
  }
</script>`

正确：

<script>
  window.myVar = 123;
  window.myFunc = function() {
    //
  };
</script>

使用一些虚拟文本在“customHeaderMessage”div 中添加一个锚点元素：

<a href="#">
<span> Dummy text </span>
</a>

使用Insert Element操作选择此div以插入图像作为此虚拟文本div的同级。

插入图像后，它看起来如下所示：

<a href="#">
<span> Dummy text </span>
<img src=""> This is inserted Image. </img>
</a>

删除虚拟文本范围。