传送横幅

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

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

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

chlimage_1-438

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

chlimage_1-439

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

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

chlimage_1-440

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

注意

必须将非管理用户添加到​dam-users​组,才能创建或编辑传送横幅。 如果您在创建或编辑时遇到问题,请咨询系统管理员,他可以将您添加到​dam-users​组。

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

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

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

    注意

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

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

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

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

  3. 上传图像横幅

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

  4. 创建传送集

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

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

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

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

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

  6. 发布传送横幅。

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

  7. 执行下列操作之一:

如果需要编辑传送集,请参阅编辑传送集。 此外,您还可以视图和编辑传送集属性

识别热点和图像映射变量

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

在AEM Assets中向横幅图像添加热点或图像映射时,您需要为每个热点或图像映射分配一个SKU和可选的其他变量。 以后会使用这些变量将热点或图像映射与快速视图内容相匹配。

注意

如果您是AEM Sites和/或AEM Ecommerce客户,请跳过此步骤。 您无需手动识别热点或图像映射变量;您可以使用与Ecommerce的集成进行产品集成。 请参阅有关设置eCommerce的信息。 此外,您还可以使用交互式组件并将其添加到网页。

如果您是AEM Assets或媒体客户,则需发布URL或嵌入代码,然后与第三方内容管理系统集成,并手动识别热点和图像映射。

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

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

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

大部分概览实施采用以下模式:

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

因此,采用的方法是访问现有网站上实施了概览功能的不同区域,触发概览,并且捕获由网页发出的用于加载概览数据或内容的 Ajax URL。

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

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

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

现在,从网络日志中找到概览 Ajax URL,然后复制记录的 URL 以供将来分析时使用。在大多数情况下,当您触发概览时,会有大量请求发出到服务器。通常,概览 Ajax URL 排在列表的首位。它具有复杂的查询字符串部分或路径,其响应MIME类型为text/htmltext/xmltext/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值。 因此,我们的热点或图像映射只需在SKU字段中填入 866558, 1196184, 1081492, 1898294.

单个 SKU,位于 URL 路径中。

记录的概览 URL 包括:

  • https://server/product/6422350843

  • https://server/product/1607745002

  • https://server/product/0086724882

变量部分位于路径的最后一部分,它将成为热点/图像映射的SKU值:64223508431607745002, 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,categoryId1100004

  • SKU为310181,categoryId1100004

  • SKU为308706,categoryId1740148

上传图像横幅

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

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

注意

必须将非管理用户添加到​dam-users​组,才能创建或编辑传送横幅。 如果您在创建或编辑时遇到问题,请咨询系统管理员,他可以将您添加到​dam-users​组。

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

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

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

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

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

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

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

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

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

  4. (可选)执行以下操作之一:

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

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

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

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

    注意

    对于传送横幅,您可能需要调整以下事项:

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

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

  7. 完成后,点按​保存

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

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

在添加热点或图像映射时,您可以将热点定义为快速视图弹出显示、超链接或体验片段。

请参阅体验片段

注意

请注意,将查看器嵌入体验片段时,传送横幅中不支持社交媒体共享工具。 要解决此问题,您可以使用或创建没有社交媒体共享工具的查看器预设。 此类查看器预设使您能够成功地将其嵌入到体验片段中。

在将热点或图像映射添加到图像时,请切记保存您的工作。 在当​的创建/编辑会话中,页面右上角附近支持“撤消和重复选项”。

创建完传送横幅后,您可以选择使用​预览​来查看传送横幅将如何呈现给客户。

请参阅(可选)预览传送横幅

注意

当您在交互式图像或传送横幅中向图像添加热点时,无论热点是交互式图像还是传送横幅,热点信息都会存储在与图像位置相关的同一元数据位置。 此功能意味着您可以在任一查看器中轻松重复使用同一图像及其定义的热点数据。

但是,请注意,传送横幅支持图像上的图像映射,这些图像上可能还包含热点;交互式图像不会。 如果您打算创建使用相同图像的交互式图像或传送横幅,请牢记这一点。 您可能希望改为使用同一图像的单独副本创建交互式图像和传送横幅。

注意

如果您正在编辑具有热点的交互式图像并裁剪图像,则您的热点将被删除。

要向图像横幅添加热点:

  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客户,请点按​搜索​图标(放大镜)以打开“体验片段”页面。 点按您要使用的体验片段,然后点按页面右上角的​选择​以返回到热点管理页面。

        请参阅体验片段

        注意:请注意,将查看器嵌入体验片段时,传送横幅中不支持社交媒体共享工具。要解决此问题,您可以使用或创建没有社交媒体共享工具的查看器预设。 此类查看器预设使您能够成功地将其嵌入到体验片段中。

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

    experience_fragment-carouselbanner

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

  8. 点按​保存

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

    请参阅发布资产

    请参阅将传送集添加到网站登陆页

注意

必须将非管理用户添加到​dam-users​组,才能创建或编辑传送横幅。 如果您在创建或编辑时遇到问题,请咨询系统管理员,他可以将您添加到​dam-users​组。

您可以对传送集执行各种编辑任务,例如:

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

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

要编辑传送集:

  1. 执行下列任一操作:

    • 将鼠标悬停在传送集资产上,然后点按​编辑(铅笔图标)。
    • 将鼠标悬停在传送集资产上,点按​选择(复选标记图标),然后点按工具栏上的​编辑
    • 点按传送集资产,然后在页面的左上角点按​编辑(铅笔图标)。
  2. 要编辑传送集,请执行下列任一操作:

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

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

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

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

要预览传送横幅:

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

  2. 点按​编辑

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

    experience_fragment-carouselbanner-viewerdropdown

  4. 点按​预览

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

要预览来自“查看器”列表的传送横幅:

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

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

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

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

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

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

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

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

  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 之后,如何采取正确的步骤来准确地触发概览实施。

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

请参阅使用快速视图创建自定义弹出窗口

On this page

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now