文档Journey Optimizer B2BJourney Optimizer B2B Edition 文档

[Beta 版]{class="badge informative" title="此功能当前处于有限的Beta版中"}

Web体验设计

Last update: Wed Mar 25 2026 00:00:00 GMT+0000 (Coordinated Universal Time)

创建对象：

  • 用户

在您创建Web体验后，请使用内容设计空间定义要应用于网页的修改。

recommendation-more-help

先决条件

在设计Web体验之前，请确保满足以下要求：

  • 产品管理员已配置了一个或多个Web通道，以定义要包含用于Web体验的URL（页面）。 有关详细信息，请参阅Web通道配置。

  • 您的网站已实现Adobe Experience Platform Web SDK (alloy.js)，用于访问者识别和内容传递。 需要Adobe Experience Platform Web SDK版本2.16或更高版本。

  • 您拥有在旅程中创建和管理Web体验所需的权限：

    • 营销活动 > 管理营销活动 — 需要添加或更新Web个性化操作节点。
    • 营销活动 > 查看营销活动 — 需要查看Web个性化操作节点的详细信息。
style
shade-box
IMPORTANT
在设计Web体验之前，请确保为Web浏览器安装了Adobe Experience Cloud可视编辑帮助浏览器扩展。 需要此扩展才能在Journey Optimizer B2B版Web体验设计空间中可靠地打开、创作和预览网页。
Google Chrome和Microsoft Edge当前是唯一支持Journey Optimizer B2B版本中的扩展和创作Web体验的浏览器。 有关详细信息，请参阅安装可视编辑帮助程序扩展。

Web体验编辑器

Journey Optimizer B2B版本为设计Web修改提供了两种类型的编辑器：

编辑器
描述
最适合
可视编辑器
所见即所得（所见即所得）编辑器显示您的网站，允许您直接选择和修改元素。 它需要Google Chrome或Microsoft Edge Web浏览器中的Visual Editing Helper扩展。
对可见的页面元素（如文本、图像、按钮和横幅）进行可视更改。
非可视编辑器
基于代码的编辑器，用于应用无法通过可视编辑器进行的修改。
定向难以以可视方式选择的元素，应用高级CSS更改，或修改隐藏元素。

在Web体验属性中，使用​ 可视编辑器 ​选项来确定编辑器的类型。 启用该选项以使用可视编辑器，或禁用该选项以使用非可视编辑器。

可视化编辑器选项已启用 {width="400"}

可视化编辑器 visual-editor

可视编辑器在iframe中加载网页，您可以在其中选择元素并直接在页面预览中应用修改。 完成以下步骤以使用可视编辑器来设计您的Web体验：

  1. 在Web体验详细信息页面中显示​ 内容 ​选项卡后，单击右侧面板中的​编辑Web体验。

    可视编辑器根据Web渠道配置加载您的网站。

    Web体验可视化编辑器 {width="800" modal="regular"}

  2. 如果需要，请单击右上方的​浏览，然后使用站点导航栏加载要修改的特定页面。

    您还可以在顶部的字段中输入页面URL。

    note note
    NOTE
    确保加载的页面与Web渠道配置中定义的URL模式匹配。 单击右上角的​ 查看配置详细信息 ​以查看所选Web渠道配置的URL或页面匹配规则。

    在可视编辑器中 浏览模式 {width="700" modal="regular"}

    单击右上角的​ 设计 ​以在设计空间加载该页面。

  3. 要定义您希望如何修改显示的页面以获得Web体验，您可以：

    • 将新组件（分隔条、HTML、图像、标题、段落或链接）插入到Web体验的页面。

    • 从页面中选择任何现有元素，如图像、按钮、段落、文本、容器、标题或链接，并为Web体验修改它。

    • 为元素添加点击跟踪以测量参与度和收集见解。

  4. 重复步骤2以加载要包含在Web体验中的其他页面，并重复步骤3以定义页面修改。

  5. 查看您的修改并做出任何所需的调整。

  6. 修改完成后，单击编辑器上方的左箭头可返回到Web体验属性。

修改元素

单击所显示页面中的元素以将其选定。 蓝色边框表示所选的元素，并且会出现一个带修改选项的上下文工具栏。

选择要修改的元素 {width="700" modal="regular"}

工具栏选项取决于所选的组件类型：

操作
描述
文本选项
更改所选元素的文本元素类或文本样式。
选择图像
替换图像源或将图像添加到元素。
编辑链接/添加链接
修改或添加链接URL。
安排
在显示内向后或向前移动所选元素。
添加个性化内容
插入个性化设置。
点击跟踪元素
为元素添加点击跟踪。
删除
从页面中删除选定的元素。

对于选定的元素，右侧面板中的属性会发生更改，以反映可用的样式和操作。 单击面板顶部的操作图标可复制、点击跟踪、删除或隐藏选定的元素。

单击选定元素的操作图标 {width="300"}

文本元素

  1. 在页面上选择一个文本元素。

  2. 输入新的文本内容，或选择文本字符串并输入替换文本。

  3. （可选）使用文本格式选项，例如粗体、斜体和对齐方式。

  4. 单击文本元素外部以应用更改。

有关文本组件的文本样式选项的更多信息，请参阅内容组件。

图像元素

  1. 在页面上选择一个图像元素。

  2. 单击上下文工具栏或右侧面板中的​ 选择图像 ​图标。

  3. 浏览并从资源库中选择图像。

  4. 根据需要使用右侧面板中的图像样式选项。

按钮元素

  1. 在页面上选择一个按钮元素。

  2. （可选）为按钮输入新文本，或者选择文本字符串并输入替换文本。

    您可以使用帐户或人员配置文件中的数据通过个性化更改按钮文本。

  3. 根据需要使用右侧面板中的按钮样式选项。

容器元素

  1. 在页面上选择一个容器元素。

  2. 根据需要使用右侧面板中的容器样式选项。

插入新组件

当您在可视编辑器的设计左侧导航中选择​ + ​图标时，可以将以下组件类型作为Web体验修改添加到页面中：

  • 分隔线 — 使用此组件插入分隔线来组织电子邮件的布局和内容。 您可以从右侧面板中的属性调整样式属性，例如线条的颜色、样式和高度。 有关详细信息，请参阅​ 内容组件 ​中的分隔线。
  • HTML — 使用此组件将HTML代码复制粘贴到现有结构中。 它使您能够创建免费的模块化HTML组件以重用某些外部内容。 有关更多信息，请参阅​ 内容组件 ​中的HTML。
  • 图像 — 使用此组件将图像文件插入到页面中。 您可以从右侧面板中的属性调整样式属性，例如宽度和高度。 有关详细信息，请参阅​ 内容组件 ​中的图像。
  • 标题 — 使用此组件插入标题类文本。 您可以从右侧面板中的属性调整样式属性，例如文本颜色、样式、字体和大小。 有关详细信息，请参阅​ 内容组件 ​中的文本。
  • 段落 — 使用此组件插入标准文本元素。 您可以从右侧面板中的属性调整样式属性，例如文本颜色、样式、字体和大小。 有关详细信息，请参阅​ 内容组件 ​中的文本。
  • 链接 — 使用此组件插入指向指定URL的独立文本链接。 您可以从右侧面板中的属性调整样式属性，例如文本颜色、样式、对齐方式和大小。

选择左侧的组件类型，然后将鼠标悬停在要添加该组件的位置旁边的元素上。

可视化编辑器界面 — 新组件 {width="800" modal="regular"}

单击显示的按钮之一放置组件：

  • *在​之前插入 — 将组件插入到选定元素之前。
  • *在​之后插入 — 在选定元素之后插入组件。

要取消选择要插入的组件类型，请在页面顶部显示的上下文蓝色横幅中单击​ESC。

非可视编辑器 non-visual-editor

当需要进行无法在可视编辑器中轻松完成的修改时，请使用非可视编辑器。 这种基于代码的方法使您能够精确控制元素定位和修改。 完成以下步骤以使用非可视编辑器来设计您的Web体验：

  1. 在Web体验详细信息页面中显示​ 内容 ​选项卡时，单击右侧面板中的​添加修改。

    非可视编辑器根据Web渠道配置加载页面。

    非可视化编辑器界面 {width="800" modal="regular"}

  2. 定义要进行的第一次修改。

    左侧面板显示现有修改的列表（如果有）。 单击​ 添加 ​以定义新的修改。 如果未定义任何修改，则面板将默认为​ 添加修改 ​选项。

    • 选择​修改类型：

      table 0-row-2 1-row-2 2-row-2
      类型 描述
      CSS选择器 使用CSS选择器字符串的目标元素。
      页 将自定义HTML、CSS或JavaScript插入页面级别的元素，如<head>或<body>。

    • 根据类型配置修改参数：

      • CSS选择器 — 输入有效的CSS选择器以定位特定的元素。
      • 操作类型 — 选择要执行的操作（编辑、隐藏、删除、插入、替换）。
      • 内容 — 提供要应用的内容或样式。

  3. 单击​ 保存 ​以应用修改。

CSS选择器修改

通过修改CSS选择器，您可以使用标准CSS选择器语法准确地定位元素。

  1. 选择​ CSS选择器 ​作为修改类型。

  2. 在​ CSS元素选择器 ​字段中输入选择器。

**示例选择器：**

|选择器|目标|
| -------- | ------- |
| &#39;#hero-banner&#39; | ID为&#39;hero-banner&#39;的元素|
| &#39;.cta-button&#39; |类为&#39;cta-button&#39;的所有元素|
| &#39;header nav a&#39; |导航内的链接，标题内|
| &#39;[data-offer=&quot;premium&quot;]&#39; |具有特定数据属性的元素|

  1. 选择​ 操作类型 ​并指定所需的信息/内容。

    • 设置内容 — 在​ 内容 ​字段中输入由​ CSS元素选择器 ​值标识的元素的文本。

    • 设置属性 — 指定要与当前CSS选择器关联的属性，以便该属性能够标识该元素。 在​ 属性名称 ​字段中输入名称，在​ 内容 ​字段中输入值。 如果属性已存在，则更新值；否则，将添加具有指定名称和值的新属性。

    非可视编辑器CSS选择器修改 {width="800" modal="regular"}

  2. （可选）单击​ 添加个性化 ​并使用个性化编辑器为内容创建自定义个性化。

页面修改

您可以使用页面<head>修改类型添加自定义代码。 <head>元素是元数据（有关数据的数据）的容器，它位于<html>标记和<body>标记之间。 在这种情况下，代码不会等待主体或页面加载事件，而是在页面加载开始时执行。

<head>元素通常用于将JavaScript或CSS代码添加到页面顶部。 适用于后续可视化操作的选择器取决于此选项卡中添加的 HTML 元素。

NOTE
Custom code runs in the visitor's browser. Ensure that your code is secure, tested, and does not negatively impact page performance or user experience.

  1. Choose Page<head> as the modification type.

  2. 在​ Content ​框中添加您的自定义代码。

    note caution
    CAUTION
    您只能将<script>和<style>元素添加到<head>部分。 Adding <div> tags and other elements might cause remaining <head> elements to populate within the <body>.

    Non-visual editor page-head modification {width="800" modal="regular"}

  3. (Optional) Click Add personalization and use the personalization editor to create a customized personalization for the content.

管理修改 manage-modifications

All modifications that you create are tracked and can be managed from the Modifications panel of both the visual editor and non-visual editor. Click the Modifications icon in the left toolbar to view all modifications.

Each modification record includes:

  • The target element or selector
  • The modification type (such as edit, hide, or insert)
  • A preview of the change

Modifications panel {width="500" modal="regular"}

Edit a modification

  1. In the Modifications list, find the modification that you want to edit.

  2. Click the More menu ( … ) icon and choose Edit.

  3. Update the modification properties as needed.

  4. 单击​ 保存 ​以保存更改。

Delete a modification

  1. In the Modifications list, find the modification that you want to remove.

  2. 单击​更多菜单 ( … )图标，然后选择​删除修改。

  3. 出现提示时，确认删除。

预览您的修改

发布之前，预览修改对访客的显示方式。

使用可视编辑器顶部的设备预览选项查看您对以下内容所做的修改：

  • 桌面
  • 平板电脑
  • 移动设备

更改预览的设备大小 {width="550" modal="regular"}

预览将更新，以显示修改在每个设备大小上的呈现方式。

使用URL栏导航到您的Web渠道配置中的不同页面。 然后，根据URL匹配规则，验证修改是否正确应用于目标页面。

Web体验的点击跟踪 web-click-tracking

跟踪用户与元素的交互以衡量参与度并收集见解。 点击跟踪数据可在参与报表中使用，并可用于衡量Web体验修改的有效性。

激活（实时）Web体验后，您还可以使用Adobe Customer Journey Analytics（需要产品订阅）构建报表。 为了改进Web体验监控，您还可以跟踪网站任何特定元素的点击量。 通过跟踪，可在Web报表中显示该元素的点击次数。

有关Customer Journey Analytics和构建Web报表的更多信息，请参阅Customer Journey Analytics文档。

  1. 在Web体验编辑器中选择元素，例如图像或链接。

  2. 在元素属性或上下文工具栏中，单击​ 点击跟踪元素 ​图标。

    启用Web体验元素的点击跟踪 {width="600" modal="regular"}

  3. 打开左侧面板中的点击跟踪列表，并修改​ 跟踪的操作 ​值以在您的报告中标识此交互。

    设置Web体验的点击跟踪标识 {width="600" modal="regular"}

6ef00091-a233-4243-8773-0da8461f7ef0