通过将“购物”热点拖放到图像上,您可以轻松地为客户打造出丰富且引人入胜的静态图像体验。购物热点将有关产品或服务的其他信息与直接的销售点“添加到购物车”或“购买”功能相结合。 客户可以选择这些热点,并直接链接到产品或服务、将其添加到购物车或链接到网页。 诸如此类的直接体验可以提高您网站上的客户参与度和转化率。
下面是一个带有概览弹出窗口的购物横幅。 用户通过在模型上选择圆圈或“热点”来激活概览。
通过转到以下内容,查看上述网页上的交互式图像的实际操作情况:
播放有关如何创建交互式图像横幅的演练🔗(10分33秒)。 您还可以了解如何预览、编辑和传送交互式图像横幅。
以下工作流分步描述旨在帮助您快速启动并运行Adobe Experience Manager Assets中的交互式图像。
请查找某些“快速入门”任务中的示例标题。本指南包含一个简短教程,该教程基于以下尚未添加交互式图像的网页示例:
本教程有助于说明在您的网站上集成交互式图像的步骤。
交互式图像步骤:
(可选)识别热点变量 — 如果您使用Experience Manager资产和Dynamic Media独立版,请首先识别现有概览实施中使用的动态变量。然后,您可以在创建交互式图像时输入热点数据。 请参阅(可选)识别热点变量。
但是,如果您使用Adobe Experience Manager Sites、Adobe Experience Manager eCommerce或两者,则无需执行此步骤。
请参阅Experience Manager资产🔗中的电子商务概念。
(可选)创建交互式图像查看器预设 — 自定义用于表示热点的图形图像。如果您打算改用名为Shoppable_Banner
的现成交互式图像查看器预设,则无需创建您自己的交互式图像查看器预设。
请参阅(可选)创建交互式图像查看器预设。
上传图像横幅 — 上传要进行交互的图像横幅。请参阅上传图像横幅。
将热点添加到图像横幅 — 向图像横幅添加一个或多个热点,并将每个热点与操作(如超链接、概览或体验片段)相关联。添加热点后,您将通过发布交互式图像来完成此任务。
请参阅将热点添加到图像横幅。
请参阅预览交互式图像 — 可选。 如果需要,您可以查看购物横幅的呈现形式并测试其交互性。
有关如何发布交互式图像资产的详细信息,请参阅发布资产。
将交互式图像添加到您的网站 — 如果您使用Experience Manager站点或电子商务,或者同时使用这两者,则可以将交互式图像添加到Experience Manager中的网页。将交互式媒体组件拖动到页面上。 请参阅将Dynamic Media Assets添加到页面。
如果您使用Experience Manager资产和Dynamic Media独立版,则必须复制您网站上的嵌入代码,然后将其与现有概览相集成。 请参阅将交互式图像与您的网站集成。
如果您使用的是第三方WCM(Web内容管理器),则必须将新的交互式视频与您网站上使用的现有概览实施相集成。 请参阅将交互式图像与现有Quickview集成。
仅当满足以下条件时,才需要执行此任务:
如果您的Experience Manager实施使用电子商务,则可以跳过此任务并继续执行下一项任务。
首先,识别现有概览实施所使用的动态变量,以便您输入热点数据以创建交互式图像。
在Experience Manager资产中向横幅图像添加热点时,必须为每个热点分配一个SKU(库存单位和可选的其他变量)。 此类热点变量稍后会用于将热点与概览内容进行匹配。
必须准确地识别要与热点数据相关联的变量数量及类型,这一点很重要。而且,添加到横幅图像的每个热点都必须附带足够的信息,以便能够在现有的后端系统中明确地识别产品。
有多种不同的方法可以识别用于热点数据的变量集。
有时,只需咨询负责现有概览实施的IT专家即可。 IT专家可能会知道在系统中识别概览所需的最少数据集。 但是,也可以简单地分析前端代码的现有行为。
大多数概览实施都使用以下范例:
然后,方法是访问现有网站中实施了概览功能的不同区域。 然后,您触发概览并捕获由网页发送的用于加载概览数据或内容的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及其生成的热点变量示例:
单个 SKU,位于查询字符串中。 |
记录的概览URL包括:
URL 中唯一的变量部分是 productId= 查询字符串参数的值,很明显它就是 SKU 值。因此,您的热点只需在SKU字段中填充 |
单个 SKU,位于 URL 路径中。 |
记录的概览URL包括:
变量部分位于路径的最后一部分,它将成为热点的SKU值: |
SKU 和类别 ID,位于查询字符串中。 |
记录的概览URL包括:
在这种情况下,URL 中有两个可变部分。SKU存储在 因此,热点定义是成对存在的,即,SKU值和一个名为
|
示例
您可以将上述三个示例中所用的方法运用到演示网页:
演示网页包含多个产品缩略图,每个缩略图都有一个标有“查看更多”的“概览”按钮。 如果Web浏览器的调试工具仍处于激活状态,请选择每个按钮并记下记录的概览URL。 激活页面上所有四个可用的产品概览后,您会向后端发出以下概览请求列表:
/datafeed/Male-Windbreaker.json
/datafeed/Male-SimpleHenley.json
/datafeed/Male-CamoPullover.json
/datafeed/Female-QuiltedDownJacket.json
查看服务器调用时,您会看到特定于产品的信息仅存在于请求路径中。 您还注意到查询字符串根本不被使用,并且涉及两种不同类型的数据段:
根据此信息,整个概览URL具有以下模式:
/datafeed/$categoryId$-$SKU$.json
依据上述分析,您可以在热点中使用 categoryId
和 SKU
。
现在,您可以使用Experience Manager资产中的交互式购物图像功能,上传图像横幅并向其添加热点。
您可以选择使用默认的名为Shoppable_Banner
且随Experience Manager资产一起提供的现成交互式图像查看器预设。 或者,您也可以创建自己的自定义查看器预设,以用于交互式图像。
创建自定义交互式图像查看器预设时,您可以确定图像横幅上热点的外观。 在创建查看器预设的过程中,您可以选择使用预定义图像库中提供的热点图形。
在保存查看器预设后,查看器预设会在“Experience Manager资产”的“查看器预设”列表页面上自动激活(打开)。 此功能意味着无论您何时查看资产,都可以在交互式媒体组件中看到该内容。 但是,要使用此查看器预设交付**交互式横幅,您还必须发布您的查看器预设。 对于自定义或现成查看器预设,此规则为true。
要创建交互式图像查看器预设,请执行以下操作:
在左边栏中,导航到工具 > 资产 > 查看器预设。
在页面的右上角附近,选择创建。
在“新查看器预设”对话框中,键入一个用于描述该交互式横幅查看器预设的名称。
保存后,标题会显示在“查看器预设”列表页面中。
在“富媒体类型”下拉菜单中,选择交互式图像。
选择创建。
在“编辑查看器预设”页面上,选择外观选项卡。
执行下列操作之一:
在页面的右上角附近,选择Save。
请确保您发布了新查看器预设。
请参阅发布已添加的查看器预设。
现在,您便可以上传图像横幅。
如果您已上传要使用的图像,请前进到下一步将热点添加到图像横幅。
要上传图像横幅,请执行以下操作:
上传您要实现交互的图像横幅。
请参阅上传资产。
现在,您可以向图像横幅中添加热点;请参阅下面的下一项任务。
您可以使用热点管理页面上的编辑器将热点添加到图像横幅。
添加热点时,您可以将热点定义为“概览”弹出显示、超链接或体验片段。
请参阅体验片段。
在体验片段中嵌入查看器时,不支持交互式图像中的社交媒体共享工具。 要解决此问题,您可以使用或创建没有社交媒体共享工具的查看器预设。 通过此类查看器预设,您可以成功将其嵌入到体验片段中。
在当前创建/编辑会话期间,支持页面右上角附近的撤消和重做选项。
创建完交互式图像后,您可以使用“预览”来查看交互式图像在客户中的显示方式。
请参阅(可选)预览交互式图像。
在交互式图像或轮播横幅中向图像添加热点时,热点信息会存储在同一元数据位置。 该位置是相对于图像位置的,无论它是交互式图像还是轮播横幅。 此功能意味着您可以在任意查看器中轻松重复使用同一图像及其定义的热点数据。
传送横幅支持图像上的图像映射,图像上也可以包含热点;交互式图像不会。 如果您打算创建使用相同图像的交互式图像或轮播横幅,请记住此规则。 您可以使用同一图像的不同副本来创建交互式图像和传送横幅。
另请参阅传送横幅。
如果您正在使用热点编辑交互式图像并裁剪图像,则热点会被删除。
要将热点添加到图像横幅,请执行以下操作:
在“资产”视图中,导航到要进行交互的图像横幅。
执行下列操作之一:
将鼠标悬停在图像上,然后选择选择(复选标记图标)。 在工具栏中,选择编辑。
将鼠标悬停在图像上,然后选择更多操作(三个圆点图标)编辑。
选择图像,以便在“详细信息视图”页面中将其打开。 在工具栏中,选择编辑。
在页面的左上角附近,选择添加热点(手指点按图标)以打开热点管理页面。
在页面的左上角附近,选择热点。
在“名称”文本字段中,键入热点的名称。此名称也会显示在“选定的热点”下拉列表中。
执行下列操作之一:
选择Quickview。
如果您是Experience Manager站点或电子商务客户,请选择产品选取器图标(放大镜)以打开选择产品页面。 选择要使用的产品,然后选择页面右上角的选择,以便您可以返回到热点管理页面。
如果您是not Experience Manager站点或电子商务客户
category=Males
就是一个添加的变量。选择超链接。
请确保指定是在新的浏览器选项卡(推荐为默认选项卡)还是在同一选项卡中打开链接。
有关更多信息,请参阅使用选择器。
选择体验片段。
如果您是Experience Manager站点客户,请选择搜索图标(放大镜)以打开体验片段页面。 选择要使用的体验片段,然后选择页面右上角的选择 ,以便您可以返回到热点管理页面。
请参阅体验片段。
指定您希望在横幅上显示的体验片段的宽度和高度。
在体验片段中嵌入查看器时,不支持交互式图像中的社交媒体共享工具。 要解决此问题,您可以使用或创建没有社交媒体共享工具的查看器预设。 通过此类查看器预设,您可以成功将其嵌入到体验片段中。
选择Save以保存您的工作并返回到“浏览”页面。
发布交互式图像。 发布后,横幅可通过云进行交付,如果您需要与第三方网站集成,则还会生成嵌入代码。
请参阅发布资产。
添加热点并发布交互式图像后,您现在可以将其添加到现有网站。
请参阅将交互式图像与您的网站集成。
如果您正在使用热点编辑交互式图像并裁剪图像,则热点会被删除。
您可以使用“预览”来查看交互式图像在客户中的显示方式,并测试图像的热点以确保它们按预期行为。
如果您对交互式图像满意,可以发布该图像。
请参阅在网页上嵌入视频查看器或图像查看器。
请参阅将URL关联到您的Web应用程序。 如果您的交互式内容具有包含相对URL的链接,特别是指向Experience Manager站点页面的链接,则无法使用基于URL的链接方法。
请参阅将Dynamic Media Assets添加到页面。
要预览交互式图像,请执行以下操作:
有关如何发布交互式图像资产的详细信息,请参阅发布资产。
现在,在上传横幅图像、将热点添加到图像并发布交互式图像后,您便可以将其添加到您的网站页面。
如果您是Experience Manager站点客户,则可以通过将交互式媒体组件拖动到您的页面上来添加交互式图像。 请参阅将Dynamic Media Assets添加到页面。
如果您是独立的Experience Manager资产客户,则可以按照此部分中的所述,手动将交互式图像添加到您的网站。
复制已发布的交互式图像的嵌入代码。
请参阅在网页上嵌入视频查看器或图像查看器。
将复制的嵌入代码添加到网页中的所需位置。
复制的嵌入代码是为响应式环境设置的,以便自动适合分配的区域。
示例
以演示网站为例:
请注意,这三个雄性的图片是一个静态IMG
标记:
<img class="img-responsive" width="100%" title="Hero Image 2" alt="Hero Image 2" src="images/shoppable-banner.jpg">
集成过程很简单,只需删除IMG
标记并将其替换为从Experience Manager资产中复制的嵌入代码即可。 您可以通过下面的 URL 查看最终效果,即页面上会显示带有三个圆形热点的交互式购物图像:
因此,演示网站交互式购物图像上的热点仅用于显示目的;它们尚未与现有概览集成。
要为响应式环境对交互式购物图像应用“裁剪”,您可以将交互式图像配置属性ZoomView.iscommand
包含到路径中。 组件ZoomView
被调用,iscommand
是您应用的“裁剪”图像服务命令。
请参阅 ZoomView.iscommand 配置属性。
请参阅裁剪图像服务命令。
现在,您可以将交互式图像与网站上的现有概览相集成。
此任务仅在您是独立Experience Manager资产客户时才适用。
此过程的最后一步是,将交互式图像与您网站上的现有概览实施相集成。 但是,没有任何一种集成解决方案是在所有情况下都适用的。每个概览实施都是独一无二的,需要一种特定的方法。 这可能需要前端IT人员的协助。
现有的概览实施通常表示在网页上发生的一系列相互关联的操作,这些操作按以下顺序发生:
这些调用不表示独立的公共API调用,网页逻辑可从任意步骤中调用这些调用。 相反,这些调用属于链式调用,即,每个后续步骤都隐藏在前一步的最后阶段(回调)。
在交互式购物图像替换第1步和第2步部分内容的同时,当用户选择购物图像内的热点时,查看器会处理此类用户交互。 查看器会向网页返回一个事件,其中包含之前添加到Experience Manager资产的所有热点数据。
在此类事件处理程序中,前端代码会执行下列操作:
由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:
单个 SKU,位于查询字符串中 |
s7interactiveimageviewer.setHandlers({
"quickViewActivate": function(inData) {
var quickViewUrl = "https://server/json?productId=" + inData.sku + "&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 + "&prodId=" + inData.sku;
},
}); |
触发概览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();
具有完全集成的交互式图像的最终演示网站如下所示:
请参阅使用概览创建自定义弹出窗口。