交互式图像

通过将“购物”热点拖放到图像上,您可以轻松地为客户打造出丰富、引人入胜的静态图像体验。购物热点将有关产品或服务的附加信息与直接的、销售点的“添加到购物车”或“购买”功能结合在一起。 客户可以点按这些热点并直接链接到产品或服务、将其添加到购物车或链接到网页。 这类直接体验能够提高客户在您网站上的参与度和转化率。

以下是带有概览弹出窗口的购物横幅。 用户点按模型上的圆或“热点”,即可激活概览。

chlimage_1-368

转到以下内容,即可在上面的网页上查看交互式图像的实际操作情况:

https://marketing.adobe.com/resources/help/en_US/dm/shoppable-banner/we-fashion-QVzoom/index2-shoppable.html

观看如何创建交互式图像横幅

观看如何创建交互式图像横幅的10分钟33秒演练。 您还将学习如何预览、编辑和投放交互式图像横幅。

快速开始:交互式图像

以下工作流分步说明旨在帮助您在AEM Assets中快速设置并运行交互式图像。

请查找某些“快速入门”任务中的​示例​标题。它包含一个简短的教程,该教程基于尚未向其添加交互式图像的以下网页示例:

https://marketing.adobe.com/resources/help/en_US/dm/shoppable-banner/we-fashion/landing-0.html

本教程有助于说明在您自己的网站上集成交互式图像的步骤。

交互式图像工作流:

  1. (可选)识别热点变量 — 如果您使用AEM Assets和Dynamic Media独立版本,可通过识别现有Quickview实施中使用的动态变量来进行开始,以便您在创建交互式图像时输入热点数据。请参阅(可选)识别热点变量

    但是,如果您使用AEM Sites或AEM eCommerce,或同时使用两者,则不需要执行此步骤。

    请参阅AEM Assets🔗中的电子商务概念。

  2. (可选)创建交互式图像查看器预设 — 自定义用于表示热点的图形图像。如果您打算使用名为Shoppable_Banner的现成交互式图像查看器预设,则无需创建您自己的交互式图像查看器预设。

    请参阅(可选)创建交互式图像查看器预设

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

    请参阅上传图像横幅

  4. 将热点添加到图像横幅 — 将一个或多个热点添加到图像横幅,并将每个热点与操作(如超链接、概览或体验片段)关联。添加热点后,您将通过发布交互式图像来完成此任务。

  5. 将交互式图像添加到您的网站或AEM中的您的网站

    • 如果您使用AEM Sites或AEM eCommerce,或同时使用两者,则可以通过将交互式媒体组件拖动到页面上,将交互式图像直接添加到AEM中的网页。 请参阅将Dynamic Media资产添加到页面
    • 如果您使用AEM Assets和Dynamic Media独立版本,则必须在您的网站上复制嵌入代码,然后将其与现有Quickview集成。 请参阅将交互式图像与您的网站集成
    • 如果您使用第三方WCM(Web内容管理器),则必须将新的交互式视频与您网站上使用的现有Quickview实施相集成。 请参阅将交互式图像与现有Quickview集成。

(可选)识别热点变量

注意

只有在以下情况下才需要此任务:

  • 您希望通过触发Quickviews向图像添加交互性。
  • 您的AEM实施does not​使用eCommerce integration framework将产品数据从任何电子商务解决方案(如IBM Websphere Commerce、Elastic Path、hybris或Intershop)提取到AEM。 请参阅AEM Assets🔗中的电子商务概念。

如果您的AEM实施使用电子商务,则可以跳过此任务并继续到下一个任务。

开始:识别现有Quickview实现所使用的动态变量,以便您输入热点数据以创建交互式图像。

在AEM Assets中向横幅图像添加热点时,您需要分配SKU(库存单位;您所优惠的每个不同产品或服务的唯一标识符)和每个热点的可选附加变量。 以后会使用这些热点变量将热点与Quickview内容相匹配。

必须准确地识别要与热点数据相关联的变量数量及类型,这一点很重要。而且,添加到横幅图像的每个热点都必须附带足够的信息,以便能够在现有的后端系统中明确地识别产品。

有多种不同的方法可以识别用于热点数据的变量集。

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

大多数Quickview实施采用以下模式:

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

接下来的方法是访问实现Quickview功能的现有网站的不同区域,触发Quickview并捕获由网页发送的用于加载Quickview数据或内容的Ajax URL。

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

  • 要在Google Chrome中查看所有传出HTTP请求,请按F12打开​开发人员工具​面板,然后单击​网络​选项卡。

    在Mac上,按​Command+Option+I​打开​开发人员工具​面板,然后单击“Network(网络)”选项卡。

  • 在Firefox中,您可以通过按F12并使用其“网络”选项卡来激活Firebug插件,也可以使用内置的​检查器​工具及其​网络​选项卡。

    在Mac上,按​Command+Option+I​打开​开发人员工具​面板,然后单击​检查器​选项卡。

在浏览器中打开网络监视时,在页面上触发概览。

现在,在网络日志中找到Quickview Ajax URL,并复制记录的URL以供将来分析。 在大多数情况下,触发Quickview时,会有许多请求发送到服务器。 通常,Quickview Ajax URL是列表中第一个。 它具有复杂的查询字符串部分或路径,其响应MIME类型为text/htmltext/xmltext/javascript

在此过程中,访问网站中具有不同产品类别和类型的不同区域非常重要。 原因是,Quickview URL可能具有特定网站类别的通用部分,但仅在您访问网站的其他区域时更改。

在最简单的情况下,Quickview URL中唯一的变量部分是产品SKU。 在这种情况下,SKU 值就是您将热点添加到横幅图像时唯一需要提供的数据。

但是,在复杂情况下,除SKU外,Quickview URL还具有不同的可变元素,如类别ID、颜色代码、大小代码等。 在这种情况下,在 AEM Assets 的交互式购物图像功能中,每个元素都是热点数据定义中的一个独立变量。

请考虑以下Quickview URL示例及其生成的热点变量:

单个 SKU,位于查询字符串中。

录制的Quickview 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字段中填充866558119618410814921898294等值即可。

单个 SKU,位于 URL 路径中。

录制的Quickview URL包括:

  • https://server/product/6422350843

  • https://server/product/1607745002

  • https://server/product/0086724882

路径的最后一部分是变量部分,它成为热点的SKU值:642235084316077450020086724882

SKU 和类别 ID,位于查询字符串中。

录制的Quickview 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中

categoryId

  • 305466categoryId1100004

  • 310181categoryId1100004

  • 308706categoryId1740148

示例

您可以将上述三个示例中所用的方法运用到演示网页:

https://marketing.adobe.com/resources/help/en_US/dm/shoppable-banner/we-fashion/landing-0.html

演示网页有多个产品缩略图,每个缩略图都有一个标有​的Quickview按钮,请参阅更多。 在Web浏览器的调试工具仍处于激活状态时,单击每个按钮并记下录制的Quickview URL。 在激活页面上所有四个可用的产品概览后,您对向后端发出的概览请求具有以下列表:

  • /datafeed/Men-Windbreaker.json
  • /datafeed/Men-SimpleHenley.json
  • /datafeed/Men-CamoPullover.json
  • /datafeed/Women-QuiltedDownJacket.json

查看这些服务器调用,您会发现只有请求路径中存在产品特定信息。 您还会注意到,查询字符串根本不被使用,并且涉及两种不同类型的数据段:

  • 第一类是“男人”或“妇女”。 您可以称此为“产品类别”。
  • 第二种类型是产品名称,如CamoPullover。 您可以假定这是产品SKU。

根据此信息,整个Quickview URL具有以下模式:

/datafeed/$categoryId$-$SKU$.json

依据上述分析,您可以在热点中使用 categoryIdSKU

现在,您便可以使用 AEM Assets 中的交互式购物图像功能,上传图像横幅并向其添加热点。

(可选)创建交互式图像查看器预设

您可以选择使用AEM Assets附带的名为​Shoppable_Banner​的现成默认交互式图像查看器预设。 或者,您也可以创建自己的自定义查看器预设以用于交互式图像。

在创建自定义交互式图像查看器预设时,您可以确定图像横幅上热点的外观。 在创建查看器预设的过程中,您可以选择使用预定义图像库中提供的热点图形。

在保存查看器预设后,查看器预设会在AEM Assets的​查看器预设​列表页面上自动激活(打开)。 此功能意味着无论您何时视图资产,都可以在交互式媒体组件中看到此功能。 但是,要​传送具有此查看器预设的交互式横幅,您还必须​发布​您的查看器预设(对于自定义或现成查看器预设,也是如此)。

要创建交互式图像查看器预设,请执行以下操作:

  1. 在左边栏中,点按​工具>资产>查看器预设

  2. 在页面的右上角附近,点按​创建

  3. 在​新建查看器预设​对话框中,键入一个用于描述交互式横幅查看器预设的名称。

    这是保存后将在​查看器预设​列表页面中显示的标题。

  4. 在​富媒体类型​下拉菜单中,选择​交互式图像

  5. 点按​创建

  6. 在​编辑查看器预设​页面上,点按​外观​选项卡。

  7. 执行下列操作之一:

    • 要上传您自己的热点图像以在图像上使用,请点按​资产选取器​图标。在​选择内容​页面中,导航到您要使用的热点图像,将其选中,然后点按右上角的​复选标记​图标。
    • 要选择预定义的热点图像,请点按​热点库​图标。在热点图库画板上,点按您要使用的热点图像。
  8. 在页面的右上角附近,点按​保存

    请确保您发布了新查看器预设。

    请参阅发布已添加的查看器预设

    现在,您便可以上传图像横幅。

上传图像横幅

如果您已上传要使用的图像,请继续执行下一步将热点添加到图像横幅

要上传图像横幅,请:

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

    请参阅上传资产

    现在,您可以向图像横幅添加热点;请参阅下面的下一个任务。

将热点添加到图像横幅

您可以使用​热点管理​页面上的编辑器将热点添加到图像横幅。

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

请参阅体验片段

注意

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

在当​的创建/编辑会话中,页面右上角附近支持“撤消和重复选项”。

创建完交互式图像后,您可以使用​预览​来查看交互式图像将如何呈现给客户的演示。

请参阅(可选)预览交互式图像

注意

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

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

另请参阅传送横幅

注意

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

要向图像横幅添加热点:

  1. 在“资产”视图中,导航到您要实现交互的图像横幅。

  2. 执行下列操作之一:

    • 将鼠标悬停在图像上,然后点按​选择(复选标记图标)。 在工具栏中,点按​编辑
    • 将鼠标悬停在图像上,然后点按​更多操作(三个点图标)>编辑
    • 点按图像以在​详细信息视图​页中将其打开。 在工具栏中,点按​编辑
  3. 在页面的左上角附近,点按​添加热点(手指点按图标)以打开​热点管理​页面。

  4. 在页面的左上角附近,点按​热点

  5. a.在​热点管理​页面的左上角附近,点按​热点
    b.在图像上,点按您希望显示热点的位置。 如有必要,可拖动热点以调整其位置。c.重复步骤a和b,根据需要添加其他热点。
    d.(可选)要删除热点,请在图像上选择它,然后点按​热点​标题下的​删除(垃圾桶图标)。

  6. 在​名称​文本字段中,键入热点的名称。 此名称也会显示在​选定的热点​下拉列表中。

  7. 执行下列操作之一:

    • 点按​Quickview

      • 如果您是AEM Sites或电子商务客户,请点按​产品选取器​图标(放大镜)以打开​选择产品​页面。 点按要使用的产品,然后点按页面右上角的​选择​以返回到​热点管理​页面。

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

        • 请参阅识别热点变量;您需要定义这些变量。
        • 然后,手动输入SKU值。 在​SKU值​文本字段中,键入产品的SKU(库存单位),即您所优惠的每个不同产品或服务的唯一标识符。 输入的SKU值会自动填充Quickview模板的变量部分,以便系统能够将点按的热点与特定SKU的Quickview关联。
        • (可选)如果您需要在概览中使用其他变量来进一步标识产品,请点按​添加常规变量。 在文本字段中,指定其他变量。 例如,category=Mens 就是一个添加的变量。
    • 点按​超链接

      • 如果您是AEM Sites客户,请点按​站点选择器​图标(文件夹)以导航到URL。 请注意,如果您的交互式内容包含带有相对URL的链接,特别是指向AEM Sites页面的链接,则无法使用基于URL的链接方法。
      • 如果您是独立客户,请在​HREF​文本字段中指定链接网页的完整URL路径。

      请确保指定是在新的浏览器选项卡(建议的默认选项卡)还是在同一选项卡中打开链接。

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

    • 点按​体验片段

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

        请参阅体验片段

        注意

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

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

  8. 点按​保存​以保存您的工作并返回至​浏览​页面。

  9. 发布交互式图像。 通过发布,横幅可通过云传送,如果需要与第三方网站集成,还可生成嵌入代码。

    请参阅发布资产

    在添加热点并发布交互式图像后,您现在可以将其添加到现有网站。

    请参阅将交互式图像与您的网站集成

    注意

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

(可选)预览交互式图像

您可以使用预览来查看交互式图像对客户的呈现效果,并测试图像的热点以确保它们按预期的方式显示。

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

要预览交互式图像:

  1. 在“资产”视图中,导航到您创建的现有交互式图像,然后点按以在预览中打开它。
  2. 在预览页面的左上角附近,在​内容​下拉列表中,点按​查看器
  3. 在​查看器​列表中,点按​Shoppable_Banner​或您创建的交互式图像查看器预设的名称。
  4. 点按图像上的热点以测试其关联的操作。

发布交互式图像资源

有关如何发布交互式图像资产的详细信息,请参阅发布资产

将交互式图像与您的网站集成

在上传横幅图像、将热点添加到图像并发布交互式图像后,您现在可以将其添加到网站页面。

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

如果您是独立的AEM Assets客户,则可以按本节所述手动将交互式图像添加到您的网站。

  1. 复制已发布的交互式图像的嵌入代码。

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

  2. 将复制的嵌入代码添加到网页中的所需位置。

    复制的嵌入代码已设置为响应式环境,因此应自动适合分配的区域。

示例

以演示网站为例:

https://marketing.adobe.com/resources/help/en_US/dm/shoppable-banner/we-fashion/landing-0.html

请注意,三位男士的照片是静态的 IMG 标记:

<img class="img-responsive" width="100%" title="Hero Image 2" alt="Hero Image 2" src="images/shoppable-banner.jpg">

集成过程很简单,只需删除 IMG 标记并将其替换为从 AEM Assets 中复制的嵌入代码即可。您可以通过下面的 URL 查看最终效果,即页面上会显示带有三个圆形热点的交互式购物图像:

https://marketing.adobe.com/resources/help/en_US/dm/shoppable-banner/we-fashion/landing-1.html

注意

至此,演示网站交互式购物图像上的热点仅用于显示目的;它们尚未与现有Quickviews集成。

要对交互式购物图像应用裁剪以实现响应式环境,您可以将交互式图像配置属性ZoomView.iscommand包含到路径中 — 其中ZoomView是要调用的组件,iscommand是您应用的裁剪图像服务命令。

请参阅 ZoomView.iscommand 配置属性。

请参阅裁剪图像服务命令。

现在,您已准备好将交互式图像与网站上的现有概览相集成。

将交互式图像与现有Quickview集成

注意

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

此过程的最后一步是将交互式图像与网站上现有的Quickview实施相集成。 但是,没有任何一种集成解决方案是在所有情况下都适用的。每个Quickview实施都是独一无二的,需要一种最可能需要前端IT人员协助的具体方法。

现有的Quickview实现通常表示按以下顺序在网页上发生的一系列相互关联的操作:

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

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

如果用交互式购物图像来替换第 1 步的操作以及第 2 步的部分操作,则与此同时,当用户单击购物图像中的热点时,查看器就会处理此类用户交互。查看器会向网页返回一个事件,其中包含之前添加到 AEM Assets 中的所有热点数据。

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

  • 监听交互式购物图像发出的事件。
  • 根据热点数据构建Quickview URL。
  • 触发从后端加载概览并在屏幕上显示概览的过程。

AEM Assets返回的嵌入代码已经有一个已注释掉的可用事件处理程序,如下面突出显示的代码片断所示:

        var s7interactiveimageviewer = new s7viewers.InteractiveImage({
            "containerId" : "s7interactiveimage_div",
            "params" : { 
                "serverurl" : "https://aodmarketingna.assetsadobe.com/is/image",
                "contenturl" : "https://aodmarketingna.assetsadobe.com/", 
                "config" : "/etc/dam/presets/viewer/Shoppable_Media",
                "asset" : "/content/dam/mac/aodmarketingna/shoppable-banner/shoppable-banner.jpg" }
        })
        /* // Example of interactive image event for Quickview.
             s7interactiveimageviewer.setHandlers({ 
                "quickViewActivate": function(inData) {
                    var sku=inData.sku; //SKU for product ID
                    //To pass other parameter from the hotspot, you will need to add custom parameter during the hotspot setup as parameterName=value
                    loadQuickView(sku); //Replace this call with your Quickview plugin
                    //Please refer to your Quickviewer plugin for the Quickview call
                 }, 
             });
        */
        s7interactiveimageviewer.init();

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

构建Quickview URL的过程与之前介绍的用于识别热点变量的过程基本相反。

请参阅识别热点变量

使用我们之前的Quickview URL示例,您可以在以下示例中了解在各种情况下如何构建Quickview URL:

单个 SKU,位于查询字符串中

s7interactiveimageviewer.setHandlers({ "quickViewActivate": function(inData) { var quickViewUrl = "https://server/json?productId=" + inData.sku + "&amp;source=100"; }, });

单个 SKU,位于 URL 路径中

s7interactiveimageviewer.setHandlers({ "quickViewActivate": function(inData) { var quickViewUrl = "https://server/product/" + inData.sku; }, });

SKU 和类别 ID,位于查询字符串中

s7interactiveimageviewer.setHandlers({ "quickViewActivate": function(inData) { var quickViewUrl = "https://server/quickView/product/?category=" + inData.categoryId + "&amp;prodId=" + inData.sku; }, });

触发Quickview URL并激活Quickview面板的最后一步操作极有可能需要IT部门的前端IT人员的协助。 他们最了解如何通过拥有现成的Quickview URL,从正确的步骤准确触发Quickview实施。

您可以了解如何将这些步骤应用到演示网站,以将交互式购物图像与概览代码完全集成。 以前,Quickview URL的结构如下所示:

/datafeed/$categoryId$-$SKU$.json

要在quickViewActivate处理函数中重建此URL,可以使用inData对象中可用的categoryIdSKU字段,该对象由查看器的代码传递给该处理函数:

var sku=inData.sku;
var categoryId=inData.categoryId;
var quickViewUrl = "datafeed/" + categoryId + "-" + sku + ".json";

演示网站使用简单的loadQuickView()函数调用触发Quickview对话框。 此函数只采用一个参数,即Quickview数据URL。 因此,集成交互式购物图像所需的最后一步是将以下代码行添加到quickViewActivate处理函数中:

loadQuickView(quickViewUrl);

下面是完整的源代码:

 var s7interactiveimageviewer = new s7viewers.InteractiveImage({
  "containerId" : "s7interactiveimage_div",
  "params" : { 
   "serverurl" : "https://aodmarketingna.assetsadobe.com/is/image",
   "contenturl" : "https://aodmarketingna.assetsadobe.com/", 
   "config" : "/etc/dam/presets/viewer/Shoppable_Media",
   "asset" : "/content/dam/mac/aodmarketingna/shoppable-banner/shoppable-banner.jpg" }
 })
   s7interactiveimageviewer.setHandlers({ 
   "quickViewActivate": function(inData) {
     var sku=inData.sku;
     var categoryId=inData.categoryId;
    var quickViewUrl = "datafeed/" + categoryId + "-" + sku + ".json";
    loadQuickView(quickViewUrl);
    }, 
   });
 s7interactiveimageviewer.init();

具有完全集成的交互式图像的最终演示网站如下所示:

https://marketing.adobe.com/resources/help/en_US/dm/shoppable-banner/we-fashion/landing-3.html

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

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

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