通过创建交互式旋转促销内容并将其交付到任何屏幕,轮播横幅使营销人员能够推动转化。
创建和修改促销横幅中特有的内容可能非常耗时,这会限制您快速发布新内容或使其更具针对性的能力。 传送横幅可让您快速创建或修改旋转横幅,添加与产品详细信息或相关资源链接的热点等交互性,并将这些交互性传送到任何屏幕,从而让您更快地将新促销内容推向市场。
轮播横幅由带有CAROUSELSET字样的横幅来指定:
在您的网站上,轮播横幅可以如下所示:
在此,您可以导航浏览图像(通过单击数字)。 此外,幻灯片会根据您可以自定义的时间间隔自动旋转。 您在轮播横幅中添加的图像同时支持热点和图像映射,用户可以在其中点按或转到超链接或访问概览窗口。
在此示例中,用户点按或单击了图像映射,并访问了手套的“概览”窗口:
观看有关如何创建轮播横幅的10分钟和33秒演练。 您还将了解如何预览、编辑和传送传送传送横幅。
必须将非管理用户添加到dam-users组中,才能创建或编辑传送横幅。 如果您在创建或编辑时遇到问题,请咨询系统管理员,系统管理员可以将您添加到dam-users组。
要快速设置并运行图像集,请执行以下操作:
识别热点和图像映射变量 (仅适用于使用AEM Assets + Dynamic Media的客户)
首先,识别现有概览实施所使用的动态变量,以便您在AEM Assets的轮播横幅创建过程中能够正确输入热点和图像映射数据。
如果您是AEM Sites或Ecommerce客户,则可以使用内置功能导航到产品页面并查找产品目录中的现有SKU。 您无需手动输入热点或图像映射变量。 请参阅有关设置eCommerce的信息。
如果您是AEM Assets和Dynamic Media客户,则将手动输入热点和图像映射的数据,然后将已发布的URL或嵌入代码与第三方内容管理系统相集成。
可选:根据需要创建轮播集查看器预设。
如果您是管理员,则可以通过创建自己的轮播查看器预设来自定义轮播的行为和外观。 主要好处是,您可以对多个轮播重复使用此自定义查看器预设。 但是,用户也可以选择在创作轮播时直接自定义轮播的行为和外观。 当您想要为给定轮播设计非常具体的设计时,这是首选方法。
上传您要实现交互的图像横幅。
在轮播集中,用户在横幅图像中导航,并点按热点或图像映射以访问相关内容。
要在 Assets 中创建轮播集,请点按创建,然后选择轮播集。将资产添加到幻灯片,然后点按保存。您还可以直接在编辑器中编辑轮播集的外观和行为。
向图像横幅中添加一个或多个热点或图像映射,并将每个热点或图像映射与链接、概览或体验片段之类的操作相关联。 添加热点或图像映射后,可通过发布轮播集来完成此任务。 发布后会创建嵌入代码,您可以使用该代码复制嵌入代码并将其应用于网站登录页面。
请参阅(可选)预览传送横幅 — 可选。 如果需要,您可以查看轮播集的表示形式并测试其交互性。
与发布任何资产一样,您也可以发布轮播集。 在资产中,导航到轮播集,并将其选中,然后点按或点按发布。 发布轮播集时,会激活URL和嵌入字符串。
执行下列操作之一:
将轮播横幅添加到您的网 站页面您可以将复制的轮播横幅URL或嵌入代码添加到网站页面。
在AEMI中将轮播横幅添加到您的网 站如果您是AEM Sites客户,则可以使用交互式媒体组件将轮播集直接添加到AEM中的页面。
如果需要编辑传送集,请参阅编辑传送集。 此外,您还可以查看和编辑轮播集属性。
首先,识别现有概览实施所使用的动态变量,以便您在AEM Assets的轮播集创建过程中能够输入适当的热点或图像映射数据。
在AEM Assets中将热点或图像映射添加到横幅图像时,您需要为每个热点或图像映射分配一个SKU和可选的其他变量。 这些变量稍后会用于将热点或图像映射与概览内容进行匹配。
如果您是AEM Sites和/或AEM Ecommerce客户,请跳过此步骤。 您无需手动识别热点或图像映射变量;您可以将与电子商务的集成用于产品集成。 请参阅有关设置eCommerce的信息。 此外,您还可以使用交互组件并将其添加到网页中。
如果您是AEM Assets或媒体客户,则需要发布URL或嵌入代码,然后与第三方内容管理系统集成,并手动识别热点和图像映射。
必须正确识别要与热点或图像映射数据关联的变量数量和类型。 添加到横幅图像的每个热点或图像映射都必须包含足够的信息,以便在现有的后端系统中明确地识别产品。 同时,每个热点或图像映射不应包含所需的更多数据。 原因是这样会使数据输入过程过于复杂,并且会使正在进行的热点或图像映射管理更容易出错。
有不同的方法来识别一组用于热点或图像映射数据的变量。
有时,与负责现有概览实施的IT专家进行咨询可能已足够,因为他们可能知道在系统中识别概览所需的最少数据集。 但在大多数情况下,可能只需简单地分析前端代码的现有行为即可。
大多数概览实施都使用以下模式:
然后,方法是访问实施了快速视图功能的现有网站的不同区域,触发快速视图并捕获由网页发送的Ajax URL,以加载快速视图数据或内容。
通常情况下,您不需要使用任何专业的调试工具。现代的 Web 浏览器具备 Web 检查器,可以实现相同的功能。下面列举了一些具备 Web 检查器的 Web 浏览器:
在浏览器中打开网络监控时,会触发页面上的概览。
现在,在网络日志中找到Quickview Ajax URL,并复制记录的URL以供将来分析。 在大多数情况下,当您触发概览时,会向服务器发送大量请求。 通常,Quickview Ajax URL是列表中最先使用的URL之一。 它具有复杂的查询字符串部分或路径,其响应MIME类型为text/html
、text/xml
或text/javascript
。
在此过程中,访问网站中具有不同产品类别和类型的不同区域非常重要。 原因是概览URL的某些部分可能与给定网站类别相同,但只有在您访问网站的其他区域时才会发生更改。
在最简单的情况下,概览URL中唯一的变量部分是产品SKU。 在这种情况下,SKU值是您在将热点或图像映射添加到横幅图像时需要的唯一数据块。
但是,在复杂的情况下,除SKU之外,快速视图URL还具有不同的可变元素,例如类别ID、颜色代码、大小代码等。 在这种情况下,在热点或轮播横幅功能的图像映射数据定义中,每个元素都是一个单独的变量。
请考虑以下概览URL示例及其生成的热点或图像映射变量:
单个 SKU,位于查询字符串中。 | 记录的概览URL包括:
URL中唯一的变量部分是 |
单个 SKU,位于 URL 路径中。 | 记录的概览URL包括:
变量部分位于路径的最后一部分,它将成为热点/图像映射的SKU值: |
SKU 和类别 ID,位于查询字符串中。 | 记录的概览URL包括:
在这种情况下,URL 中有两个可变部分。SKU存储在 因此,热点/图像映射定义是成对存在的。 即,一个 SKU 值对应一个额外的变量
|
如果已上传要使用的图像,请前进到下一步创建轮播集。 请注意,在启用Dynamic Media后,必须上传轮播中使用的图像。
要上传图像横幅,请参阅上传资产。
必须将非管理用户添加到dam-users组,才能创建或编辑传送横幅。 如果您在创建或编辑时遇到问题,请咨询系统管理员,系统管理员可以将您添加到dam-users组。
要创建轮播集:
在Assets中,导航到要创建轮播集的文件夹,然后点按创建>轮播集。
在轮播横幅编辑器页面上,点按点按以打开资产选择器 ,为第一张幻灯片选择图像。
在轮播横幅编辑器页面上,执行以下任一操作:
点按以选择要包含在轮播集中的资产。选定资产上有一个复选标记图标。完成后,在页面的右上角附近,点按选择。
借助资产选择器,您可以通过键入关键字并点按返回来搜索资产。您还可以应用过滤器来优化搜索结果。您可以按路径、收藏集、文件类型和标记进行过滤。选择过滤器,然后点按工具栏上的过滤器图标。点按视图图标并选择列视图、卡片视图或列表视图以更改视图。
有关更多信息,请参阅使用选择器。
继续添加幻灯片,直到您添加了所有要在轮播集中旋转的图像。
(可选)执行以下操作之一:
要删除幻灯片,请点按该幻灯片,然后点按工具栏中的删除幻灯片。 要移动幻灯片,请点按订单图标,然后按住并移动到所需位置。
在幻灯片中添加图像后,您可以向图像添加热点和/或图像映射。 请参阅添加热点或图像映射。
您可以通过点按或单击“行为”和“外观”选项卡,并调整轮播横幅的外观或特定组件的行为,来更改轮播集的可视设计和行为。 有关如何使用查看器编辑器的更多信息,请参阅管理查看器预设。
对于传送横幅,您可能需要调整以下内容:
您还可以预览轮播横幅的外观。 请参阅(可选)预览传送横幅。
完成后,点按Save。
您可以使用轮播集编辑器将热点或图像映射添加到横幅。
添加热点或图像映射时,您可以将热点或图像映射定义为“概览”弹出显示、超链接或体验片段。
请参阅体验片段。
请注意,在体验片段中嵌入查看器时,“轮播横幅”中的社交媒体共享工具不受支持。 要解决此问题,您可以使用或创建没有社交媒体共享工具的查看器预设。 通过此类查看器预设,您可以成功将其嵌入到体验片段中。
在向图像添加热点或图像映射时,请记住保存您的工作。 在当前 创建/编辑会话期间,支持位于页面右上角附近的取消编辑选项。
创建完轮播横幅后,您可以选择使用预览来显示轮播横幅向客户的显示方式。
请参阅(可选)预览传送横幅。
在交互式图像或轮播横幅中向图像添加热点时,热点信息会存储在与图像位置相对的相同元数据位置,而无论该位置是交互式图像还是轮播横幅。 此功能意味着您可以在任意查看器中轻松重复使用同一图像及其定义的热点数据。
但是,请注意,传送横幅支持图像映射的图像也可能包含热点;交互式图像不会。 如果您打算创建使用相同图像的交互式图像或轮播横幅,请牢记这一点。 您可能希望使用同一图像的不同副本来创建交互式图像和传送横幅。
如果您正在使用热点编辑交互式图像并裁剪图像,则热点会被删除。
要将热点添加到图像横幅:
在资产中,导航到要进行交互的轮播集。
选择轮播集,然后点按编辑。
在轮播查看器编辑器中,选择要进行交互的幻灯片。
在页面的左上角附近,点按热点或图像映射。
执行以下任一操作:
如有必要,请将热点或图像映射拖到新位置。 根据需要添加其他热点或图像映射。
要删除热点或图像映射,请点按操作选项卡。在映射和热点标题下,从选定类型下拉菜单中,选择要删除的热点或图像映射的名称。点按菜单旁边的废纸篓图标,然后点按删除。
在“名称”文本字段中,键入热点或图像映射的名称。 此名称也会显示在映射与热点下拉列表中。 如果您决定在将来对热点或图像映射进行更改,那么提供名称可以让您轻松地识别该热点或图像映射。
在Actions选项卡中执行下列操作之一:
点按Quickview。
如果您是AEM Sites和Ecommerce客户,请点按产品选取器图标(放大镜)以打开选择产品页面。 点按要使用的产品,然后点按页面右上角的复选标记,以返回到轮播横幅编辑器。
如果您不是AEM Sites或Ecommerce客户
点按超链接。
如果您是AEM Sites客户,请点按站点选择器图标(文件夹)以导航到URL。
如果您的交互式内容具有包含相对URL的链接,特别是指向AEM Sites页面的链接,则无法使用基于URL的链接方法。
如果您是独立客户,请在HREF文本字段中,指定链接网页的完整URL路径。
请确保指定是在新的浏览器选项卡(推荐为默认选项卡)还是在同一选项卡中打开链接。
有关更多信息,请参阅使用选择器。
点按体验片段。
如果您是AEM Sites客户,请点按搜索图标(放大镜)以打开“体验片段”页面。 点按要使用的体验片段,然后点按页面右上角的选择以返回到热点管理页面。
请参阅体验片段。
注意:请注意,在体验片段中嵌入查看器时,“轮播横幅”中的社交媒体共享工具不受支持。要解决此问题,您可以使用或创建没有社交媒体共享工具的查看器预设。 通过此类查看器预设,您可以成功将其嵌入到体验片段中。
指定将在横幅上显示的体验片段的宽度和高度。
您还可以预览轮播横幅的外观。 请参阅(可选)预览传送横幅。
点按保存。
发布轮播集。 发布后会创建可在您的网站页面上使用的嵌入代码或URL。 如果您是AEM Sites客户,则可以将轮播集直接添加到您的网页。
请参阅发布资产。
必须将非管理用户添加到dam-users组中,才能创建或编辑传送横幅。 如果您在创建或编辑时遇到问题,请咨询系统管理员,系统管理员可以将您添加到dam-users组。
您可以对轮播集执行多种编辑任务,如下所示:
请注意,如果您正在使用热点编辑交互式图像,并裁剪图像,则您的热点会被删除。
要编辑轮播集:
执行以下任一操作:
要编辑轮播集,请执行以下任一操作:
您可以使用预览查看轮播横幅对客户的外观,并测试轮播横幅热点和图像映射以确保它们按预期行事。
当您对轮播横幅满意时,可以发布该横幅。
您可以从轮播编辑器(首选方法)或查看器列表预览轮播横幅。
要预览轮播横幅:
在Assets中,导航到您创建的现有轮播横幅,然后点按以将其打开。
点按编辑。
在工具栏右角的查看器预设列表中,选择查看器以预览轮播横幅。
点按预览。
点按图像上的热点或图像映射,以测试其关联的操作。
要从“查看器”列表预览轮播横幅,请执行以下操作:
您需要发布轮播才能使用它。 发布轮播集时,会激活URL和嵌入代码。 它还会将轮播发到Dynamic Media云,该云与CDN集成以进行可扩展且性能卓越的交付。
如果您在轮播横幅中使用带有热点的现有交互式图像,则在发布轮播横幅后,必须单独发布该交互式图像。
此外,如果您修改了在轮播横幅中使用的已发布的预先存在的交互式图像,则必须先发布该交互式图像,然后才能将这些更改反映在轮播横幅中。
有关如何发布传送横幅的信息,请参阅发布Dynamic Media Assets。
在上传横幅图像以创建轮播、将热点和/或图像映射添加到横幅并发布轮播集后,您现在可以将其添加到现有网站页面。
如果您是AEM Sites客户,则可以通过将交互式媒体组件拖动到页面来直接将轮播横幅添加到您的页面。 请参阅将Dynamic Media Assets添加到页面。
但是,如果您是独立的AEM资产客户,则可以按照此部分所述,手动将轮播横幅添加到您的网站登录页面。
复制已发布的轮播集的嵌入代码。
将您从AEM Assets复制的嵌入代码添加到您的网页。
复制的嵌入代码是响应式代码,因此它应该自动适合页面的嵌入区域。
此任务仅在您是独立的AEM Assets客户时才适用。
此过程的最后一个步骤是将轮播横幅与您网站上的现有概览实施集成。 每个概览实施都是独一无二的,需要一种特定的方法,最可能需要前端IT人员的协助。
现有的概览实施通常表示在网页上发生的一系列相互关联的操作,这些操作按以下顺序发生:
这些调用并非独立的公共 API 调用(可以由网页逻辑从任意步骤进行调用)。相反,这些调用属于链式调用,即,每个后续步骤都隐藏在前一步的最后阶段(回调)。
在轮播横幅将替换步骤1和部分步骤2的同时,当用户单击轮播横幅中的热点或图像映射时,查看器将处理此类用户交互。 查看器会向网页返回一个事件,其中包含之前添加的所有热点或图像映射数据。
在此类事件处理程序中,前端代码会执行下列操作:
由AEM Assets返回的嵌入代码已拥有一个现成的事件处理程序,该处理程序已被注释掉。
因此,只需取消对该代码的注释,并用针对特定网页的代码来替换虚拟处理程序主体即可。
构建概览URL的过程与之前介绍的用于识别热点和图像映射变量的过程基本上相反。
请参阅识别热点和图像映射变量。
触发概览URL并激活概览面板的最后一步,很可能需要IT部门的前端IT人员的协助。 他们深知如何通过正确的步骤准确触发概览实施,从而拥有现成的概览URL。
请参阅使用概览创建自定义弹出窗口。