交互式图像

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

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

请参阅 交互式图像的实际操作情况 上图的网页。

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

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

快速入门：交互式图像

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

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

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

交互式图像步骤：

1. （可选）识别热点变量. 如果您使用Adobe Experience Manager Assets和Dynamic Media独立版，请识别现有概览实施中使用的动态变量。 这样做可确保您在创建交互式图像时输入热点数据。 请参阅 （可选）识别热点变量.
   但是，如果您使用Experience Manager Sites或Experience Manager电子商务，或者同时使用这两者，则无需执行此步骤。

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

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

4. 将热点添加到图像横幅. 向图像横幅添加一个或多个热点。 将每个链接与操作关联，如超链接、概览或体验片段。 添加热点后，您将通过发布交互式图像来完成此任务。
   请参阅 将热点添加到图像横幅.
   请参阅 预览交互式图像 — 可选。 如果需要，您可以查看购物横幅的呈现形式并测试其交互性。
   请参阅 发布资产 有关如何发布交互式图像资产的详细信息。

5. 以Experience Manager方式将交互式图像添加到您的网站或您的网站. 如果您使用“站点”、“电子商务”或两者，则可以在Experience Manager中直接将交互式图像添加到网页。 将交互式媒体组件拖动到页面上。 请参阅 将Dynamic Media Assets添加到页面.
   如果您使用Experience ManagerAssets和Dynamic Media独立版本，请复制您网站上的嵌入代码。 然后，将其与现有概览相集成。 请参阅 将交互式图像与您的网站集成.
   如果您使用第三方WCM（Web内容管理器），请将新的交互式视频与您网站上使用的现有概览相集成。 请参阅 将交互式图像与现有概览集成.

（可选）识别热点变量

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

在Experience Manager Assets中将热点添加到横幅图像时，请分配一个SKU（库存单位）。 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、颜色代码和大小代码。 在这种情况下，在Experience Manager Assets的交互式购物图像功能中，每个元素都是热点数据定义中的一个单独变量。

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

示例

您可以将上述三个示例中使用的相同方法应用到 演示网页.

演示网页包含多个产品缩略图，每个缩略图都有一个标有“查看更多”的“概览”按钮。 如果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 Assets中的交互式购物图像功能上传图像横幅并向其添加热点。

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

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

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

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

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

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

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

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

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

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

5. 选择​创建。

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

7. 执行下列操作之一：

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

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

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

   请参阅 发布查看器预设.

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

上传图像横幅

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

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

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

   请参阅上传资产。

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

将热点添加到图像横幅

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

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

请参阅 体验片段.

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

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

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

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

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

2. 执行下列操作之一：

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

   • 将鼠标悬停在图像上，然后点按 更多操作 （三个圆点图标） >编辑.

   • 要在“详细信息视图”页面中将其打开，请点按图像。 在工具栏中，点按 编辑.

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

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

   1. 在“热点管理”页面的左上角附近，点按 热点.
   2. 在图像上，点按您希望显示热点的位置。如有必要，可拖动热点以调整其位置。或者，使用键盘箭头键控制所选热点的位置。
   3. 重复步骤a和b，根据需要添加更多热点。
   4. （可选）要删除热点，请在图像上选择它，然后点按 删除 （垃圾桶图标） 热点 标题。

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

6. 执行下列操作之一：

   • 选择 概览.

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

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

       • 请参阅 识别热点变量;您必须定义这些变量。
       • 然后，手动输入SKU值。 在“SKU值”文本字段中，键入产品的SKU。 输入的SKU值会自动填充概览模板的变量部分。 它可确保系统知道将点按的热点与特定SKU的概览相关联。
       • （可选）如果概览中有其他变量用于进一步识别产品，请点按 添加常规变量. 在文本字段中，指定一个额外的变量。 例如，category=Mens 就是一个添加的变量。

   • 选择 超链接.

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

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

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

   • 选择 体验片段.

     • 如果您是Experience Manager Sites客户，请选择“搜索”图标（放大镜）以打开“体验片段”页面。 选择要使用的体验片段。 然后点按 选择 的双曲余切值。 您将返回到热点管理页面。
       请参阅 体验片段.

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

       注意

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

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

8. 发布交互式图像。 发布功能可通过云交付横幅，还会生成嵌入代码，以便您与第三方网站集成。

   请参阅 发布资产.

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

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

   注意

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

（可选）预览交互式图像

您可以使用“预览”来查看交互式图像在客户中的显示方式。 通过“预览”功能，您还可以测试图像的热点，以确保这些热点按预期运行。

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

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

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

发布交互式图像资产

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

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

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

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

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

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

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

示例

使用 示例演示网站，请注意，这三个人的图片是静态的 IMG 标记：

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

集成过程与删除 IMG 标记并将其替换为从Experience Manager Assets复制的嵌入代码。 您可以看到结果 在页面上显示交互式购物图像，其中包含三个圆形热点.

要为响应式环境对交互式购物图像应用“裁剪”，请包括交互式图像配置属性 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 Assets的所有热点数据。

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

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

Experience Manager 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人员在您的工作中提供协助。 他们深知如何通过正确的步骤准确触发概览实施，从而拥有现成的概览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();

的 完全集成的交互式图像最终演示网站.

使用 Quickview 创建自定义弹出窗口

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

Business.Adobe.com 资源