可视化体验编辑器选项

当您单击页面元素 Adobe Target 可视化体验编辑器 (VEC)，此时一个菜单会显示可用于该元素类型的选项。 此外，页面底部会显示一个 DOM 路径，可让您轻松浏览页面结构。

各种 可视化体验编辑器 (VEC)操作将分组到相应的菜单选项中，以使您的工作更快捷、更有效：

编辑

以下选项可供选择：

文本/HTML edit-text-html

更改元素的 HTML 代码，例如文本区域、按钮或链接的文本。

除了 HTML 代码外，您还可以编辑和插入自定义 JavaScript。

编辑 A/B 和体验定位活动的文本和 HTML 时，可以使用多种富文本格式选项。您可以选择字体、选择字体样式、更改文本对齐方式以及使用其他标准文本格式设置选项。修改 HTML 时，您可以在 HTML 的代码视图和富编辑视图之间切换。

可以嵌套以下 HTML5 标记：

背景颜色

使用拾色器选择或配置背景颜色。您可以选择一个色样，并使用 RGB 值或十六进制颜色代码对其进行调整。拾色器中的红色 x 可使背景透明。

注意： ​此选项不适用于已设置背景图像的元素。

样式 styles

使用样式面板可查看或编辑所选元素现有样式的值。您还可以添加其他样式。

要访问 样式 面板中，单击VEC中的某个页面元素，然后单击 编辑 > 样式.

样式面板将显示在 VEC 的右侧。该面板包括一个样式列表，允许您编辑样式或将其添加到所选元素。如果您习惯使用层叠样式表 (CSS)，或者从开发人员那里接收代码，则可以使用实时 CSS 编辑器查看更改并添加样式。

应用不同的样式时，您始终可以通过单击 还原 图标显示在的右上角 样式 面板。 单击 还原 图标还原在当前部分的面板上所做的所有更改。

展开每个部分以编辑或添加样式，具体如下文中所述。要保存更改，请单击 返回 图标以返回到面板的主显示屏，然后单击 保存.

主面板上以及各个部分面板上每个选项旁边的蓝点表示您已更改了相应的样式。 通过此视觉指示器，您可以轻松地在单击之前查看更改 保存.

CSS 类

指定用于元素的预定义 CSS 类。如果选择多个元素，请用空格分隔多个 CSS 类。

其可用于 A/B、自动个性化和多变量测试活动。

链接

更改链接中的 URL。

使用编辑链接来更新选择器，以指向相同的图像元素。但是，不支持链接到不同的图像元素。要链接到不同的图像元素，请从代码编辑器中删除原始操作，并使用可视化体验编辑器将该操作应用于其他图像元素。

此项前插入

以下选项可供选择：

优惠决策

添加 优惠创建于 Adobe Journey Optimizer 使用offer decisioning向客户提供最佳优惠和体验。

注意： 在编辑或创建时，此选项可用 手动 A/B测试 或 体验定位 (XT)仅限活动。 此选项不适用于其他活动类型。

有关更多信息，请参阅 使用优惠决策。

图像， HTML、和 文本

除了修改现有的内容之外，还可以向页面添加任何类型的元素。可添加文本、代码、列表等，以创建完全不同的体验来进行测试。

在页面上选择一个元素，然后单击此项前插入并选择想要插入图像、HTML，还是文本。插入元素显示在所选元素的前面。

插入元素的行为取决于页面的结构、CSS 和其他页面配置选项。需要有效的 HTML 才能正确显示页面。始终在插入项目后测试您的页面，以确保该页面可以按预期显示。

推荐支持此项前插入 DIV、SECTION 和 ARTICLE 标记的内容。

注意： ​插入图像需要启用 Adobe Scene7 Publishing System，以便您可以访问图像库。

推荐

将推荐包含到 A/B 测试（包括自动分配和自动定位）和体验定位 (XT) 活动中。有关更多信息，请参阅将推荐作为选件。

体验片段

将在 Adobe Experience Manager (AEM) 中创建的体验片段插入 Target 活动，以协助优化或进行个性化处理。有关更多信息，请参阅 AEM 体验片段。

此项后插入

以下选项可供选择：

优惠决策

添加 优惠创建于 Adobe Journey Optimizer 使用offer decisioning向客户提供最佳优惠和体验。

注意： 在编辑或创建时，此选项可用 手动 A/B测试 或 体验定位 (XT)仅限活动。 此选项不适用于其他活动类型。

有关更多信息，请参阅 使用优惠决策。

图像， HTML、和 文本

除了修改现有的内容之外，还可以向页面添加任何类型的元素。可添加文本、代码、列表等，以创建完全不同的体验来进行测试。

在页面上选择一个元素，然后单击此项后插入并选择想要插入图像、HTML，还是文本。插入元素显示在所选元素的后面。

插入元素的行为取决于页面的结构、CSS 和其他页面配置选项。需要有效的 HTML 才能正确显示页面。始终在插入项目后测试您的页面，以确保该页面可以按预期显示。

推荐支持此项后插入 DIV、SECTION 和 ARTICLE 标记的内容。

注意： ​插入图像需要启用 Adobe Scene7 Publishing System，以便您可以访问图像库。

推荐

将推荐包含到 A/B 测试（包括自动分配和自动定位）和体验定位 (XT) 活动中。有关更多信息，请参阅将推荐作为选件。

体验片段

将在 Adobe Experience Manager (AEM) 中创建的体验片段插入 Target 活动，以协助优化或进行个性化处理。有关更多信息，请参阅 AEM 体验片段。

替换内容

以下选项可供选择：

优惠决策

添加 优惠创建于 Adobe Journey Optimizer 使用offer decisioning向客户提供最佳优惠和体验。

注意： 在编辑或创建时，此选项可用 手动 A/B测试 或 体验定位 (XT)仅限活动。 此选项不适用于其他活动类型。

有关更多信息，请参阅 使用优惠决策。

图像

从内容库中选择一个不同的图像。可用于交换的图像包括上传到 Experience Cloud 资产文件夹和上传到 Target 内容库的图像。

在初始活动创建期间显示的 URL 并不是用于交付的 URL。活动同步后，该 URL 将更新为生产 Scene7 URL。

例如，初始的 URL 可能如下例所示：

https://test.marketing.adobe.com/content/dam/mac/scholasticinc/Aug_MBM.jpeg?ch_ck=1470774943867

活动同步后，交付 URL 可能如下所示：

http://s7d2.scene7.com/is/image/TargetTest/Aug_MBM?tm=1470768352933&fit=constrain&hei=173&wid=300

推荐支持 DIV、SECTION 和 ARTICLE 标记中的“替换为”。

注意： ​交换图像要求使用 Adobe Scene7 Publishing System 帐户。

HTML 选件

从内容库中选择一个不同的选件。

注意： ​TargetHTML 选件存储在 服务器上。

HTML选件最长可达256 KB。

推荐

将推荐包含到 A/B 测试（包括自动分配和自动定位）和体验定位 (XT) 活动中。有关更多信息，请参阅将推荐作为选件。

体验片段

将在 Adobe Experience Manager (AEM) 中创建的体验片段插入 Target 活动，以协助优化或进行个性化处理。有关更多信息，请参阅 AEM 体验片段。

版式

以下选项可供选择：

重新排列

在元素拖放到同一父元素或 DIV 内的其他位置。需要移动其他元素的位置以为重新排列的元素腾出空间。

注释：点击跟踪对重新排列的项目不起作用。

目前，某些VEC操作，例如 重新排列 和 移动，假定源元素和目标父元素的同级元素已完全加载。 如果在父DOM元素（源或目标）下发生延迟加载，则这些VEC操作可能会导致不一致的行为。 我们正在研究一种更可靠的方法，以使VEC操作在延迟加载的DOM元素中正常工作。 作为临时解决方法，您可以使用 自定义代码 在这些场景中渲染您的体验。

调整大小

调整页面上的元素大小。当您选择时 调整大小，元素的右下角会出现一个手柄，您可以通过拖动该角来调整大小。 按住 Shift 键保持相同的宽高比。

注意： ​无法调整内联元素的大小。

移动 move

移动页面上的元素。与“重新排列”选项不同，“移动”选项不会移动其他元素来为正在移动的元素腾出空间。可使用箭头键来微调移动。（计划的增强功能：支持确保移动的元素不会隐藏在其他元素后面。）

在某些情况下，如CSS限制要求将元素保留在其父元素内时，您不能将该元素移到其父元素之外。 无法将元素移动到具有以下 CSS 属性的容器之外：overflow: hidden。

参见 重新排列 以上内容以了解有关与不一致行为的更多信息 移动 和 重新排列 操作的原因是DOM元素加载缓慢。

隐藏

隐藏元素。保留空格但会删除内容。

删除

删除元素。删除图像后面的空格，并且折叠元素所在的空间。

注意： ​使用此选项无法删除“classic”mbox（Target Classic 促销活动中创建的一个 mbox）中的项目。

展开选定内容

除了最初选定的元素外，还需要选择父元素。选择任意父元素时，该元素的所有子元素均会自动选定。您可以多次展开选定内容。

导航到链接

打开链接的目标。

撤消/重做

在编辑会话期间撤消对活动所做的更改。您也可以重做先前已撤消的更改。

注意事项 considerations

自定义元素支持 custom

VEC支持 Web组件 允许您针对自定义元素和自定义元素内的元素创建和测试个性化体验和选件。 此功能在VEC中适用于所有 Target 活动类型。

自定义事件和自定义事件内支持大多数VEC操作，但以下情况除外：

以下操作在自定义元素上不可用：

以下操作在自定义元素中不可用：

使用 DOM 路径浏览元素 dom-path

单击页面上的某个元素时，将显示 VEC 选项菜单。此外，单击某个元素时，相应的 DOM 路径将显示在页面底部。

您可以使用 DOM 路径快速查看有关所选元素（类型、ID 和类）的信息，并向上或向下移动 DOM 路径以选择所需的元素。

将鼠标悬停在 DOM 路径上方时，将显示一个蓝色方框，其会高亮显示 VEC 中的相应元素。单击某个元素时，橙色方框将高亮显示该元素，并显示 VEC 选项菜单，具体如上文中所述。

您可以使用 DOM 路径轻松导航到 VEC 中的任何父元素、同级元素或子元素。

设置点击跟踪时，还可使用 DOM 路径功能。