交互式图像

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

下面是一个带有概览弹出窗口的购物横幅。 用户通过在模型上选择圆圈或“热点”来激活概览。

通过转到以下内容，查看上述网页上的交互式图像的实际操作情况：

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-banner/we-fashion-QVzoom/index2-shoppable.html?lang=zh-Hans?lang=zh-Hans

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

播放有关如何创建交互式图像横幅的演练🔗（10分33秒）。 您还可以了解如何预览、编辑和传送交互式图像横幅。

快速入门：交互式图像

以下工作流分步描述旨在帮助您快速启动并运行Adobe Experience Manager Assets中的交互式图像。

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

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-banner/we-fashion/landing-0.html?lang=zh-Hans?lang=zh-Hans

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

交互式图像步骤：

1. （可选）识别热点变量 — 如果您使用Experience Manager资产和Dynamic Media独立版，请首先识别现有概览实施中使用的动态变量。然后，您可以在创建交互式图像时输入热点数据。 请参阅（可选）识别热点变量。
   但是，如果您使用Adobe Experience Manager Sites、Adobe Experience Manager eCommerce或两者，则无需执行此步骤。
   请参阅Experience Manager资产🔗中的电子商务概念。

2. （可选）创建交互式图像查看器预设 — 自定义用于表示热点的图形图像。如果您打算改用名为Shoppable_Banner的现成交互式图像查看器预设，则无需创建您自己的交互式图像查看器预设。
   请参阅（可选）创建交互式图像查看器预设。

3. 上传图像横幅 — 上传要进行交互的图像横幅。请参阅上传图像横幅。

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

   • 请参阅将热点添加到图像横幅。

   • 请参阅预览交互式图像 — 可选。 如果需要，您可以查看购物横幅的呈现形式并测试其交互性。

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

5. 将交互式图像添加到您的网站 — 如果您使用Experience Manager站点或电子商务，或者同时使用这两者，则可以将交互式图像添加到Experience Manager中的网页。将交互式媒体组件拖动到页面上。 请参阅将Dynamic Media Assets添加到页面。

   如果您使用Experience Manager资产和Dynamic Media独立版，则必须复制您网站上的嵌入代码，然后将其与现有概览相集成。 请参阅将交互式图像与您的网站集成。

   如果您使用的是第三方WCM（Web内容管理器），则必须将新的交互式视频与您网站上使用的现有概览实施相集成。 请参阅将交互式图像与现有Quickview集成。

（可选）识别热点变量

首先，识别现有概览实施所使用的动态变量，以便您输入热点数据以创建交互式图像。

在Experience Manager资产中向横幅图像添加热点时，必须为每个热点分配一个SKU（库存单位和可选的其他变量）。 此类热点变量稍后会用于将热点与概览内容进行匹配。

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

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

有时，只需咨询负责现有概览实施的IT专家即可。 IT专家可能会知道在系统中识别概览所需的最少数据集。 但是，也可以简单地分析前端代码的现有行为。

大多数概览实施都使用以下范例：

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

然后，方法是访问现有网站中实施了概览功能的不同区域。 然后，您触发概览并捕获由网页发送的用于加载概览数据或内容的Ajax URL。

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

• 要在Google Chrome中查看所有传出HTTP请求，请按F12打开“开发人员工具”面板，然后选择“网络”选项卡。
  在Mac上，按Command+Option+I打开“开发人员工具”面板，然后选择“网络”选项卡。

• 在 Firefox 中，您既可以按 F12 键并使用其“网络”选项卡来激活 Firebug 插件，也可以使用内置的检查器工具及其“网络”选项卡。在Mac上，按Command+Option+I打开“开发人员工具”面板，然后选择“检查器”选项卡。

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

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

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

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

但是，在复杂的情况下，除SKU之外，快速视图URL还具有不同的可变元素，例如类别ID、颜色代码和大小代码。 在这种情况下，在Experience Manager资产的交互式购物图像功能中，每个元素都是热点数据定义中的一个单独变量。

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

示例

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

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-banner/we-fashion/landing-0.html?lang=zh-Hans?lang=zh-Hans

演示网页包含多个产品缩略图，每个缩略图都有一个标有“查看更多”的“概览”按钮。 如果Web浏览器的调试工具仍处于激活状态，请选择每个按钮并记下记录的概览URL。 激活页面上所有四个可用的产品概览后，您会向后端发出以下概览请求列表：

• /datafeed/Male-Windbreaker.json
• /datafeed/Male-SimpleHenley.json
• /datafeed/Male-CamoPullover.json
• /datafeed/Female-QuiltedDownJacket.json

查看服务器调用时，您会看到特定于产品的信息仅存在于请求路径中。 您还注意到查询字符串根本不被使用，并且涉及两种不同类型的数据段：

• 第一种类型是“男”或“女”。 您可以将此类别称为“产品”。
• 第二种类型是产品名称，如CamoPullover。 您可以假定此信息是产品SKU。

根据此信息，整个概览URL具有以下模式：

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

依据上述分析，您可以在热点中使用 categoryId 和 SKU。

现在，您可以使用Experience Manager资产中的交互式购物图像功能，上传图像横幅并向其添加热点。

（可选）创建交互式图像查看器预设

您可以选择使用默认的名为Shoppable_Banner且随Experience Manager资产一起提供的现成交互式图像查看器预设。 或者，您也可以创建自己的自定义查看器预设，以用于交互式图像。

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

在保存查看器预设后，查看器预设会在“Experience Manager资产”的“查看器预设”列表页面上自动激活（打开）。 此功能意味着无论您何时查看资产，都可以在交互式媒体组件中看到该内容。 但是，要使用此查看器预设交付​**​交互式横幅，您还必须​发布​您的查看器预设。 对于自定义或现成查看器预设，此规则为true。

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

1. 在左边栏中，导航到​工具 > 资产 > 查看器预设。

2. 在页面的右上角附近，选择​创建。

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

   保存后，标题会显示在“查看器预设”列表页面中。

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

5. 选择​创建。

6. 在“编辑查看器预设”页面上，选择​外观​选项卡。

7. 执行下列操作之一：

   • 要上传您自己的热点图像以在图像上使用，请选择资产选取器图标。 在“选择内容”页面中，导航到您要使用的热点图像，将其选中，然后选择右上角的复选标记图标。
   • 要选择预定义的热点图像，请选择热点图库图标。 在热点图库面板上，选择您要使用的热点图像。

8. 在页面的右上角附近，选择​Save。

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

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

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

上传图像横幅

如果您已上传要使用的图像，请前进到下一步将热点添加到图像横幅。

要上传图像横幅，请执行以下操作：

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

   请参阅上传资产。

   现在，您可以向图像横幅中添加热点；请参阅下面的下一项任务。

将热点添加到图像横幅

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

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

请参阅体验片段。

在当前创建/编辑会话期间，支持页面右上角附近的撤消和重做选项。

创建完交互式图像后，您可以使用“预览”来查看交互式图像在客户中的显示方式。

请参阅（可选）预览交互式图像。

要将热点添加到图像横幅，请执行以下操作：

1. 在“资产”视图中，导航到要进行交互的图像横幅。

2. 执行下列操作之一：

   • 将鼠标悬停在图像上，然后选择​选择（复选标记图标）。 在工具栏中，选择​编辑。

   • 将鼠标悬停在图像上，然后选择​更多操作（三个圆点图标）编辑。

   • 选择图像，以便在“详细信息视图”页面中将其打开。 在工具栏中，选择​编辑。

3. 在页面的左上角附近，选择​添加热点（手指点按图标）以打开热点管理页面。

4. 在页面的左上角附近，选择​热点。

   1. 在“热点管理”页面的左上角附近，选择​热点。
   2. 在图像上，选择您希望显示热点的位置。 如有必要，可拖动热点以调整其位置。
   3. 重复步骤a和b，根据需要添加其他热点。
   4. （可选）要删除热点，请在图像上选择该热点，然后选择​热点​标题下的​删除（垃圾桶图标）。

5. 在“名称”文本字段中，键入热点的名称。此名称也会显示在“选定的热点”下拉列表中。

6. 执行下列操作之一：

   • 选择​Quickview。

     • 如果您是Experience Manager站点或电子商务客户，请选择产品选取器图标（放大镜）以打开选择产品页面。 选择要使用的产品，然后选择页面右上角的​选择，以便您可以返回到热点管理页面。

     • 如果您是​not Experience Manager站点或电子商务客户

       • 请参阅识别热点变量;您必须定义这些变量。
       • 然后，手动输入SKU值。 在“SKU值”文本字段中，键入产品的SKU（库存单位），即您提供的每个不同产品或服务的唯一标识符。 输入的SKU值会自动填充概览模板的变量部分，以便系统能够将选定的热点与特定SKU的概览相关联。
       • （可选）如果快速视图中有其他变量必须用于进一步标识产品，请选择​添加常规变量。 在文本字段中，指定一个额外的变量。 例如，category=Males 就是一个添加的变量。

   • 选择​超链接。

     • 如果您是Experience Manager站点客户，请选择站点选择器图标（文件夹）以导航到URL。 如果您的交互式内容具有包含相对URL的链接，特别是指向Experience Manager站点页面的链接，则无法使用基于URL的链接方法。
     • 如果您是独立客户，请在“HREF”文本字段中，指定链接网页的完整URL路径。

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

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

   • 选择​体验片段。

     • 如果您是Experience Manager站点客户，请选择搜索图标（放大镜）以打开体验片段页面。 选择要使用的体验片段，然后选择页面右上角的​选择 ，以便您可以返回到热点管理页面。
       请参阅体验片段。

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

       注意

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

7. 选择​Save​以保存您的工作并返回到“浏览”页面。

8. 发布交互式图像。 发布后，横幅可通过云进行交付，如果您需要与第三方网站集成，则还会生成嵌入代码。

   请参阅发布资产。

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

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

   注意

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

（可选）预览交互式图像

您可以使用“预览”来查看交互式图像在客户中的显示方式，并测试图像的热点以确保它们按预期行为。

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

要预览交互式图像，请执行以下操作：

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

发布交互式图像资产

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

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

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

如果您是Experience Manager站点客户，则可以通过将交互式媒体组件拖动到您的页面上来添加交互式图像。 请参阅将Dynamic Media Assets添加到页面。

如果您是独立的Experience Manager资产客户，则可以按照此部分中的所述，手动将交互式图像添加到您的网站。

1. 复制已发布的交互式图像的嵌入代码。
   请参阅在网页上嵌入视频查看器或图像查看器。

2. 将复制的嵌入代码添加到网页中的所需位置。
   复制的嵌入代码是为响应式环境设置的，以便自动适合分配的区域。

示例

以演示网站为例：

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-banner/we-fashion/landing-0.html?lang=zh-Hans?lang=zh-Hans

请注意，这三个雄性的图片是一个静态IMG标记：

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

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

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-banner/we-fashion/landing-1.html?lang=zh-Hans?lang=zh-Hans

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

请参阅 ZoomView.iscommand 配置属性。

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

现在，您可以将交互式图像与网站上的现有概览相集成。

将交互式图像与现有概览相集成

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

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

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

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

在交互式购物图像替换第1步和第2步部分内容的同时，当用户选择购物图像内的热点时，查看器会处理此类用户交互。 查看器会向网页返回一个事件，其中包含之前添加到Experience Manager资产的所有热点数据。

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

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

由Experience Manager资产返回的嵌入代码已经具有一个可供使用的事件处理程序，该处理程序已被注释掉，如以下高亮显示的代码片段所示：

        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();

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

构建概览URL的过程与识别前面介绍的热点变量的过程相反。

请参阅识别热点变量。

使用前面的概览URL示例，您可以在以下示例中看到如何在每种情况下构建概览URL:

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

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

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

要在quickViewActivate处理程序中重建此URL，可以使用inData对象中可用的categoryId和SKU字段，该对象通过查看器代码传递到处理程序：

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

演示网站使用简单的loadQuickView()函数调用触发“概览”对话框。 此函数仅采用一个参数，即概览数据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://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-banner/we-fashion/landing-3.html?lang=zh-Hans?lang=zh-Hans

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

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