传送横幅

传送横幅使营销人员能够轻松创建交互式旋转促销内容并将其交付到任何屏幕，从而推动转化。

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

传送横幅由带有​CAROUSELSET​字样的横幅来指定：

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

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

在此示例中，用户已点击或单击图像映射，并访问手套的快速视图窗口：

观看如何创建传送横幅

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

快速开始:传送横幅

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

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

   开始，识别现有快速视图实施所使用的动态变量，以便在AEM Assets的传送横幅创建过程中输入适当的热点和图像映射数据。

   注意

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

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

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

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

3. 上传图像横幅。

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

4. 创建传送集。

   在轮盘集中，用户在横幅图像之间导航，并点按热点或图像地图以访问相关内容。

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

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

   将一个或多个热点或图像映射添加到图像横幅，并将每个热点或图像映射与链接、概览或体验片段等操作相关联。 添加热点或图像地图后，通过发布传送集来完成此任务。 发布后会创建可用于复制并应用于网站登陆页的嵌入代码。

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

6. 发布传送横幅。

   您可以像发布任何资产一样发布传送集。 在资产中，导航到传送集并选择它，然后点按或点按​发布。 发布传送集时，将激活URL和嵌入字符串。

7. 执行下列操作之一：

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

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

   • 在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)打开“Developer Tools”（开发人员工具）面板，然后点按​Network​选项卡。
• 在Firefox中，您可以通过按F12(Windows)或Command-Option-I(Mac)并使用其“网络”选项卡来激活Firebug插件，也可以使用内置的检查器工具及其“网络”选项卡。

在浏览器中开启网络监控功能后，页面上便会触发概览。

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

在这个过程中，您需要访问网站中具有不同产品类别和类型的不同区域，这一点很重要。这是因为，对于特定的网站类别，概览 URL 的某些部分可能是通用的，只有在您访问网站的不同区域时才会发生更改。

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

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

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

单个 SKU，位于查询字符串中。	记录的概览 URL 包括： https://server/json?productId=866558&source=100 https://server/json?productId=1196184&source=100 https://server/json?productId=1081492&source=100 https://server/json?productId=1898294&source=100 URL中唯一的变量部分是productId=查询字符串参数的值，它显然是SKU值。 因此，我们的热点或图像映射只需要填充值(如 866558, 1196184, 1081492, 1898294.
单个 SKU，位于 URL 路径中。	记录的概览 URL 包括： https://server/product/6422350843 https://server/product/1607745002 https://server/product/0086724882 变量部分位于路径的最后一部分，它成为热点／图像映射的SKU值：6422350843、1607745002, 0086724882.
SKU 和类别 ID，位于查询字符串中。	记录的概览 URL 包括： https://server/quickView/product/?category=1100004&prodId=305466 https://server/quickView/product/?category=1100004&prodId=310181 https://server/quickView/product/?category=1740148&prodId=308706 在这种情况下，URL 中有两个可变部分。SKU存储在prodId参数中，类别ID存储在category=参数中。 因此，热点／图像映射定义是成对存在的。 即，一个 SKU 值对应一个额外的变量 categoryId。生成的各对如下所示： SKU为305466,categoryId为1100004。 SKU为310181,categoryId为1100004。 SKU为308706,categoryId为1740148。

上传图像横幅

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

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

创建传送集

要创建传送集，请执行以下操作:

1. 在资产中，导航到要创建传送集的文件夹，然后点按​创建>传送集。

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

   在​传送横幅编辑器​页面上，执行下列操作之一：

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

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

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

   有关详细信息，请参阅使用选择器。

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

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

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

   要删除幻灯片，请点按幻灯片，然后点按工具栏中的​删除幻灯片。 要移动幻灯片，请点按重排器图标，按住并移至所需位置。

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

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

   注意

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

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

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

7. 完成后，点按​保存。

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

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

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

请参阅体验片段。

在向图像添加热点或图像映射时，切记保存您的工作。 在当 前 ​​的创建／编辑会话中，支持在页面右上角附近的撤消和重做选项。

创建完传送横幅后，您可以选择使用​预览​来查看传送横幅对客户的显示方式。

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

要向图像横幅添加热点:

1. 从资产中，导航到要进行交互的传送集。

2. 选择传送集，然后点按​编辑。

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

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

5. 执行下列操作之一：

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

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

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

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

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

   • 点按​概览。

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

     • 如果您不是AEM Sites或电子商务客户

       • 请参阅识别热点变量，因为您可能想要定义这些变量。
       • 然后，手动输入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. 要编辑传送集，请执行下列任一操作：

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

（可选）预览传送横幅

您可以使用​预览​来查看传送横幅对客户的外观，并测试传送横幅热点和图像映射以确保它们按预期的方式显示。

当您对传送横幅感到满意时，可以发布它。

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

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

预览传送横幅:

1. 在​资产​中，导航到您已创建的现有传送横幅，然后点按以将其打开。

2. 点按​编辑。

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

   

4. 点按​预览。

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

要从“查看器”预览传送横幅，请执行以下操作:

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

发布传送横幅

您需要发布传送才能使用它。 发布传送集时，将激活URL和嵌入代码。 它还将传送发布到Dynamic Media云，该云与CDN集成以实现可扩展和高性能投放。

如果您将现有的带热点的交互式图像用于传送横幅，则必须在发布传送横幅后单独发布该交互式图像。

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

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

将传送横幅添加到网站页面

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

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

但是，如果您是独立的AEM assets客户，则可以按本节所述手动将传送横幅添加到您的网站登陆页。

1. 复制已发布的传送集的嵌入代码。

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

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

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

将传送横幅与现有概览集成

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

此过程的最后一步是将传送横幅与网站上的现有快速视图实施相集成。 每个Quickview实施都是独一无二的，需要一种特定的方法，最可能需要前端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 之后，如何采取正确的步骤来准确地触发概览实施。

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

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