將「可購買」的熱點拖放至影像上,即可輕鬆為客戶製作豐富、吸引人的靜態影像。 可購物熱點結合了有關產品或服務的其他資訊以及直接、銷售點「新增至購物車」或「購買」功能。 客戶可以點選這些熱點,並直接連結至產品或服務、將其新增至購物車,或連結至網頁。 此類直接體驗可提升客戶在您網站上的參與度和轉化率。
以下是具有快速檢視快顯視窗的可購物橫幅。 用戶通過在模型上點選圓或「熱點」來激活Quickview。
前往下列網頁,檢視互動式影像在上述網頁上的實際運作:
觀看如何建立互動式影像橫幅的10分鐘33秒逐步說明。 您也將學習如何預覽、編輯和傳遞互動式影像橫幅。
下列逐步工作流程說明旨在協助您在AEM Assets中快速啟動並執行互動式影像。
在某些快速入門任務中查找Example標題。 本教學課程包含以下網頁範例為基礎的簡短教學課程,目前尚未新增互動式影像:
https://marketing.adobe.com/resources/help/en_US/dm/shoppable-banner/we-fashion/landing-0.html
本教學課程可協助您說明將互動式影像整合在您自己的網站上的步驟。
互動式影像工作流程:
(可選)識別熱點變數 -如果您使用AEM Assets和Dynamic Media獨立作業,請先識別現有Quickview實作中使用的動態變數,以便在建立互動式影像時輸入熱點資料。請參閱(可選)識別熱點變數。
不過,如果您使用AEM Sites或AEM eCommerce,或兩者皆使用,則不需要此步驟。
請參閱「AEM Assets](/docs/experience-manager-64/sites-administering/concepts.html?lang=zh-Hant)中的[電子商務概念」。
(可選)建立互動式影像檢視器預設集 -自訂用於表示熱點的圖形影像。如果您想要改用名為Shoppable_Banner
的現成可用的互動式影像檢視器預設集,則不需要建立您自己的互動式影像檢視器預設集。
上傳影像橫幅 -上傳您要製作互動式的影像橫幅。
請參閱上傳影像橫幅。
將熱點添加到影像橫幅 -將一個或多個熱點添加到影像橫幅中,並將每個熱點與超連結、快速視圖或體驗片段等操作關聯。添加熱點後,將通過發佈互動式影像完成此任務。
在AEM中將互動式影像新增至您的網站或網站
只有在以下情況下,才需要此任務:
如果您的AEM實作使用電子商務,您可以略過此工作並繼續下一個工作。
首先,您可以識別現有Quickview實作所使用的動態變數,以便輸入熱點資料以建立互動式影像。
當您在AEM Assets中將熱點新增至橫幅影像時,您必須指派SKU(庫存保留單位;您提供的每個不同產品或服務的唯一識別碼),以及每個熱點的可選附加變數。 這些熱點變數稍後用於匹配熱點與Quickview內容。
請務必正確識別要與熱點資料關聯的變數數目和類型。 每個新增至橫幅影像的熱點都必須包含足夠的資訊,以明確識別現有後端系統中的產品。
有不同的方法可識別一組要用於熱點資料的變數。
有時,與負責現有Quickview實施的IT專家協商可能已足夠,因為他們可能知道在系統中標識Quickview所需的最低資料集。 不過,在大多數情況下,您也可以只分析前端程式碼的現有行為。
Quickview的大多數實施都採用以下模式:
接著,方法是造訪實施Quickview功能的現有網站的不同區域,觸發Quickview並擷取網頁所傳送的Ajax URL,以載入Quickview資料或內容。
通常您不需使用任何專用的除錯工具。 現代網頁瀏覽器採用Web檢視器,可讓您完成適當的工作。 以下是包含Web檢視程式的Web瀏覽器範例:
若要在Google Chrome中查看所有傳出的HTTP要求,請按F12以開啟開發人員工具面板,然後按一下網路標籤。
在Mac上,按Command+Option+I以開啟開發人員工具面板,然後按一下「網路」標籤。
在Firefox中,您可以按F12啟動Firebug外掛程式並使用其網路標籤,或使用內建的Inspector工具及其Network標籤。
在Mac上,按Command+Option+I以開啟「開發人員工具」面板,然後按一下「偵測器」標籤。
在瀏覽器中開啟網路監視時,觸發頁面上的Quickview。
現在,在網路記錄檔中尋找Quickview Ajax URL,並複製已記錄的URL以供日後分析。 在大多數情況下,當您觸發Quickview時,會有許多請求被發送到伺服器。 通常,Quickview Ajax URL是清單中第一個URL。 它有複雜的查詢字串部分或路徑,其回應MIME類型為text/html
、text/xml
或text/javascript
。
在此程式中,請務必造訪您網站的不同區域,以及不同的產品類別和類型。 原因是Quickview URL可能有特定網站類別的常用部分,但只有在您造訪網站的不同區域時才會變更。
在最簡單的情況下,Quickview URL中唯一的變數部分是產品SKU。 在這種情況下,SKU值是您在橫幅影像中新增熱點所需的唯一資料片段。
但是,在複雜情況下,Quickview URL除了SKU以外,還有不同的元素,例如類別ID、顏色代碼、大小代碼等。 在這種情況下,AEM Assets中可購買的互動式影像功能中,每個元素都是熱點資料定義中的個別變數。
請考慮以下Quickview URL及其產生的熱點變數範例:
單一SKU,可在查詢字串中找到。 |
記錄的Quickview URL包括:
URL中唯一的變數部分是productId=查詢字串參數的值,而它顯然是SKU值。 因此,我們的熱點只需要填入 |
單一SKU,位於URL路徑中。 |
記錄的Quickview URL包括:
變數部分位於路徑的最後一部分,並成為熱點的SKU值: |
查詢字串中的SKU和類別ID。 |
記錄的Quickview URL包括:
在此例中,URL中有兩個不同的部分。 SKU會儲存在
|
範例
您可以將上述三個範例中使用的相同方法套用至示範網頁:
https://marketing.adobe.com/resources/help/en_US/dm/shoppable-banner/we-fashion/landing-0.html
示範網頁包含數個產品縮圖,每個產品縮圖都有標有「查看更多」的「快速檢視」按鈕。在您的網頁瀏覽器除錯工具仍處於啟用狀態時,按一下每個按鈕並記下錄制的Quickview URL。 在您啟動頁面上所有4種可用的Quickview產品後,您會有下列Quickview要求清單給後端:
/datafeed/Men-Windbreaker.json
/datafeed/Men-SimpleHenley.json
/datafeed/Men-CamoPullover.json
/datafeed/Women-QuiltedDownJacket.json
檢視這些伺服器呼叫,您會發現產品特定資訊只存在於請求路徑中。 您也注意到查詢字串完全未使用,並且涉及兩種不同的資料片段類型:
根據此資訊,整個Quickview URL具有以下模式:
/datafeed/$categoryId$-$SKU$.json
基於此類分析,您應將categoryId
和SKU
用於熱點。
您現在可以使用AEM Assets中可購買的互動式影像功能,上傳影像橫幅並新增熱點。
您可以選擇使用AEM Assets隨附的預設、立即可用的互動式影像檢視器預設集,稱為Shopbable_Banner。 或者,您也可以建立您自己的自訂檢視器預設集,以便用於互動式影像。
當您建立自訂的互動式影像檢視器預設集時,可以決定影像橫幅上熱點的外觀。 在建立檢視器預設集時,您可以選擇使用預先定義影像收藏館中的熱點圖形。
儲存檢視器預設集後,它會自動在「AEM資產」的「檢視器預設集」清單頁面上啟動(開啟)。 此功能表示它可在互動式媒體元件中顯示,且在您檢視資產時也可顯示。 不過,若要使用此檢視器預設集傳送互動式橫幅,您也必須 publish 您的檢視器預設集(自訂或現成檢視器預設集也是如此)。
若要建立互動式影像檢視器預設集:
在左側導軌中,點選「工具>資產>檢視器預設集」。
在頁面的右上角附近,點選Create。
在新檢視器預設集對話方塊中,輸入名稱以說明互動式橫幅檢視器預設集。
此標題將在您儲存後出現在檢視器預設集清單頁面中。
在多媒體類型下拉式功能表中,選擇互動式影像。
點選Create。
在編輯檢視器預設集頁面上,點選外觀標籤。
執行下列任一項作業:
在頁面的右上角附近,點選Save。
請確定您已發佈新的檢視器預設集。
您現在已準備好上傳影像橫幅。
如果您已上傳您要使用的影像,請進入下一步「新增熱點至影像橫幅」。
若要上傳影像橫幅:
上傳您要製作互動式影像橫幅。
請參閱上傳資產。
您現在可以在影像橫幅中加入熱點;請參閱下面的下一項工作。
您可以使用熱點管理頁面上的編輯器將熱點添加到影像橫幅。
添加熱點時,可以將其定義為Quickview彈出式顯示、超連結或體驗片段。
請參閱體驗片段。
請注意,當您將檢視器內嵌在「體驗片段」時,不支援「互動式影像」中的社交媒體分享工具。 若要解決這個問題,您可以使用或建立沒有社交媒體分享工具的檢視器預設集。 這些檢視器預設集可讓您成功將它內嵌在「體驗片段」中。
在您目 前的 建立/編輯工作階段中,會支援位於頁面右上角的Undoand Redooptions。
當您建立完互動影像後,可以使用Preview來呈現您的互動影像對客戶的呈現方式。
請參閱(可選)預覽互動式影像。
在「互動式影像」或「轉盤橫幅」中新增熱點至影像時,熱點資訊會儲存在相對於影像位置的相同中繼資料位置,不論是「互動式影像」或「轉盤橫幅」。 這項功能表示,您可以在任一檢視器中,輕鬆地重複使用相同的影像及其定義的熱點資料。
但是,請注意,轉盤橫幅支援影像上的影像地圖,這些影像也可能包含熱點;互動式影像則否。 如果您想要建立使用相同影像的互動式影像或轉盤橫幅,請記住這一點。 您可能想要使用相同影像的個別副本來建立互動式影像和轉盤橫幅。
另請參閱轉盤橫幅。
如果您正在編輯具有熱點的互動式影像並裁剪影像,則會刪除熱點。
要向影像橫幅添加熱點:
在「資產」檢視中,導覽至您要建立互動功能的影像橫幅。
執行下列任一項作業:
在頁面的左上角附近,點選「新增熱點」(手指點選圖示)以開啟「熱點管理」頁面。][
在頁面的左上角附近,點選熱點。
a.在熱點管理頁面的左上角附近,點選熱點。
b.在影像上,點選您要熱點出現的位置。 如有必要,請拖動熱點以調整其位置。c.通過重複步驟a和b,根據需要添加其他熱點。
d.(可選)要刪除熱點,請在影像上選擇該熱點,然後在熱點標題下按一下刪除(垃圾桶表徵圖)。
在名稱文本欄位中,鍵入熱點的名稱。 此名稱也會出現在選定熱點下拉式清單中。
執行下列任一項作業:
點選Quickview。
如果您是AEM Sites或電子商務客戶,請點選「產品選擇器」圖示(放大鏡)以開啟「選擇產品」頁面。 點選您要使用的產品,然後點選頁面右上角的Select以返回至熱點管理頁面。
如果您是not AEM Sites或電子商務客戶
category=Mens
是新增的變數。點選超連結。
請確定您要指定是在新的瀏覽器標籤(建議預設值)或相同的標籤中開啟連結。
如需詳細資訊,請參閱使用選擇器。
點選體驗片段。
如果您是AEM Sites客戶,請點選「Search」圖示(放大鏡)以開啟「體驗片段]」頁面。[點選您要使用的體驗片段,然後點選頁面右上角的Select以返回熱點管理頁面。
請參閱體驗片段。
請注意,當您將檢視器內嵌在「體驗片段」時,不支援「互動式影像」中的社交媒體分享工具。 若要解決這個問題,您可以使用或建立沒有社交媒體分享工具的檢視器預設集。 這些檢視器預設集可讓您成功將它內嵌在「體驗片段」中。
指定「體驗片段」在橫幅上顯示的寬度和高度。
點選「儲存」以儲存您的作品並返回「瀏覽a3/>」頁面。
發佈互動式影像。 發佈可讓橫幅透過雲端傳送,而且如果您需要與協力廠商網站整合,也可產生內嵌代碼。
請參閱發佈資產。
新增熱點並發佈互動式影像後,您現在可以將它新增至現有的網站。
請參閱整合互動式影像與您的網站。
如果您正在編輯具有熱點的互動式影像並裁切影像,則會刪除熱點。
您可以使用「預覽」來查看您的互動式影像對客戶的呈現效果,並測試影像的熱點,以確保它們如預期般運作。
當您對互動式影像感到滿意時,就可以發佈它。
請參閱將視訊或影像檢視器內嵌至網頁。
請參閱將URL連結至您的Web應用程式。 請注意,如果您的互動式內容具有相對URL的連結,尤其是AEM Sites頁面的連結,就無法使用以URL為基礎的連結方法。
請參閱新增動態媒體資產至頁面。
若要預覽互動式影像:
如需如何發佈互動式影像資產的詳細資訊,請參閱發佈資產。
在您上傳橫幅影像、新增影像熱點並發佈互動式影像後,您現在可以將它新增至網站頁面。
如果您是AEM Sites客戶,可將互動式媒體元件拖曳至您的頁面,以新增互動式影像。 請參閱新增動態媒體資產至頁面。
如果您是獨立的AEM Assets客戶,您可以依本節所述手動將互動式影像新增至您的網站。
複製已發佈的互動式影像的內嵌程式碼。
請參閱將視訊或影像檢視器內嵌至網頁。
將複製的內嵌程式碼新增至網頁中所需的位置。
複製的內嵌程式碼會設定為回應式環境,因此應自動符合指定的區域。
範例
以示範網站為例:
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組態屬性。
請參閱crop影像伺服命令。
您現在已準備好將互動式影像與網站上現有的Quickview整合。
此工作僅在您是獨立AEM Assets客戶時適用。
此程式的最後一個步驟是將互動式影像與網站上現有的Quickview實作整合。 沒有適合所有情況的整合解決方案。 每個Quickview實施都是獨一無二的,需要一種最可能需要前端IT人員幫助的具體方法。
現有的Quickview實施通常表示網頁上發生的一系列相互關聯的操作,其順序如下:
這些呼叫可能不代表獨立的公用API呼叫,而網頁邏輯可透過任意步驟呼叫這些呼叫。 相反地,它是連結呼叫,在此連結呼叫中,前一個步驟的最後一個階段(回呼)中將隱藏下一個步驟。
在可購買互動影像取代步驟1和部分步驟2的同時,當使用者按一下可購買影像中的熱點時,檢視者會處理此類使用者互動。 檢視器會將事件傳回至網頁,其中包含先前新增至AEM Assets的所有熱點資料。
在此類事件處理常式中,前端程式碼會執行下列動作:
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 + "&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;
},
}); |
觸發Quickview URL並啟動Quickview面板的最後一個步驟很可能需要IT部門的前端IT人員協助。 他們具備最佳的知識,可瞭解如何從正確的步驟準確觸發Quickview實施,並擁有現成可用的Quickview URL。
您可以瞭解這些步驟如何套用至示範網站,以便將可購買的互動式影像與Quickview程式碼完全整合。 之前,Quickview URL的結構已識別為:
/datafeed/$categoryId$-$SKU$.json
若要在quickViewActivate
處理常式中重建此URL,您可以使用categoryId
和SKU
物件中的欄位,這些欄位會由檢視器的程式碼傳送至處理常式:inData
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
請參閱使用快速檢視建立自訂快顯視窗。