互動式影像 interactive-images

您可以將「可購物」熱點拖放至影像上，輕鬆讓靜態影像豐富吸引客戶的體驗。 可購物熱點結合有關產品或服務的其他資訊與直接的銷售點「加入購物車」或「購買」功能。 客戶可以選擇這些連結至產品或服務的熱點、將其新增至購物車，或連結至網頁。 這類直接體驗可提升客戶參與度和您網站上的轉換率。

以下是帶有「快速檢視」快顯視窗的可購物橫幅。 使用者點選模型上的圓形或「熱點」來啟動快速檢視。

在上圖所示的網頁上，檢視動作🔗中的互動式影像。

觀看互動式影像橫幅的建立方式 watch-how-interactive-image-banners-are-created

觀看如何建立互動式影像橫幅的逐步解說 （10分33秒）。 您也會瞭解如何預覽、編輯及傳遞互動式影像橫幅。

快速入門：互動影像 quick-start-interactive-images

下列逐步工作流程說明可協助您在Adobe Experience Manager Assets中快速啟動並執行互動式影像。

在部分快速入門工作中尋找​ 範例 ​標題。 此教學課程包含以尚未新增互動影像的網頁範例為基礎的簡短教學課程。

本教學課程可協助您說明，如何將互動式影像整合在您自己的網站上。

互動影像步驟：

（可選）識別熱點變數 optional-identifying-hotspot-variables

首先，請識別您現有Quickview實作所使用的動態變數，以便您可以輸入熱點資料來建立互動式影像。

當您在Experience Manager Assets中將熱點新增至橫幅影像時，請指派SKU （庫存單位）。 SKU是您提供的每個不同產品或服務的唯一識別碼。 此外，也可將任何額外的選用變數新增至每個熱點。 這類熱點變數稍後會用於比對熱點與Quickview內容。

請務必正確識別要與熱點資料產生關聯的變數數量和型別。 新增至橫幅影像的每個熱點都必須包含足夠的資訊，以明確識別現有後端系統中的產品。

有不同的方式可識別要用於熱點資料的一組變數。

有時候，諮詢負責現有Quickview實作的IT專家就足夠了。 這類人可能會知道在系統中識別「快速檢視」所需的最低資料集為何。 但是，也可以只分析前端計畫碼的現有行為。

大部分的「快速檢視」實作都使用下列範例：

接著，方法就是瀏覽已實作「快速檢視」功能的現有網站的不同區域。 然後觸發Quickview並取得網頁傳送的Ajax URL，以載入Quickview資料或內容。

通常您不需要使用任何專門的偵錯工具。 現代的網頁瀏覽器配備能夠執行適當工作的網頁檢查器。 以下是一些包含網頁檢查器的網頁瀏覽器範例：

在瀏覽器中開啟網路監視時，會觸發頁面上的快速檢視。

現在，請在網路記錄檔中找到Quickview Ajax URL，並複製紀錄的URL以供日後分析。 通常當您觸發「快速檢視」時，會有許多要求傳送至伺服器。 通常，快速檢視Ajax URL是清單中的第一個專案。 它具有複雜的查詢字串部分或路徑，而且其回應MIME型別是text/html、text/xml或text/javascript。

在此過程中，請務必使用不同的產品類別和型別，造訪您網站的不同區域。 原因是快速檢視URL可以包含指定網站類別的共同部分。 不過，只有在您造訪網站的其他區域時，這些功能才會變更。

最簡單的情況是，快速檢視URL中的唯一變數部分是產品SKU。 在此案例中，SKU值是您將熱點新增至橫幅影像時所需的唯一資料片段。

不過，在複雜的情況下，除了SKU之外，快速檢視URL還有不同的變數元素。 例如，變動的元素可能包括類別ID、顏色代碼和大小代碼。 在這種情況下，在Experience Manager Assets的可購物互動影像功能中，每個元素都是熱點資料定義中的個別變數。

請考量下列快速檢視URL範例及其產生的熱點變數：

範例

您可以將上述三個範例中所使用的方法套用至示範網頁。

示範網頁具有多個產品縮圖，每個縮圖都有一個標示為「檢視更多」的「快速檢視」按鈕。 在您的Web瀏覽器偵錯工具仍然啟動的情況下，選取每個按鈕並記下錄製的「快速檢視」URL。 啟用頁面上所有可用的四個產品快速檢視後，您會取得向後端發出的快速檢視請求清單：

檢視伺服器呼叫，就會發現產品專屬資訊僅存在於請求路徑中。 您也會發現根本不會使用查詢字串，而且其中涉及兩種不同型別的資料片段：

根據此資訊，整個快速檢視URL的模式如下：

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

根據此類分析，您會針對熱點使用categoryId和SKU。

您現在可以使用Experience Manager Assets中的可購物互動影像功能，上傳影像橫幅並新增熱點。

（可選）建立互動式影像檢視器預設集 optional-creating-an-interactive-image-viewer-preset

您可以選擇使用Experience Manager Assets隨附的預設現成互動影像檢視器預設集Shoppable_Banner。 或者，您也可以建立自己的自訂檢視器預設集，以用於互動式影像。

建立自訂互動式影像檢視器預設集時，您可以決定影像橫幅上的熱點外觀。 在建立檢視器預設集時，您可以選擇使用預先定義影像庫中的熱點圖形。

儲存檢視器預設集後，就會在Experience Manager Assets的「檢視器預設集」清單頁面上自動啟動（開啟）檢視器預設集。 這項功能表示在互動媒體元件中以及您檢視資產時，都可看到這項功能。 但是，若要​ 傳遞 ​具有此檢視器預設集的互動式橫幅，也發佈 ​您的檢視器預設集。 此規則適用於自訂或現成可用的檢視器預設集。

若要建立互動式影像檢視器預設集：

上傳影像橫幅 uploading-an-image-banner

如果您已上傳要使用的影像，請繼續進行下一個步驟，新增熱點至影像橫幅。

若要上傳影像橫幅：

將熱點新增至影像橫幅 adding-hotspots-to-an-image-banner

您可以使用「熱點管理」頁面上的編輯器，將熱點新增至影像橫幅。

新增熱點時，您可以將熱點定義為「快速檢視」彈出式顯示、超連結或體驗片段。

請參閱體驗片段。

在您目前的建立/編輯作業階段期間，支援頁面右上角附近的「復原」和「重做」選項。

當您完成互動式影像的建立時，可以使用「預覽」來檢視客戶看到的互動式影像的顯示方式。

請參閱（選擇性）預覽互動式影像。

若要新增熱點至影像橫幅：

（可選）預覽互動式影像 optional-previewing-interactive-images

您可以使用「預覽」來檢視向客戶呈現互動式影像的呈現方式。 「預覽」也可讓您測試影像的熱點，確保它們如預期般運作。

當您對互動式影像感到滿意時，即可發佈。
請參閱將視訊或影像檢視器嵌入網頁。
檢視將URL連結至您的網頁應用程式。 如果您的互動式內容有具有相對URL的連結，尤其是指向Experience Manager Sites頁面的連結，則無法採用URL型連結方法。
請參閱將Dynamic Media Assets新增至頁面。

若要預覽互動式影像：

Publish互動式影像資產 publishing-interactive-image-assets

如需如何發佈互動式影像資產的詳細資訊，請參閱Publish Assets。

將互動式影像與您的網站整合 integrating-an-interactive-image-with-your-website

上傳橫幅影像、新增熱點並發佈互動式影像後，您就可以將其新增至您的網站頁面了。

如果您是Experience Manager Sites客戶，可以將互動式媒體元件拖曳至頁面上，以新增互動式影像。 請參閱將Dynamic Media Assets新增至頁面。

如果您是獨立Experience Manager Assets客戶，可以手動將互動式影像新增至您的網站，如本節所述。

範例

以示範網站為例，請注意這三人的圖片是靜態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組態屬性。

請參閱裁切影像伺服命令。

您現在已準備好將互動式影像與網站上現有的快速檢視整合。

將互動式影像與現有的快速檢視整合 integrating-an-interactive-image-with-an-existing-quickview

此程式的最後一步是將互動式影像與網站上現有的快速檢視實作整合。 整合沒有適用於所有情況的解決方案。 每個Quickview實作都是獨一無二，需要特定方法。 因此，前端IT人員的協助會很有幫助。

現有的快速檢視實施通常代表一連串在網頁上發生的相互關聯動作，其順序如下：

這些呼叫不一定代表網頁邏輯從任意步驟呼叫的獨立公用API呼叫。 相反地，這是一種鏈結呼叫，下個步驟的每一個都會隱藏在上一個步驟的最後一個階段（回撥）。

當可購物互動影像取代步驟1及部分步驟2時，使用者會在可購物影像中點選熱點。 這類使用者互動由檢視者處理。 檢視器會傳回事件至包含先前新增至Experience Manager Assets之所有熱點資料的網頁。

在此類事件處理常式中，前端程式碼會執行下列動作：

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, add custom parameter during the hotspot setup as parameterName=value
                    loadQuickView(sku); //Replace this call with your Quickview plugin
                    //See your Quickviewer plugin for the Quickview call
                 },
             });
        */
        s7interactiveimageviewer.init();

因此，只需取消註解程式碼，並將虛擬處理常式本文取代為特定網頁專用的程式碼。

建構快速檢視URL的程式與用來識別先前涵蓋之熱點變數的程式相反。

請參閱識別熱點變數。

使用先前的快速檢視URL範例，您可在下列範例中檢視快速檢視URL在各種情況下的建構方式：

觸發「快速檢視」URL及啟動「快速檢視」面板的最後一個步驟，需要您工作的前端IT人員協助。 他們最瞭解如何透過適當的步驟準確觸發Quickview實施，並擁有現成的Quickview URL。

您可以檢視這些步驟如何套用至示範網站，以將可購物互動影像與快速檢視程式碼完全整合。 之前，快速檢視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對話方塊。 此函式僅接受一個引數，即快速檢視資料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 建立自訂快顯視窗 using-quickviews-to-create-custom-pop-ups

請參閱使用Quickview建立自訂快顯視窗®。