互動式影像

將「可購買」熱點拖放到影像上，即可輕鬆讓靜態影像豐富、吸引客戶的體驗。 可購買熱點將有關產品或服務的附加資訊與直接、銷售點的「添加到購物車」或「購買」功能相結合。 客戶可以選擇這些熱點並直接連結到產品或服務、將其添加到購物車或連結到網頁。 這類直接體驗可增加客戶參與次數以及您網站上的轉換次數。

以下是帶有Quickview彈出窗口的可購買橫幅。 用戶通過在模型上選擇圓或「熱點」來激活「快速視圖」。

前往下列頁面，查看上述網頁上的互動式影像執行中功能：

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-banner/we-fashion-QVzoom/index2-shoppable.html?lang=zh-Hant?lang=zh-Hant

觀看互動式影像橫幅的建立方式

在上播放逐步說明 互動式影像橫幅的建立方式 （10分33秒）。 您也可以了解如何預覽、編輯和傳送互動式影像橫幅。

快速入門：互動式影像

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

尋找 範例 標題。 其中包含以下網頁範例為基礎的簡短教學課程，目前尚未新增互動式影像：

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-banner/we-fashion/landing-0.html?lang=zh-Hant?lang=zh-Hant

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

互動式影像步驟：

1. （可選）識別熱點變數 — 如果您使用Experience Manager Assets和Dynamic Media獨立版，請先識別現有Quickview實作中使用的動態變數。 然後，可以在建立互動式影像時輸入熱點資料。 請參閱 （可選）識別熱點變數.
   不過，如果您使用Adobe Experience Manager Sites或Adobe Experience Manager eCommerce或兩者，則不需要此步驟。
   請參閱 Experience Manager Assets中的電子商務概念.

2. （選用）建立互動式影像檢視器預設集 — 自定義用於表示熱點的圖形影像。 如果您要使用現成可用的互動式影像檢視器預設集，則不需要建立您自己的互動式影像檢視器預設集，此預設集命名為 Shoppable_Banner 。
   請參閱 （選用）建立互動式影像檢視器預設集.

3. 上傳影像橫幅 — 上傳您要製作互動式的影像橫幅。
   請參閱 上傳影像橫幅.

4. 向影像橫幅添加熱點 — 將一個或多個熱點添加到影像橫幅中，並將每個熱點與超連結、快速視圖或體驗片段等操作關聯。 添加熱點後，將通過發佈交互影像來完成此任務。

   • 請參閱 向影像橫幅添加熱點.
   • 請參閱 預覽互動式影像 — 選用。 如果需要，可以查看可購買橫幅的表示並測試其交互性。
   • 請參閱 發佈資產 以取得如何發佈互動式影像資產的詳細資訊。

5. 將互動式影像新增至您的網站 — 如果您使用Experience Manager Sites或電子商務，或兩者皆使用，您可以在Experience Manager中將互動式影像新增至網頁。 將互動式媒體元件拖曳至頁面。 請參閱 將Dynamic Media Assets新增至頁面.

   如果您使用獨立的Experience Manager Assets和Dynamic Media，則必須複製網站上的內嵌程式碼，然後將其與現有的Quickview整合。 請參閱 將互動式影像與您的網站整合.

   如果您使用協力廠商WCM（網頁內容管理員），您必須將新的互動式視訊與網站上使用的現有Quickview實作整合。 請參閱 將互動式影像與現有的Quickview整合.

（可選）識別熱點變數

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

在Experience Manager Assets中將熱點新增至橫幅影像時，您必須指派SKU(庫存保留單位和選用的其他變數至每個熱點。 這些熱點變數稍後用於匹配熱點與Quickview內容。

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

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

有時，與負責現有Quickview實施的IT專家協商就足夠了。 IT專家可能知道系統中標識Quickview所需的最低資料集。 不過，您也可以簡單分析前端程式碼的現有行為。

大多數Quickview實施都使用下列範例：

• 使用者在網站上啟動使用者介面元素。例如，選取「快速檢視」按鈕。
• 網站會視需要傳送Ajax要求至後端，以載入Quickview資料或內容。
• 快速檢視資料會轉譯為內容，以準備在網頁上轉譯。
• 最後，前端代碼在螢幕上直觀地呈現這樣的內容。

接著，方法是造訪實作「快速檢視」功能之現有網站的不同區域。 然後您會觸發Quickview並擷取網頁所傳送的Ajax URL，以載入Quickview資料或內容。

通常您不需要使用任何專用的除錯工具。 現代網頁瀏覽器的功能是能夠勝任工作的網頁檢查員。 以下是一些Web瀏覽器的示例，其中包括Web檢查員：

• 若要在Google Chrome中查看所有傳出的HTTP要求，請按F12以開啟「開發人員工具」面板，然後選取「網路」標籤。
  在Mac上，按Command+Option+I開啟「開發人員工具」面板，然後選取「網路」標籤。

• 在Firefox中，您可以按F12並使用其Net標籤來啟動Firebug外掛程式，或使用內建的偵測器工具及其網路標籤。
  在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、顏色代碼和大小代碼。 在這種情況下，在Experience Manager Assets的可購買互動式影像功能中，每個元素都是熱點資料定義中的個別變數。

請考量下列Quickview URL範例及其產生的熱點變數：

範例

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

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-banner/we-fashion/landing-0.html?lang=zh-Hant?lang=zh-Hant

示範網頁有數個產品縮圖，每個縮圖都有標示為「查看更多」的「快速檢視」按鈕。 在Web瀏覽器的偵錯工具仍處於啟用狀態時，請選取每個按鈕並記下記錄的Quickview URL。 啟用頁面上所有的四個產品Quickview後，您就會有向後端提出的Quickview請求清單：

• /datafeed/Male-Windbreaker.json
• /datafeed/Male-SimpleHenley.json
• /datafeed/Male-CamoPullover.json
• /datafeed/Female-QuiltedDownJacket.json

查看伺服器呼叫時，您會發現產品專屬資訊僅存在於請求路徑中。 您也注意到查詢字串完全未使用，且涉及兩種不同類型的資料片段：

• 第一種類型是「男性」或「女性」。 您可以將此稱為「產品類別」。
• 第二種類型是產品名稱，例如CamoPullover。 您可以假設此資訊為產品SKU。

根據此資訊，整個Quickview 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. （可選）要刪除熱點，請在影像上選取熱點，然後選取 刪除 （trashcan圖示） 熱點 標題。

5. 在「名稱」文本欄位中，鍵入熱點的名稱。 此名稱也會出現在「選定熱點」下拉清單中。

6. 執行下列任一項作業：

   • 選擇 快速檢視.

     • 如果您是Experience Manager Sites或電子商務客戶，請選取產品選擇器圖示（放大鏡）以開啟「選取產品」頁面。 選取您要使用的產品，然後選取 選擇 位於頁面的右上角，以便返回「熱點」管理頁面。

     • 如果您 not Experience Manager Sites或eCommerce客戶

       • 請參閱 識別熱點變數;您必須定義這些變數。
       • 然後，手動輸入SKU值。 在「SKU值」文字欄位中，輸入產品的SKU（庫存保存單位），這是您提供之每個不同產品或服務的唯一識別碼。 輸入的SKU值會自動填入Quickview模板的變數部分，以便系統知道將所選熱點與特定SKU的Quickview關聯。
       • （可選）如果「快速檢視」中有您必須用來進一步識別產品的其他變數，請選取 新增一般變數. 在文字欄位中，指定額外的變數。 例如， category=Males 是新增的變數。

   • 選擇 超連結.

     • 如果您是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. 在「檢視器」清單中，選取 Shopbable_Banner 或您建立的互動式影像檢視器預設集的名稱。
4. 如果要測試其關聯操作，請在影像上選擇熱點。

發佈互動式影像資產

請參閱 發佈資產 以取得如何發佈互動式影像資產的詳細資訊。

將互動式影像與您的網站整合

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

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

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

1. 複製已發佈的互動式影像的內嵌程式碼。
   請參閱 將視訊或影像檢視器內嵌在網頁上.

2. 將複製的內嵌程式碼新增至網頁內所需的位置。
   複製的內嵌程式碼會設定為回應式環境，以自動符合指派的區域。

範例

以示範網站為例：

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-banner/we-fashion/landing-0.html?lang=zh-Hant?lang=zh-Hant

請注意，這三隻雄鹿的照片是靜態的 IMG 標籤：

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

整合就像移除 IMG 標籤，並以Experience Manager Assets中複製的內嵌程式碼取代。 您可以在以下URL中看到結果，該URL顯示頁面上具有三個圓形熱點的可購買互動影像：

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-banner/we-fashion/landing-1.html?lang=zh-Hant?lang=zh-Hant

若要為回應式環境將「裁切」套用至可購買的互動式影像，您可以包含互動式影像設定屬性 ZoomView.iscommand 到路上。 元件 ZoomView 稱為和 iscommand 是您套用的「裁切」影像伺服命令。

請參閱 ZoomView.iscommand 配置屬性。

請參閱 農作物 影像伺服命令。

您現在可以將互動式影像與網站上現有的Quickview整合。

將互動式影像與現有的Quickview整合

此程式的最後一個步驟是將互動式影像與網站上現有的Quickview實作整合。 整合沒有適用於所有情況的解決方案。 每個Quickview實施都是獨特的，需要一種特定方法。 這可能需要前端IT人員的協助。

現有的Quickview實施通常會依下列順序呈現網頁上發生的一系列相關動作：

1. 使用者會在您網站的使用者介面中觸發元素。
2. 前端程式碼會根據步驟1中觸發的使用者介面元素來取得快速檢視URL。
3. 前端程式碼會使用步驟2取得的URL來傳送Ajax要求。
4. 後端邏輯會將對應的Quickview資料或內容傳回前端程式碼。
5. 前端程式碼會載入Quickview資料或內容。
6. （可選）前端代碼將載入的Quickview資料轉換為HTML表示。
7. 前端程式碼會顯示強制回應對話方塊或面板，並在畫面上為一般使用者轉譯HTML內容。

這些呼叫不代表獨立的公用API呼叫，而網頁邏輯可從任意步驟呼叫。 相反地，它是連結呼叫，其中每個後續步驟都會隱藏在前一個步驟的最後一個階段（回撥）中。

在可購買交互影像替換步驟1和部分步驟2的同時，當用戶在可購買影像內選擇熱點時，該用戶交互由查看器處理。 檢視器會傳回事件至網頁，其中包含先前新增至Experience Manager Assets的所有熱點資料。

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

• 偵聽可購買互動式影像所發出的事件。
• 根據熱點資料構建快速視圖URL。
• 觸發從後端載入Quickview並在畫面上呈現以供顯示的程式。

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();

因此，只需取消對代碼的註解，並將虛擬處理程式主體替換為特定網頁特有的代碼。

構建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();

具有完全整合互動式影像的最終示範網站如下所示：

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-banner/we-fashion/landing-3.html?lang=zh-Hant?lang=zh-Hant

使用Quickview建立自訂快顯視窗

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

Business.Adobe.com 資源

Multichannel Communication Style System Customer Communications Asset Collections Responsive Forms Theme Editor