[Beta 版]{class="badge informative" title="此功能当前为有限测试版"}
Web体验设计
在您创建Web体验之后，请使用内容设计空间定义要应用于网页的修改。
先决条件
在设计Web体验之前，请确保满足以下要求：
-
产品管理员已配置一个或多个Web渠道来定义要用于Web体验的URL（页面）。 有关详细信息，请参阅Web渠道配置。
-
您的网站已实施Adobe Experience Platform Web SDK (
alloy.js)，用于访客识别和内容交付。 需要Adobe Experience Platform Web SDK版本2.16或更高版本。 -
您拥有在历程中创建和管理Web体验所需的权限：
- 营销活动 > 管理营销活动 — 添加或更新Web个性化操作节点是必需的。
- 营销活动 > 查看营销活动 — 需要查看Web个性化操作节点的详细信息。
Web体验编辑器
Journey Optimizer B2B edition提供了两种类型的编辑器来设计Web修改：
在Web体验属性中，使用 可视编辑器 选项来确定编辑器的类型。 启用该选项以使用可视编辑器，或禁用该选项以使用非可视编辑器。
可视编辑器 visual-editor
可视编辑器在iframe中加载网页，您可以在其中选择元素并直接在页面预览中应用修改。 完成以下步骤以使用可视编辑器来设计您的Web体验：
-
在Web体验详细信息页面中显示 内容 选项卡后，单击右侧面板中的编辑Web体验。
可视编辑器根据Web渠道配置加载您的网站。
-
如果需要，请单击右上方的浏览，然后使用站点导航栏加载要修改的特定页面。
您还可以在顶部的字段中输入页面URL。
note note NOTE 确保加载的页面与Web渠道配置中定义的URL模式匹配。 单击右上角的 查看配置详细信息 以查看所选Web渠道配置的URL或页面匹配规则。 在可视编辑器中
单击右上角的 设计 以在设计空间中加载该页面。
-
要定义您希望如何修改显示的页面以获得Web体验，您可以：
-
重复步骤2以加载要包含在Web体验中的其他页面，并重复步骤3以定义页面修改。
-
查看您的修改，并做出任何所需的调整。
-
修改完成后，单击编辑器上方的左箭头可返回到Web体验属性。
修改元素
单击所显示页面中的元素以将其选定。 蓝色边框表示所选的元素，并且会出现一个带修改选项的上下文工具栏。
工具栏选项取决于所选的组件类型：
对于选定的元素，右侧面板中的属性会发生更改，以反映可用的样式和操作。 单击面板顶部的操作图标可复制、点击跟踪、删除或隐藏选定的元素。
-
在页面上选择一个图像元素。
-
单击上下文工具栏或右侧面板中的 选择图像 图标。
-
浏览并从资源库中选择图像。
-
根据需要使用右侧面板中的图像样式选项。
-
在页面上选择一个按钮元素。
-
（可选）为按钮输入新文本，或者选择文本字符串并输入替换文本。
您可以使用帐户或人员配置文件中的数据通过个性化更改按钮文本。
-
根据需要使用右侧面板中的按钮样式选项。
-
在页面上选择一个容器元素。
-
根据需要使用右侧面板中的容器样式选项。
插入新组件
当您在可视编辑器的设计左侧导航中选择 + 图标时，可以将以下组件类型作为Web体验修改添加到页面中：
- 分隔线 — 使用此组件插入分隔线来组织电子邮件的布局和内容。 您可以从右侧面板中的属性调整样式属性，例如线条的颜色、样式和高度。 有关详细信息，请参阅内容组件中的分隔线。
- HTML — 使用此组件将HTML代码复制粘贴到现有结构中。 它使您能够创建免费的模块化HTML组件以重用某些外部内容。 有关详细信息，请参阅内容组件中的HTML。
- 图像 — 使用此组件将图像文件插入页面。 您可以从右侧面板中的属性调整样式属性，例如宽度和高度。 有关详细信息，请参阅内容组件中的图像。
- 标题 — 使用此组件插入标题类文本。 您可以从右侧面板中的属性调整样式属性，例如文本颜色、样式、字体和大小。 有关详细信息，请参阅内容组件中的文本。
- 段落 — 使用此组件插入标准文本元素。 您可以从右侧面板中的属性调整样式属性，例如文本颜色、样式、字体和大小。 有关详细信息，请参阅内容组件中的文本。
- 链接 — 使用此组件插入指向指定URL的独立文本链接。 您可以从右侧面板中的属性调整样式属性，例如文本颜色、样式、对齐方式和大小。
选择左侧的组件类型，然后将鼠标悬停在要添加该组件的位置旁边的元素上。
单击显示的按钮之一放置组件：
- *在之前插入 — 将组件插入到选定元素之前。
- *此项后插入 — 将组件插入选定元素之后。
要取消选择要插入的组件类型，请在页面顶部显示的上下文蓝色横幅中单击ESC。
非可视编辑器 non-visual-editor
当需要进行无法在可视编辑器中轻松完成的修改时，请使用非可视编辑器。 这种基于代码的方法使您能够精确控制元素定位和修改。 完成以下步骤以使用非可视编辑器来设计您的Web体验：
-
在Web体验详细信息页面中显示 内容 选项卡时，单击右侧面板中的添加修改。
非可视编辑器根据Web渠道配置加载页面。
-
定义要进行的第一次修改。
左侧面板显示现有修改的列表（如果有）。 单击 添加 以定义新的修改。 如果未定义修改，则面板默认为 添加修改 选项。
-
单击 保存 以应用修改。
CSS选择器修改
通过修改CSS选择器，您可以使用标准CSS选择器语法准确地定位元素。
-
选择 CSS选择器 作为修改类型。
-
在 CSS元素选择器 字段中输入选择器。
**示例选择器：**
| 选择器 | 目标 |
| -------- | ------- |
| '#hero-banner' | ID为“hero-banner”的元素 |
| '.cta-button' | 具有类“cta-button”的所有元素 |
| '标题导航a' | 导航内的链接，在标题内 |
| '[data-offer="premium"]' | 具有特定数据属性的元素 |
-
选择 操作类型 并指定所需的信息/内容。
-
设置内容 — 在 内容 字段中输入 CSS元素选择器 值标识的元素的文本。
-
设置属性 — 指定要与当前CSS选择器关联的属性，以便该属性可以标识该元素。 在 属性名称 字段中输入名称，在 内容 字段中输入值。 如果属性已存在，则更新值；否则，将添加具有指定名称和值的新属性。
-
-
（可选）单击添加个性化，然后使用个性化编辑器为内容创建自定义个性化。
页面修改
您可以使用页面<head>修改类型添加自定义代码。 <head>元素是元数据（有关数据的数据）的容器，它位于<html>标记和<body>标记之间。 在这种情况下，代码不会等待主体或页面加载事件，而是在页面加载开始时执行。
<head>元素通常用于将JavaScript或CSS代码添加到页面顶部。 用于后续可视化操作的选择器取决于此选项卡中添加的HTML元素。
-
选择 页面
<head>作为修改类型。 -
在 Content 框中添加您的自定义代码。
note caution CAUTION 您只能将 <script>和<style>元素添加到<head>部分。 添加<div>标记和其他元素可能会导致在<head>中填充剩余的<body>元素。
-
（可选）单击添加个性化，然后使用个性化编辑器为内容创建自定义个性化。
管理修改 manage-modifications
您创建的所有修改都将被跟踪，并且可以从可视编辑器和非可视编辑器的 修改 面板进行管理。 单击左侧工具栏中的修改 图标以查看所有修改。
每个修改记录包括：
- 目标元素或选择器
- 修改类型（如编辑、隐藏或插入）
- 更改预览
编辑修改
-
在 修改 列表中，查找要编辑的修改。
-
单击更多菜单 ( … )图标，然后选择编辑。
-
根据需要更新修改属性。
-
单击 保存 以保存更改。
删除修改
-
在 修改 列表中，找到要删除的修改。
-
单击更多菜单 ( … )图标，然后选择删除修改。
-
出现提示时，确认删除。
预览您的修改
发布之前，预览修改对访客的显示方式。
使用可视编辑器顶部的设备预览选项查看您对以下内容所做的修改：
- 桌面
- 平板电脑
- 移动设备
预览将更新，以显示修改在每个设备大小上的呈现方式。
使用URL栏导航到您的Web渠道配置中的不同页面。 然后，根据URL匹配规则，验证修改是否正确应用于目标页面。
Web体验的点击跟踪 web-click-tracking
跟踪用户与元素的交互以衡量参与度并收集见解。 点击跟踪数据可在参与报表中使用，并可用于衡量Web体验修改的有效性。
激活（实时）Web体验后，您还可以使用Adobe Customer Journey Analytics（需要产品订阅）构建报表。 为了改进Web体验监控，您还可以跟踪网站任何特定元素的点击量。 通过跟踪，可在Web报表中显示该元素的点击次数。
有关Customer Journey Analytics和构建Web报表的更多信息，请参阅Customer Journey Analytics文档。
-
在Web体验编辑器中选择元素，例如图像或链接。
-
在元素属性或上下文工具栏中，单击 点击跟踪元素 图标。
-
打开左侧面板中的点击跟踪列表，并修改 跟踪的操作 值以在您的报告中标识此交互。
