交互式图像

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

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

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

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

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

观看10分钟33秒的演练 交互式图像横幅的创建方式. 您还将了解如何预览、编辑和传送交互式图像横幅。

快速入门：交互式图像

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

查找 示例 标题。 本指南包含一个简短教程，该教程基于以下尚未添加交互式图像的网页示例：

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

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

交互式图像工作流:

1. （可选）识别热点变量 — 如果您使用AEM Assets和Dynamic Media独立版，请首先识别现有概览实施中使用的动态变量，以便您在创建交互式图像时输入热点数据。 请参阅 （可选）识别热点变量.

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

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

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

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

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

   请参阅 上传图像横幅.

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

   • 请参阅 将热点添加到图像横幅.
   • 请参阅 预览交互式图像 — 可选。 如果需要，您可以查看购物横幅的呈现形式并测试其交互性。
   • 请参阅 发布资产 有关如何发布交互式图像资产的详细信息。

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

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

（可选）识别热点变量

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

在AEM Assets中将热点添加到横幅图像时，您需要分配一个SKU(库存单位；您提供的每个不同产品或服务的唯一标识符)以及每个热点的可选附加变量。 此类热点变量稍后会用于将热点与概览内容进行匹配。

必须正确识别要与热点数据关联的变量数量和类型。 添加到横幅图像的每个热点都必须包含足够的信息，以便在现有的后端系统中明确地识别产品。

有不同的方法来识别用于热点数据的一组变量。

有时，与负责现有概览实施的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、颜色代码、大小代码等。 在这种情况下，在AEM Assets的交互式购物图像功能中，每个元素都是热点数据定义中的一个单独变量。

请考虑以下概览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/Men-Windbreaker.json
• /datafeed/Men-SimpleHenley.json
• /datafeed/Men-CamoPullover.json
• /datafeed/Women-QuiltedDownJacket.json

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

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

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

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

根据此类分析，您将使用 categoryId 和 SKU ，以访问热点。

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

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

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

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

保存查看器预设后，查看器预设会在 查看器预设 列表页面。AEM Assets 此功能意味着无论您何时查看资产，都可以在交互式媒体组件中看到该内容。 但是， 交付 使用此查看器预设的交互式横幅时，您必须 发布 查看器预设（自定义或现成查看器预设也是如此）。

创建交互式图像查看器预设:

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

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

3. 在 新查看器预设 框中，键入用于描述交互式横幅查看器预设的名称。

   这是将在 查看器预设 列表页面。

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

5. 点按 创建.

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

7. 执行下列操作之一：

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

8. 在页面的右上角附近，点按 保存.

   确保发布新查看器预设。

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

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

上传图像横幅

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

上传图像横幅:

1. 上传要进行交互的图像横幅。

   请参阅 上传资产.

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

将热点添加到图像横幅

您可以使用 热点管理 页面。

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

请参阅 体验片段.

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

创建完交互式图像后，您可以使用 预览 以了解交互式图像在客户面前的显示方式。

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

向图像横幅添加热点:

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

2. 执行下列操作之一：

   • 将鼠标悬停在图像上，然后点按 选择 （复选标记图标）。 在工具栏中，点按 编辑.
   • 将鼠标悬停在图像上，然后点按 更多操作 （三个点图标）> 编辑.
   • 点按图像以在 详细信息视图 页面。 在工具栏中，点按 编辑.

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

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

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

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

7. 执行下列操作之一：

   • 点按 概览.

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

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

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

   • 点按 超链接.

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

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

     请参阅 使用选择器 以了解更多信息。

   • 点按 体验片段.

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

       请参阅 体验片段.

       注意

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

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

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

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

   请参阅 发布资产.

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

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

   注意

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

（可选）预览交互式图像

您可以使用“预览”来查看交互式图像对客户的呈现效果，并测试图像的热点以确保它们的行为符合预期。

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

预览交互式图像:

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

发布交互式图像资产

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

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

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

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

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

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 标记并将其替换为从AEM Assets复制的嵌入代码。 您可以在以下URL中看到结果，该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步部分内容的同时，当用户单击购物图像中的热点时，查看器会处理此类用户交互。 查看器会向网页返回一个事件，其中包含之前添加到AEM Assets的所有热点数据。

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

• 监听交互式购物图像发出的事件。
• 根据热点数据构建概览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();

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

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

请参阅 识别热点变量.

使用我们之前的概览URL示例，您可以在以下示例中查看每种情况下概览URL的构建方式：

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

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

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

在 quickViewActivate 处理程序中，您可以使用 categoryId 和 SKU 字段 inData 由查看器代码传递到处理程序的对象：

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

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

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