传送横幅

通过创建交互式旋转促销内容并将其交付到任何屏幕，轮播横幅使营销人员能够推动转化。

创建和修改促销横幅中特有的内容可能非常耗时，这会限制您快速发布新内容或使其更具针对性的能力。 传送横幅可让您快速创建或修改旋转横幅，添加与产品详细信息或相关资源链接的热点等交互性，并将这些交互性传送到任何屏幕，从而让您更快地将新促销内容推向市场。

轮播横幅由带有​CAROUSELSET​字样的横幅来指定：

在您的网站上，轮播横幅可以如下所示：

在此，您可以导航浏览图像（通过单击数字）。 此外，幻灯片会根据您可以自定义的时间间隔自动旋转。 您在轮播横幅中添加的图像同时支持热点和图像映射，用户可以在其中点按或转到超链接或访问概览窗口。

在此示例中，用户点按或单击了图像映射，并访问了手套的“概览”窗口：

观看如何创建轮播横幅

观看有关如何创建轮播横幅的10分钟和33秒演练。 您还将了解如何预览、编辑和传送传送传送横幅。

快速入门：传送横幅

要快速设置并运行图像集，请执行以下操作：

1. 识别热点和图像映射变量 (仅适用于使用AEM Assets + Dynamic Media的客户)

   首先，识别现有概览实施所使用的动态变量，以便您在AEM Assets的轮播横幅创建过程中能够正确输入热点和图像映射数据。

   注意

   如果您是AEM Sites或Ecommerce客户，则可以使用内置功能导航到产品页面并查找产品目录中的现有SKU。 您无需手动输入热点或图像映射变量。 请参阅有关设置eCommerce的信息。

   如果您是AEM Assets和Dynamic Media客户，则将手动输入热点和图像映射的数据，然后将已发布的URL或嵌入代码与第三方内容管理系统相集成。

2. 可选：根据需要创建轮播集查看器预设。

   如果您是管理员，则可以通过创建自己的轮播查看器预设来自定义轮播的行为和外观。 主要好处是，您可以对多个轮播重复使用此自定义查看器预设。 但是，用户也可以选择在创作轮播时直接自定义轮播的行为和外观。 当您想要为给定轮播设计非常具体的设计时，这是首选方法。

3. 上传图像横幅。

   上传您要实现交互的图像横幅。

4. 创建轮播集。

   在轮播集中，用户在横幅图像中导航，并点按热点或图像映射以访问相关内容。

   要在 Assets 中创建轮播集，请点按​创建，然后选择​轮播集。将资产添加到幻灯片，然后点按​保存。您还可以直接在编辑器中编辑轮播集的外观和行为。

5. 将热点或图像映射添加到图像横幅。

   向图像横幅中添加一个或多个热点或图像映射，并将每个热点或图像映射与链接、概览或体验片段之类的操作相关联。 添加热点或图像映射后，可通过发布轮播集来完成此任务。 发布后会创建嵌入代码，您可以使用该代码复制嵌入代码并将其应用于网站登录页面。

   请参阅（可选）预览传送横幅 — 可选。 如果需要，您可以查看轮播集的表示形式并测试其交互性。

6. 发布传送横幅。

   与发布任何资产一样，您也可以发布轮播集。 在资产中，导航到轮播集，并将其选中，然后点按或点按​发布。 发布轮播集时，会激活URL和嵌入字符串。

7. 执行下列操作之一：

   • 将轮播横幅添加到您的网 站页面您可以将复制的轮播横幅URL或嵌入代码添加到网站页面。

     • 将轮播横幅与现有概览相集成。如果您使用的是第三方Web内容管理系统，则需要将新的轮播横幅与网站上的现有概览实施相集成。

   • 在AEMI中将轮播横幅添加到您的网 站如果您是AEM Sites客户，则可以使用交互式媒体组件将轮播集直接添加到AEM中的页面。

如果需要编辑传送集，请参阅编辑传送集。 此外，您还可以查看和编辑轮播集属性。

识别热点和图像映射变量

首先，识别现有概览实施所使用的动态变量，以便您在AEM Assets的轮播集创建过程中能够输入适当的热点或图像映射数据。

在AEM Assets中将热点或图像映射添加到横幅图像时，您需要为每个热点或图像映射分配一个SKU和可选的其他变量。 这些变量稍后会用于将热点或图像映射与概览内容进行匹配。

必须正确识别要与热点或图像映射数据关联的变量数量和类型。 添加到横幅图像的每个热点或图像映射都必须包含足够的信息，以便在现有的后端系统中明确地识别产品。 同时，每个热点或图像映射不应包含所需的更多数据。 原因是这样会使数据输入过程过于复杂，并且会使正在进行的热点或图像映射管理更容易出错。

有不同的方法来识别一组用于热点或图像映射数据的变量。

有时，与负责现有概览实施的IT专家进行咨询可能已足够，因为他们可能知道在系统中识别概览所需的最少数据集。 但在大多数情况下，可能只需简单地分析前端代码的现有行为即可。

大多数概览实施都使用以下模式：

• 用户在网站上激活用户界面元素。例如，单击​概览​按钮。
• 如果需要，网站会向后端发送Ajax请求以加载概览数据或内容。
• 概览数据会转换为内容，以准备在网页上渲染。
• 最后，前端代码以可视形式将这些内容呈现在屏幕上。

然后，方法是访问实施了快速视图功能的现有网站的不同区域，触发快速视图并捕获由网页发送的Ajax URL，以加载快速视图数据或内容。

通常情况下，您不需要使用任何专业的调试工具。现代的 Web 浏览器具备 Web 检查器，可以实现相同的功能。下面列举了一些具备 Web 检查器的 Web 浏览器：

• 要在Google Chrome中查看所有传出的HTTP请求，请按F12(Windows)或Command-Option-I(Mac)以打开“开发人员工具”面板，然后点按​Network​选项卡。
• 在Firefox中，您可以通过按F12(Windows)或Command-Option-I(Mac)并使用其“网络”选项卡来激活Firebug插件，也可以使用内置的检查器工具及其“网络”选项卡。

在浏览器中打开网络监控时，会触发页面上的概览。

现在，在网络日志中找到Quickview Ajax URL，并复制记录的URL以供将来分析。 在大多数情况下，当您触发概览时，会向服务器发送大量请求。 通常，Quickview Ajax URL是列表中最先使用的URL之一。 它具有复杂的查询字符串部分或路径，其响应MIME类型为text/html、text/xml或text/javascript。

在此过程中，访问网站中具有不同产品类别和类型的不同区域非常重要。 原因是概览URL的某些部分可能与给定网站类别相同，但只有在您访问网站的其他区域时才会发生更改。

在最简单的情况下，概览URL中唯一的变量部分是产品SKU。 在这种情况下，SKU值是您在将热点或图像映射添加到横幅图像时需要的唯一数据块。

但是，在复杂的情况下，除SKU之外，快速视图URL还具有不同的可变元素，例如类别ID、颜色代码、大小代码等。 在这种情况下，在热点或轮播横幅功能的图像映射数据定义中，每个元素都是一个单独的变量。

请考虑以下概览URL示例及其生成的热点或图像映射变量：

上传图像横幅

如果已上传要使用的图像，请前进到下一步创建轮播集。 请注意，在启用Dynamic Media后，必须上传轮播中使用的图像。

要上传图像横幅，请参阅上传资产。

创建轮播集

要创建轮播集:

1. 在Assets中，导航到要创建轮播集的文件夹，然后点按​创建>轮播集。

2. 在​轮播横幅编辑器​页面上，点按​点按以打开资产选择器 ，为第一张幻灯片选择图像。

   在​轮播横幅编辑器​页面上，执行以下任一操作：

   • 在页面的左上角附近，点按​添加幻灯片​图标。
   • 在页面中间附近，点按​点按以打开资产选择器。

   点按以选择要包含在轮播集中的资产。选定资产上有一个复选标记图标。完成后，在页面的右上角附近，点按​选择。

   借助资产选择器，您可以通过键入关键字并点按​返回​来搜索资产。您还可以应用过滤器来优化搜索结果。您可以按路径、收藏集、文件类型和标记进行过滤。选择过滤器，然后点按工具栏上的​过滤器​图标。点按​视图​图标并选择​列视图、卡片视图​或​列表视图​以更改视图。

   有关更多信息，请参阅使用选择器。

3. 继续添加幻灯片，直到您添加了所有要在轮播集中旋转的图像。

4. （可选）执行以下操作之一：

   • 如有必要，可拖动幻灯片以对设置列表中的图像进行重新排序。
   • 要删除图像，请选择该图像，然后点按工具栏上的​删除幻灯片。
   • 要应用预设，请点按页面右上角附近的预设下拉列表，然后选择要一次应用于该预设集的预设。

   要删除幻灯片，请点按该幻灯片，然后点按工具栏中的​删除幻灯片。 要移动幻灯片，请点按订单图标，然后按住并移动到所需位置。

5. 在幻灯片中添加图像后，您可以向图像添加热点和/或图像映射。 请参阅添加热点或图像映射。

6. 您可以通过点按或单击“行为”和“外观”选项卡，并调整轮播横幅的外观或特定组件的行为，来更改轮播集的可视设计和行为。 有关如何使用查看器编辑器的更多信息，请参阅管理查看器预设。

   注意

   对于传送横幅，您可能需要调整以下内容：

   • 图像显示的持续时间。 默认情况下，每幅图像显示9秒。
   • 动画. 默认情况下，每个幻灯片过渡都是渐隐效果。 您可以将其更改为幻灯片过渡。
   • 按钮的样式。 用户可以通过点按每个圆点或数字来旋转横幅。 您可以更改设置指示器按钮的显示位置（如果是数字或虚线样式）以及其大小。
   • 更改图像映射的高亮显示样式或用于热点的图标。
   • 在编辑查看器预设之前，请选择要作为预设基础的样式。 如果不这样做，则在开始编辑查看器预设时，如果您决定更改其他预设，则将丢失所有更改。

   您还可以预览轮播横幅的外观。 请参阅（可选）预览传送横幅。

7. 完成后，点按​Save。

将热点或图像映射到图像横幅

您可以使用轮播集编辑器将热点或图像映射添加到横幅。

添加热点或图像映射时，您可以将热点或图像映射定义为“概览”弹出显示、超链接或体验片段。

请参阅体验片段。

在向图像添加热点或图像映射时，请记住保存您的工作。 在当前 ​​创建/编辑会话期间，支持位于页面右上角附近的取消编辑选项。

创建完轮播横幅后，您可以选择使用​预览​来显示轮播横幅向客户的显示方式。

请参阅（可选）预览传送横幅。

要将热点添加到图像横幅:

1. 在资产中，导航到要进行交互的轮播集。

2. 选择轮播集，然后点按​编辑。

3. 在轮播查看器编辑器中，选择要进行交互的幻灯片。

4. 在页面的左上角附近，点按​热点​或​图像映射。

5. 执行以下任一操作：

   • 对于热点：在图像上，点按您希望显示热点的位置。
   • 对于图像映射：在图像上，点按，然后从左上角拖动到右下角，以创建图像映射区域。 您可以通过拖动角来调整图像映射的大小。

   如有必要，请将热点或图像映射拖到新位置。 根据需要添加其他热点或图像映射。

   要删除热点或图像映射，请点按​操作​选项卡。在​映射和热点​标题下，从​选定类型​下拉菜单中，选择要删除的热点或图像映射的名称。点按菜单旁边的​废纸篓​图标，然后点按​删除。

6. 在“名称”文本字段中，键入热点或图像映射的名称。 此名称也会显示在​映射与热点​下拉列表中。 如果您决定在将来对热点或图像映射进行更改，那么提供名称可以让您轻松地识别该热点或图像映射。

7. 在​Actions​选项卡中执行下列操作之一：

   • 点按​Quickview。

     • 如果您是AEM Sites和Ecommerce客户，请点按​产品选取器​图标（放大镜）以打开​选择产品​页面。 点按要使用的产品，然后点按页面右上角的复选标记，以返回到​轮播横幅编辑器。

     • 如果您不是AEM Sites或Ecommerce客户

       • 请参阅识别热点变量 ，您可能希望定义这些变量。
       • 然后，手动输入SKU值。 在​SKU值​文本字段中，键入产品的SKU（库存单位），即您提供的每个不同产品或服务的唯一标识符。 输入的SKU值会自动填充概览模板的变量部分，以便系统能够将点按的热点与特定SKU的概览相关联。
       • （可选）如果您需要在概览中使用其他变量来进一步识别产品，请点按​添加常规变量。 在文本字段中，指定其他变量。 例如，category=Mens 就是一个添加的变量。
       • 有关更多信息，请参阅使用选择器。

   • 点按​超链接。

     • 如果您是AEM Sites客户，请点按​站点选择器​图标（文件夹）以导航到URL。

       注意

       如果您的交互式内容具有包含相对URL的链接，特别是指向AEM Sites页面的链接，则无法使用基于URL的链接方法。

     • 如果您是独立客户，请在​HREF​文本字段中，指定链接网页的完整URL路径。

       请确保指定是在新的浏览器选项卡（推荐为默认选项卡）还是在同一选项卡中打开链接。

       有关更多信息，请参阅使用选择器。

   • 点按​体验片段。

     • 如果您是AEM Sites客户，请点按​搜索​图标（放大镜）以打开“体验片段”页面。 点按要使用的体验片段，然后点按页面右上角的​选择​以返回到热点管理页面。

       请参阅体验片段。

       注意:请注意，在体验片段中嵌入查看器时，“轮播横幅”中的社交媒体共享工具不受支持。要解决此问题，您可以使用或创建没有社交媒体共享工具的查看器预设。 通过此类查看器预设，您可以成功将其嵌入到体验片段中。

     • 指定将在横幅上显示的体验片段的宽度和高度。

   

   您还可以预览轮播横幅的外观。 请参阅（可选）预览传送横幅。

8. 点按​保存。

9. 发布轮播集。 发布后会创建可在您的网站页面上使用的嵌入代码或URL。 如果您是AEM Sites客户，则可以将轮播集直接添加到您的网页。

   请参阅发布资产。

   请参阅将轮播集添加到您的网站登录页面

编辑轮播集

您可以对轮播集执行多种编辑任务，如下所示：

• 向轮播集添加幻灯片。 另请参阅使用选择器。
• 在轮播集中对幻灯片重新排序。
• 删除轮播集中的资产。
• 应用查看器预设。
• 删除轮播集。
• 添加或编辑热点和图像映射。 另请参阅使用选择器。

请注意，如果您正在使用热点编辑交互式图像，并裁剪图像，则您的热点会被删除。

要编辑轮播集:

1. 执行以下任一操作：

   • 将鼠标悬停在轮播集资产上，然后点按​编辑（铅笔图标）。
   • 将鼠标悬停在轮播集资产上，点按​选择（复选标记图标），然后点按工具栏上的​编辑。
   • 点按“轮播集”资产，然后点按页面左上角的​编辑（铅笔图标）。

2. 要编辑轮播集，请执行以下任一操作：

   • 要添加幻灯片，请点按​添加幻灯片​图标，然后导航到要添加到该幻灯片的资产，然后点按复选标记。
   • 要对幻灯片重新排序，请将幻灯片拖到新位置（选择重新排序图标以移动项目）。
   • 要添加热点或图像映射，请点按热点或图像映射图标，然后参阅添加热点和图像映射。
   • 要编辑轮播集的外观或行为，请点按​外观​选项卡或​行为​选项卡，然后设置所需的选项。
   • 要编辑热点或图像映射，请在相应的幻灯片上选择热点或图像映射，并根据需要在​Actions​选项卡下进行更改。
   • 要删除幻灯片，请将其选中，然后点按工具栏上的​删除幻灯片。
   • 要应用预设，请点按页面右上角附近的预设下拉列表，然后选择查看器预设。
   • 要删除整个轮播集，请导航到轮播集，将其选中，然后点按​Delete。

（可选）预览传送横幅

您可以使用​预览​查看轮播横幅对客户的外观，并测试轮播横幅热点和图像映射以确保它们按预期行事。

当您对轮播横幅满意时，可以发布该横幅。

• 请参阅在网页上嵌入视频查看器或图像查看器。
• 请参阅将 URL 关联到您的 Web 应用程序。请注意，如果您的交互式内容具有包含相对URL的链接，特别是指向AEM Sites页面的链接，则无法使用基于URL的链接方法。
• 请参阅将Dynamic Media Assets添加到页面。

您可以从轮播编辑器（首选方法）或​查看器​列表预览轮播横幅。

要预览轮播横幅:

1. 在​Assets​中，导航到您创建的现有轮播横幅，然后点按以将其打开。

2. 点按​编辑。

3. 在工具栏右角的查看器预设列表中，选择查看器以预览轮播横幅。

   

4. 点按​预览。

5. 点按图像上的热点或图像映射，以测试其关联的操作。

要从“查看器”列表预览轮播横幅，请执行以下操作：

1. 在​Assets​中，导航到您创建的现有轮播横幅，然后点按以将其打开。
2. 在​预览​页面的左上角附近，点按​内容​图标。
3. 在页面左侧面板的​查看器​列表中，点按要使用的轮播横幅查看器预设的名称。
4. 点按图像上的热点或图像映射，以测试其关联的操作。

发布传送横幅

您需要发布轮播才能使用它。 发布轮播集时，会激活URL和嵌入代码。 它还会将轮播发到Dynamic Media云，该云与CDN集成以进行可扩展且性能卓越的交付。

如果您在轮播横幅中使用带有热点的现有交互式图像，则在发布轮播横幅后，必须单独发布该交互式图像。

此外，如果您修改了在轮播横幅中使用的已发布的预先存在的交互式图像，则必须先发布该交互式图像，然后才能将这些更改反映在轮播横幅中。

有关如何发布传送横幅的信息，请参阅发布Dynamic Media Assets。

将轮播横幅添加到您的网站页面

在上传横幅图像以创建轮播、将热点和/或图像映射添加到横幅并发布轮播集后，您现在可以将其添加到现有网站页面。

如果您是AEM Sites客户，则可以通过将交互式媒体组件拖动到页面来直接将轮播横幅添加到您的页面。 请参阅将Dynamic Media Assets添加到页面。

但是，如果您是独立的AEM资产客户，则可以按照此部分所述，手动将轮播横幅添加到您的网站登录页面。

1. 复制已发布的轮播集的嵌入代码。

   请参阅在网页上嵌入视频查看器或图像查看器。

2. 将您从AEM Assets复制的嵌入代码添加到您的网页。

   复制的嵌入代码是响应式代码，因此它应该自动适合页面的嵌入区域。

将轮播横幅与现有概览集成

此任务仅在您是独立的AEM Assets客户时才适用。

此过程的最后一个步骤是将轮播横幅与您网站上的现有概览实施集成。 每个概览实施都是独一无二的，需要一种特定的方法，最可能需要前端IT人员的协助。

现有的概览实施通常表示在网页上发生的一系列相互关联的操作，这些操作按以下顺序发生：

1. 用户在网站的用户界面上触发一个元素。
2. 前端代码根据在步骤1中触发的用户界面元素来获取概览URL。
3. 前端代码使用在第 2 步获取的 URL 发送一个 Ajax 请求。
4. 后端逻辑会将相应的概览数据或内容返回到前端代码。
5. 前端代码加载概览数据或内容。
6. 或者，前端代码会将加载的概览数据转换为HTML表示形式。
7. 前端代码显示一个模态对话框或面板，并将 HTML 内容呈现在屏幕上以供最终用户查看。

这些调用并非独立的公共 API 调用（可以由网页逻辑从任意步骤进行调用）。相反，这些调用属于链式调用，即，每个后续步骤都隐藏在前一步的最后阶段（回调）。

在轮播横幅将替换步骤1和部分步骤2的同时，当用户单击轮播横幅中的热点或图像映射时，查看器将处理此类用户交互。 查看器会向网页返回一个事件，其中包含之前添加的所有热点或图像映射数据。

在此类事件处理程序中，前端代码会执行下列操作：

• 监听轮播横幅发出的事件。
• 根据热点或图像映射数据构建概览URL。
• 触发从后端加载概览并在屏幕上呈现概览以供显示的过程。

由AEM Assets返回的嵌入代码已拥有一个现成的事件处理程序，该处理程序已被注释掉。

因此，只需取消对该代码的注释，并用针对特定网页的代码来替换虚拟处理程序主体即可。

构建概览URL的过程与之前介绍的用于识别热点和图像映射变量的过程基本上相反。

请参阅识别热点和图像映射变量。

触发概览URL并激活概览面板的最后一步，很可能需要IT部门的前端IT人员的协助。 他们深知如何通过正确的步骤准确触发概览实施，从而拥有现成的概览URL。

使用概览创建自定义弹出窗口

请参阅使用概览创建自定义弹出窗口。