互動式影像 interactive-images
將「可購買」熱點拖放到影像上，即可輕鬆讓靜態影像豐富、吸引客戶的體驗。 可購買熱點將有關產品或服務的附加資訊與直接、銷售點的「添加到購物車」或「購買」功能相結合。 客戶可以點選這些熱點並直接連結到產品或服務、將其添加到購物車或連結到網頁。 這類直接體驗可增加客戶參與和您網站上的轉換。
以下是帶有Quickview彈出窗口的可購買橫幅。 用戶通過點選模型上的圓或「熱點」來激活「快速視圖」。
前往下列頁面，查看上述網頁上的互動式影像執行中功能：
觀看互動式影像橫幅的建立方式 watch-how-interactive-image-banners-are-created
觀看10分鐘33秒的逐步說明 互動式影像橫幅的建立方式. 您也將學習如何預覽、編輯和傳送互動式影像橫幅。
快速入門：互動式影像 quick-start-interactive-images
下列逐步工作流程說明旨在協助您在AEM Assets中使用互動式影像快速上手並執行。
尋找 範例 標題。 其中包含以下網頁範例為基礎的簡短教學課程，目前尚未新增互動式影像：
本教學課程可協助您說明如何將互動式影像整合到您自己的網站上。
互動式影像工作流程:
-
（可選）識別熱點變數 — 如果您使用AEM Assets和Dynamic Media獨立，請先識別現有Quickview實作中使用的動態變數，以便在建立互動式影像時輸入熱點資料。 請參閱 （可選）識別熱點變數.
不過，如果您使用AEM Sites或AEM eCommerce或兩者，則不需要此步驟。
請參閱 AEM Assets中的電子商務概念.
-
（可選）建立互動式影像檢視器預設集 — 自定義用於表示熱點的圖形影像。 如果您要使用現成可用的互動式影像檢視器預設集，則不需要建立您自己的互動式影像檢視器預設集，此預設集命名為
Shoppable_Banner。請參閱 （可選）建立互動式影像檢視器預設集.
-
上傳影像橫幅 — 上傳您要製作互動式的影像橫幅。
請參閱 上傳影像橫幅.
-
向影像橫幅添加熱點 — 將一個或多個熱點添加到影像橫幅中，並將每個熱點與超連結、快速視圖或體驗片段等操作關聯。 添加熱點後，將通過發佈交互影像來完成此任務。
-
在AEM中將互動式影像新增至您的網站或網站
- 如果您使用AEM Sites或AEM eCommerce，或兩者搭配，可將互動式媒體元件拖曳至頁面，直接將互動式影像新增至AEM的網頁。 請參閱 將Dynamic Media Assets新增至頁面.
- 如果您使用獨立的AEM Assets和Dynamic Media，則必須複製網站上的內嵌程式碼，然後將其與現有的Quickview整合。 請參閱 將互動式影像與您的網站整合.
- 如果您使用第三方WCM（網頁內容管理員），則必須將新的互動式視訊與網站上使用的現有Quickview實作整合。 請參閱 將互動式影像與現有的Quickview整合.
（可選）識別熱點變數 optional-identifying-hotspot-variables
- 您想要透過觸發Quickviews來為影像新增互動功能。
- 您的AEM實作可 not 使用電子商務整合架構，將產品資料從任何電子商務解決方案(例如IBM Websphere Commerce、Elastic Path、hybris或Intershop)提取至AEM。 請參閱 AEM Assets中的電子商務概念.
首先，識別您現有Quickview實作所使用的動態變數，以便您可以輸入熱點資料來建立互動式影像。
在AEM Assets中為橫幅影像新增熱點時，您需要指派SKU(庫存保管單位；您提供的每個不重複產品或服務的唯一識別碼)，以及每個熱點的選用其他變數。 這些熱點變數稍後用於匹配熱點與Quickview內容。
請務必正確識別要與熱點資料關聯的變數數目和類型。 每個新增至橫幅影像的熱點都必須包含足夠的資訊，才能明確識別現有後端系統中的產品。
識別要用於熱點資料的一組變數有不同的方法。
有時，與負責現有Quickview實施的IT專家協商可能已足夠，因為他們可能知道在系統中標識Quickview所需的最少一組資料。 不過，在大多數情況下，您也可以簡單分析前端程式碼的現有行為。
大多數Quickview實施都使用以下範例：
- 使用者在網站上啟動使用者介面元素。例如，按一下 快速檢視 按鈕。
- 網站會視需要傳送Ajax要求至後端，以載入Quickview資料或內容。
- 快速檢視資料會轉譯為內容，以準備在網頁上轉譯。
- 最後，前端代碼在螢幕上直觀地呈現這樣的內容。
接著，方法是造訪實作「快速檢視」功能的現有網站的不同區域、觸發快速檢視並擷取網頁所傳送的Ajax URL，以載入快速檢視資料或內容。
通常您不需要使用任何專用的除錯工具。 現代網頁瀏覽器的功能是能夠勝任工作的網頁檢查員。 以下是一些Web瀏覽器的示例，其中包括Web檢查員：
-
若要在Google Chrome中查看所有傳出的HTTP要求，請按F12以開啟 開發人員工具 ，然後按一下 網路 標籤。
在Mac上，按 Command+Option+I 開啟 開發人員工具 ，然後按一下「網路」頁簽。
-
在Firefox中，您可以按F12啟動Firebug外掛程式並使用其Net標籤，或使用內建 檢查員 工具及其 網路 標籤。
在Mac上，按 Command+Option+I 開啟 開發人員工具 ，然後按一下 檢查員 標籤。
在瀏覽器中開啟網路監視時，觸發頁面上的快速檢視。
現在，在網路記錄中找到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範例及其產生的熱點變數：
範例
您可以將上述三個範例中使用的相同方法套用至示範網頁：
示範網頁有數個產品縮圖，每個縮圖都有一個標示為的「快速檢視」按鈕 查看更多. 在Web瀏覽器的偵錯工具仍處於啟用狀態時，按一下每個按鈕並記下記錄的Quickview URL。 啟用頁面上所有的四個產品快速檢視後，您就會有向後端提出的快速檢視請求清單：
/datafeed/Men-Windbreaker.json/datafeed/Men-SimpleHenley.json/datafeed/Men-CamoPullover.json/datafeed/Women-QuiltedDownJacket.json
查看這些伺服器呼叫後，您會發現產品專屬資訊僅存在於請求路徑中。 您也注意到查詢字串完全未使用，且涉及兩種不同類型的資料片段：
- 第一種是「男」或「女」。 您可以將此稱為「產品類別」。
- 第二種類型是產品名稱，例如CamoPullover。 您可以假設這是產品SKU。
根據此資訊，整個Quickview URL的模式如下：
/datafeed/$categoryId$-$SKU$.json
根據此分析，您會使用 categoryId 和 SKU （針對熱點）。
您現在可以使用AEM Assets中的可購買互動式影像功能，上傳影像橫幅並新增熱點。
（可選）建立互動式影像檢視器預設集 optional-creating-an-interactive-image-viewer-preset
您可以選取使用預設且現成可用的互動式影像檢視器預設集，稱為 Shopbable_Banner 和AEM Assets。 或者，您可以建立自己的自訂檢視器預設集以搭配互動式影像使用。
當您建立自訂互動式影像檢視器預設集時，可以決定影像橫幅上熱點的外觀。 在建立查看器預設集時，您可以選擇使用預定義影像庫中的熱點圖形。
儲存檢視器預設集後，就會在 檢視器預設集 清單頁面。 此功能表示它會顯示在互動式媒體元件中，以及您每次檢視資產時。 不過， 傳遞 具有此檢視器預設集的互動式橫幅，您必須 發佈 檢視器預設集（自訂或現成的檢視器預設集也是如此）。
建立互動式影像檢視器預設集的方式:
-
在左側導軌中，點選 「工具>資產>檢視器預設集」.
-
在頁面的右上角附近，點選 建立.
-
在 新檢視器預設集 對話框，鍵入一個名稱以說明互動式橫幅查看器預設集。
這是將顯示在 檢視器預設集 清單頁面。
-
在 多媒體類型 下拉式功能表，選取 互動式影像.
-
點選 建立.
-
在 編輯檢視器預設集 頁面，點選 外觀 標籤。
-
執行下列任一項作業：
- 若要上傳您要在影像上使用的自己熱點影像，請點選 資產選擇器 表徵圖。 在 選取內容 頁面，導覽至您要使用的熱點影像，選取它，然後點選 勾號 表徵圖。
- 若要選取預先定義的熱點影像，請點選 熱點庫 表徵圖。 在熱點圖庫盤上，點選您要使用的熱點影像。
-
在頁面的右上角附近，點選 儲存.
請務必發佈新的檢視器預設集。
請參閱 發佈您已新增的檢視器預設集.
您現在可以上傳影像橫幅了。
上傳影像橫幅 uploading-an-image-banner
如果您已上傳要使用的影像，請前往下一個步驟， 向影像橫幅添加熱點.
上傳影像橫幅:
-
上傳您要製作互動式的影像橫幅。
請參閱 上傳資產.
您現在可以將熱點添加到影像橫幅中；請參閱下面的下一個任務。
向影像橫幅添加熱點 adding-hotspots-to-an-image-banner
您可以使用 熱點管理 頁面。
添加熱點時，可以將熱點定義為「快速視圖」彈出式顯示、超連結或體驗片段。
請參閱 體驗片段.
還原 和 取消復原 目前建立/編輯工作階段期間，會支援位於頁面右上角附近的選項。
完成互動式影像的建立後，您可以使用 預覽 來查看互動式影像在客戶面前的呈現方式。
請參閱 （可選）預覽互動式影像.
向影像橫幅添加熱點:
-
在「資產」檢視中，導覽至您要進行互動的影像橫幅。
-
執行下列任一項作業：
- 暫留在影像上，然後點選 選擇 （勾選圖示）。 在工具列上，點選 編輯.
- 暫留在影像上，然後點選 更多動作 （三點圖示）> 編輯.
- 點選影像以在中開啟 詳細資料檢視 頁面。 在工具列上，點選 編輯.
-
在頁面的左上角附近，點選 添加熱點 （手指點選圖示）以開啟 熱點管理 頁面。
-
在頁面的左上角附近，點選 熱點.
-
a.在 熱點管理 頁面，點選 熱點.
b.在影像上，點選您要熱點出現的位置。 如有必要，請拖動熱點以調整其位置。c.通過重複步驟a和b，根據需要添加其他熱點。d.（可選）若要刪除熱點，請在影像上選取熱點，然後點選 刪除 （垃圾桶圖示） 熱點 標題。 -
在 名稱 文本欄位，鍵入熱點的名稱。 此名稱也會顯示在 所選熱點 下拉式清單。
-
執行下列任一項作業：
-
點選 快速檢視.
-
如果您是AEM Sites或電子商務客戶，請點選 產品選擇器 圖示（放大鏡）以開啟 選擇產品 頁面。 點選您要使用的產品，然後點選 選擇 位於頁面的右上角，以返回 熱點管理 頁面。
-
如果您 not AEM Sites或eCommerce客戶
- 請參閱 識別熱點變數;您需要定義這些變數。
- 然後，手動輸入SKU值。 在 SKU值 文字欄位中，輸入產品的SKU（庫存保存單位），這是您提供之每個不同產品或服務的唯一識別碼。 輸入的SKU值會自動填入Quickview模板的變數部分，以便系統知道將點選熱點與特定SKU的Quickview關聯。
- （可選）如果「快速檢視」中有其他變數需要用來進一步識別產品，請點選 新增一般變數. 在文字欄位中，指定其他變數。 例如，
category=Mens是新增的變數。
-
-
點選 超連結.
- 如果您是AEM Sites客戶，請點選 網站選取器 圖示（資料夾）導覽至URL。 請注意，如果您的互動式內容具有具有相對URL的連結，尤其是連結至AEM Sites頁面的連結，則無法使用以URL為基礎的連結方法。
- 若您是獨立客戶，請在 HREF 文字欄位，指定連結網頁的完整URL路徑。
請務必指定要在新的瀏覽器標籤（建議的預設值）或相同的標籤中開啟連結。
請參閱 使用選取器 以取得更多資訊。
-
點選 體驗片段.
-
如果您是AEM Sites客戶，請點選 搜尋 圖示（放大鏡）以開啟 體驗片段 頁面。 點選您要使用的體驗片段，然後點選 選擇 位於頁面的右上角，以返回「熱點」管理頁面。
請參閱 體驗片段.
note note NOTE 請注意，當您將檢視器內嵌在體驗片段時，互動式影像中的社交媒體共用工具不受支援。 若要解決此問題，您可以使用或建立沒有社交媒體共用工具的檢視器預設集。 這類檢視器預設集可讓您成功將其內嵌在體驗片段中。 -
指定體驗片段在橫幅上顯示的寬度和高度。
-
-
-
點選 儲存 以保存您的工作並返回 瀏覽 頁面。
-
發佈互動式影像。 發佈可讓橫幅透過雲端傳送，也可在您需要與第三方網站整合時產生內嵌程式碼。
請參閱 發佈資產.
新增熱點並發佈互動式影像後，您現在可以將其新增至現有網站。
請參閱 將互動式影像與您的網站整合.
note note NOTE 如果您正在使用熱點編輯互動式影像並裁切影像，則會刪除熱點。
（可選）預覽互動式影像 optional-previewing-interactive-images
您可以使用預覽來查看您的互動式影像在客戶看來會是什麼樣子的表示，並測試影像的熱點，以確保它們如預期般運作。
對互動式影像感到滿意時，即可發佈影像。
請參閱 將視訊或影像檢視器內嵌在網頁上.
請參閱 將URL連結至您的Web應用程式. 請注意，如果您的互動式內容具有具有相對URL的連結，尤其是連結至AEM Sites頁面的連結，則無法使用以URL為基礎的連結方法。
請參閱 將Dynamic Media Assets新增至頁面。
預覽互動式影像:
- 在「資產」檢視中，導覽至您已建立的現有互動式影像，然後點選以在「預覽」中開啟它。
- 在「預覽」頁面的左上角附近， 內容 下拉式清單，點選 檢視器.
- 在 檢視器 清單，點選 Shopbable_Banner 或您建立的互動式影像檢視器預設集的名稱。
- 點選影像上的熱點以測試其相關聯的動作。
發佈互動式影像資產 publishing-interactive-image-assets
請參閱 發佈資產 以取得如何發佈互動式影像資產的詳細資訊。
將互動式影像與您的網站整合 integrating-an-interactive-image-with-your-website
上傳橫幅影像、新增熱點至影像並發佈互動式影像後，您現在可以將其新增至網站頁面。
如果您是AEM Sites客戶，可將互動式媒體元件拖曳至頁面上，以新增互動式影像。 請參閱 將Dynamic Media Assets新增至頁面。
如果您是獨立的AEM Assets客戶，您可以依照本節所述手動將互動式影像新增至您的網站。
-
複製已發佈的互動式影像的內嵌程式碼。
請參閱 將視訊或影像檢視器內嵌在網頁上.
-
將複製的內嵌程式碼新增至網頁內所需的位置。
複製的內嵌程式碼會設定為回應式環境，因此應自動符合指派的區域。
範例
以示範網站為例：
注意這三個人的照片是靜態的 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顯示頁面上具有三個圓形熱點的可購買互動影像：
若要將裁切套用至回應式環境的可購買互動式影像，您可以包含互動式影像設定屬性 ZoomView.iscommand 到路徑 — 其中 ZoomView 是要呼叫和的元件 iscommand 是您套用的裁切影像伺服命令。
請參閱 ZoomView.iscommand 配置屬性。
請參閱 農作物 影像伺服命令。
您現在可以將互動式影像與網站上現有的Quickview整合。
將互動式影像與現有的Quickview整合 integrating-an-interactive-image-with-an-existing-quickview
此程式的最後一個步驟是將互動式影像與網站上現有的Quickview實作整合。 整合沒有適用於所有情況的解決方案。 每個Quickview實施都是獨一無二的，需要一種最可能需要前端IT人員協助的特定方法。
現有的Quickview實施通常會依下列順序呈現網頁上發生的一系列相關動作：
- 使用者會在您網站的使用者介面中觸發元素。
- 前端程式碼會根據步驟1中觸發的使用者介面元素來取得快速檢視URL。
- 前端程式碼會使用步驟2取得的URL來傳送Ajax要求。
- 後端邏輯會將對應的Quickview資料或內容傳回前端程式碼。
- 前端程式碼會載入Quickview資料或內容。
- （可選）前端代碼將載入的Quickview資料轉換為HTML表示。
- 前端程式碼會顯示強制回應對話方塊或面板，並在畫面上為一般使用者轉譯HTML內容。
這些呼叫可能不代表獨立的公用API呼叫，而網頁邏輯可從任意步驟呼叫。 相反地，它是連結呼叫，其中每個後續步驟都會隱藏在前一個步驟的最後一個階段（回撥）中。
在可購買交互影像替換步驟1和部分步驟2的同時，當用戶按一下可購買影像內的熱點時，觀看者處理這種用戶交互。 檢視器會傳回事件至網頁，其中包含先前新增至AEM Assets的所有熱點資料。
在這種事件處理常式中，前端程式碼會執行下列動作：
- 偵聽可購買互動式影像所發出的事件。
- 根據熱點資料構建快速視圖URL。
- 觸發從後端載入Quickview並在畫面上呈現以供顯示的程式。
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:
觸發Quickview URL並啟動Quickview面板的最後一個步驟很可能需要IT部門的前端IT人員協助。 他們具備最佳知識，了解如何從正確的步驟準確觸發Quickview實施，並擁有可供使用的Quickview URL。
您可以了解這些步驟如何套用至示範網站，以將可購買的互動式影像與Quickview程式碼完全整合。 之前，Quickview URL的結構識別如下：
/datafeed/$categoryId$-$SKU$.json
在 quickViewActivate 處理常式，您可以使用 categoryId 和 SKU 欄位 inData 由檢視器的程式碼傳遞至處理常式的物件：
var sku=inData.sku;
var categoryId=inData.categoryId;
var quickViewUrl = "datafeed/" + categoryId + "-" + sku + ".json";
演示網站使用簡單的 loadQuickView() 函式呼叫。 此函式只需使用一個引數，即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();
具有完全整合互動式影像的最終示範網站如下所示：
使用「快速檢視」建立自訂快顯視窗 using-quickviews-to-create-custom-pop-ups
請參閱 使用Quickviews建立自訂快顯視窗.