可视化体验编辑器选项

单击Adobe Target Visual Experience Composer (VEC)中的某个页面元素时，会显示一个菜单，其中提供了可用于该元素类型的选项。 此外，页面底部会显示一个 DOM 路径，可让您轻松浏览页面结构。

各种Visual Experience Composer (VEC)操作将分组到相应的菜单选项中，以使您的工作更快捷、更有效：

Edit

以下选项可供选择：

Text/HTML edit-text-html

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

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

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

可以嵌套以下 HTML5 标记：

Background Color

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

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

Styles styles

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

要访问Styles面板，请单击VEC中的某个页面元素，然后单击​ Edit > Styles。

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

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

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

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

CSS Class

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

可用于A/B、Automated Personalization和Multivariate Test活动。

Link

更改链接中的 URL。

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

Insert Before

以下选项可供选择：

Offer Decision

添加在 Adobe Journey Optimizer🔗中创建的选件，以便使用offer decisioning向客户提供最佳选件和体验。

注意： ​此选项仅在编辑或创建手动A/B Test或Experience Targeting (XT)活动时可用。 此选项不适用于其他活动类型。

有关详细信息，请参阅使用优惠决策。

Image、HTML和Text

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

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

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

Recommendations支持Insert Before DIV、SECTION和ARTICLE标记的内容。

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

推荐

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

Experience Fragment

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

Insert After

以下选项可供选择：

Offer Decision

添加在 Adobe Journey Optimizer🔗中创建的选件，以便使用offer decisioning向客户提供最佳选件和体验。

注意： ​此选项仅在编辑或创建手动A/B Test或Experience Targeting (XT)活动时可用。 此选项不适用于其他活动类型。

有关详细信息，请参阅使用优惠决策。

Image、HTML和Text

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

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

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

Recommendations支持Insert After DIV、SECTION和ARTICLE标记的内容。

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

推荐

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

Experience Fragment

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

Replace Content

以下选项可供选择：

Offer Decision

添加在 Adobe Journey Optimizer🔗中创建的选件，以便使用offer decisioning向客户提供最佳选件和体验。

注意： ​此选项仅在编辑或创建手动A/B Test或Experience Targeting (XT)活动时可用。 此选项不适用于其他活动类型。

有关详细信息，请参阅使用优惠决策。

Image

从内容库中选择一个不同的图像。可用于交换的图像包括上传到 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 Offer

从Content Library中选择其他选件。

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

HTML选件最长可达256 KB。

推荐

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

Experience Fragment

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

Layout

以下选项可供选择：

Rearrange

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

注意：点击跟踪对重新排列的项无效。

当前，某些VEC操作（如Rearrange和Move）假定源父元素和目标父元素的同级元素已完全加载。 如果在父DOM元素（源或目标）下发生延迟加载，则这些VEC操作可能会导致不一致行为。 我们正在寻找一种更可靠的方法，以使VEC操作在延迟加载的DOM元素中正常工作。 作为临时解决方法，您可以在这些场景中使用Custom Code来呈现您的体验。

Resize

调整页面上的元素大小。选择Resize后，元素右下角会出现一个句柄，允许您拖动该角调整大小。 按住 Shift 键保持相同的宽高比。

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

Move move

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

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

有关由于延迟加载DOM元素而导致Move和Rearrange操作出现不一致行为的详细信息，请参阅上面的Rearrange。

Hide

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

Remove

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

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

Expand Section

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

Navigate to Link

打开链接的目标。

Undo/Redo

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

注意事项 considerations

自定义元素支持 custom

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

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

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

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

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

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

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

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

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

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