轉盤橫幅可讓行銷人員輕鬆建立互動式旋轉促銷內容,並將其傳遞至任何畫面,借此促進轉換。
建立和修改促銷橫幅中特有的內容可能非常耗時,限制您快速發佈新內容或使其更具針對性的能力。 輪播橫幅可讓您快速建立或修改旋轉橫幅、新增連結至產品詳細資料或相關資源的熱點等互動功能,並將它們傳送至任何畫面,讓您更快將新促銷內容投放市場。
輪播橫幅由橫幅指定,單字為CAROUSELSET:
在您的網站上,輪播橫幅可以如下所示:
您可以在此導覽影像(按一下數字)。 此外,幻燈片會根據您可以自定義的時間間隔自動旋轉。 您在轉盤橫幅中新增的影像支援熱點和影像地圖,使用者可以點選或前往超連結或存取快速檢視視窗。
在此示例中,用戶已點選或按一下影像映射,並訪問手套的「快速視圖」窗口:
觀看如何建立輪播橫幅的10分鐘33秒逐步說明。 您也將學習如何預覽、編輯和傳送輪播橫幅。
必須將非管理使用者新增至dam-users群組,才能建立或編輯轉盤橫幅。 如果您在建立或編輯時遇到問題,請洽詢系統管理員,該管理員可將您新增至dam-users群組。
快速啟動並運行:
識別熱點和影像對應變數 (僅適用於使用AEM Assets + Dynamic Media的客戶)
首先,找出現有Quickview實作所使用的動態變數,以便在AEM Assets中的輪播橫幅建立程式期間,正確輸入熱點和影像地圖資料。
如果您是AEM Sites或電子商務客戶,可以使用內建功能來導覽至產品頁面,並查詢產品目錄中的現有SKU。 您不需要手動輸入熱點或影像地圖變數。 請參閱有關設定eCommerce的資訊。
如果您是AEM Assets和Dynamic Media客戶,您將手動輸入熱點和影像地圖的資料,然後將發佈的URL或內嵌程式碼與您的協力廠商內容管理系統整合。
可選:視需 要建立轉盤集檢視器預設。
如果您是管理員,則可建立自己的轉盤檢視器預設集,以自訂轉盤的行為和外觀。 主要優點是,您可以針對多個輪播重複使用此自訂檢視器預設集。 不過,使用者也可以選擇在編寫轉盤時直接自訂轉盤的行為和外觀。 當您想要指定輪播的特定設計時,這是偏好的方法。
上傳您要製作互動式的影像橫幅。
在輪播集中,使用者會瀏覽橫幅影像,並點選熱點或影像地圖以存取相關內容。
若要在資產中建立轉盤集,請點選「 建立」,然後選 取轉盤集。將資產新增至投影片並點選「 儲存」。您也可以直接在編輯器中編輯轉盤的外觀和行為。
新增一或多個熱點或影像地圖至影像橫幅,並將每個熱點或影像地圖與連結、快速檢視或體驗片段等動作建立關聯。 添加熱點或影像映射後,通過發佈輪播集來完成此任務。 發佈會建立內嵌程式碼,供您複製並套用至網站登陸頁面。
請參閱(選用)預覽轉盤橫幅 — 選用。 如有需要,您可以檢視輪播集的呈現,並測試其互動性。
您發佈轉盤集的方式與發佈任何資產的方式相同。 在「資產」中,導覽至「轉盤集」並選取它,然後點選或點選Publish。 「發佈轉盤集」會啟用URL和內嵌字串。
執行下列任一操作:
將轉盤橫幅新增至您的 網站頁面您可以新增已複製至網站頁面的轉盤橫幅URL或內嵌程式碼。
在AEMI中新增轉盤橫幅至您的 網站如果您是AEM Sites客戶,可使用互動式媒體元件,將轉盤集直接新增至AEM中的頁面。
如果您需要編輯轉盤集,請參閱編輯轉盤集。 此外,您還可以查看和編輯轉盤集屬性。
首先,找出現有Quickview實作所使用的動態變數,以便在AEM Assets中轉盤集建立程式期間,正確輸入熱點或影像地圖資料。
在AEM Assets中將熱點或影像地圖新增至橫幅影像時,您需要指派SKU和選用的其他變數至每個熱點或影像地圖。 這些變數稍後用於匹配熱點或影像映射與Quickview內容。
如果您是AEM Sites和/或AEM Ecommerce客戶,請略過此步驟。 您不需要手動識別熱點或影像地圖變數;您可以將與Ecommerce的整合用於產品整合。 請參閱有關設定eCommerce的資訊。 此外,您也可以使用互動式元件,並將其新增至您的網頁。
如果您是AEM Assets或Media客戶,請發佈URL或內嵌程式碼,然後與您的協力廠商內容管理系統整合,並手動識別熱點和影像地圖。
請務必正確識別要與熱點或影像地圖資料建立關聯的變數數目和類型。 新增至橫幅影像的每個熱點或影像地圖都必須包含足夠的資訊,以明確識別現有後端系統中的產品。 同時,每個熱點或影像地圖不應包含超過必要的資料。 原因在於,這會使資料輸入程式過於複雜,且持續的熱點或影像地圖管理更容易出錯。
有不同的方式可識別要用於熱點或影像地圖資料的一組變數。
有時,與負責現有Quickview實施的IT專家協商可能已足夠,因為他們可能知道在系統中標識Quickview所需的最少一組資料。 不過,在大多數情況下,您也可以簡單分析前端程式碼的現有行為。
大多數Quickview實施都使用以下範例:
接著,方法是造訪實作「快速檢視」功能的現有網站的不同區域、觸發快速檢視並擷取網頁所傳送的Ajax URL,以載入快速檢視資料或內容。
通常您不需要使用任何專用的除錯工具。 現代網頁瀏覽器的功能是能夠勝任工作的網頁檢查員。 以下是一些Web瀏覽器的示例,其中包括Web檢查員:
在瀏覽器中開啟網路監視時,觸發頁面上的快速檢視。
現在,在網路記錄中找到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、顏色代碼、大小代碼等。 在這種情況下,每個元素都是熱點中的個別變數,或輪播橫幅功能中的影像地圖資料定義。
請考量下列Quickview URL範例及其產生的熱點或影像地圖變數:
在查詢字串中找到的單一SKU。 | 錄制的Quickview URL包括:
URL中唯一的變數部分是 |
單一SKU,可在URL路徑中找到。 | 錄制的Quickview URL包括:
變數部分位於路徑的最後一部分,它將成為熱點/影像映射的SKU值: |
查詢字串中的SKU和類別ID。 | 錄制的Quickview URL包括:
在此情況下,URL中會有兩個不同的部分。 SKU儲存在 因此,熱點/影像地圖定義是配對。 即SKU值和稱為
|
如果您已上傳要使用的影像,請前往下一個步驟建立轉盤集。 請注意,在啟用Dynamic Media後,必須上傳輪播中使用的影像。
若要上傳影像橫幅,請參閱上傳資產。
必須將非管理使用者新增至dam-users群組,才能建立或編輯轉盤橫幅。 如果您在建立或編輯時遇到問題,請洽詢系統管理員,該管理員可將您新增至dam-users群組。
若要建立轉盤集:
在「資產」中,導覽至您要建立轉盤集的資料夾,然後點選「建立>轉盤集」。
在轉盤橫幅編輯器頁面上,點選點選以開啟資產選取器以選取第一張投影片的影像。
在轉盤橫幅編輯器頁面上,執行下列其中一項操作:
點選以選取您要納入轉盤集的資產。選取的資產上面有核取標籤圖示。完成後,在頁面右上角附近,點選「 Select 」。
使用「資產選擇器」,您可以輸入關鍵字並點選「回報」來搜尋 資產。您也可以套用篩選條件來調整搜尋結果。您可以依路徑、系列、檔案類型和標籤來篩選。選取篩選,然後點選工具 列上的 「篩選」圖示。點選View圖示並選取Column View、Card View或List View以變更檢視。
如需詳細資訊,請參閱使用選取器 。
繼續新增投影片,直到新增您要在轉盤集中旋轉的所有影像為止。
(選用)執行下列任一操作:
要刪除幻燈片,請點選該幻燈片,然後點選工具欄中的Delete Slide。 要移動幻燈片,請點選訂單表徵圖並按住並移動到所需位置。
在幻燈片中添加影像後,可以將熱點、影像映射或兩者添加到影像中。 請參閱添加熱點或影像映射。
您可以點選或按一下「行為」和「外觀」標籤,並對轉盤橫幅的外觀或特定元件的行為進行調整,以變更轉盤集的視覺設計和行為。 如需如何使用檢視器編輯器的詳細資訊,請參閱管理檢視器預設集。
對於輪播橫幅,下列項目可能是您要調整的項目:
您也可以預覽轉盤橫幅的外觀。 請參閱(選用)預覽轉盤橫幅。
完成後,點選「儲存」。
您可以使用轉盤集編輯器將熱點或影像地圖新增至橫幅。
添加熱點或影像映射時,可以將其定義為快速視圖彈出式顯示、超連結或體驗片段。
請參閱體驗片段。
請注意,當您將檢視器嵌入體驗片段時,「輪播橫幅」中的社交媒體分享工具不受支援。 若要解決此問題,您可以使用或建立沒有社交媒體共用工具的檢視器預設集。 這類檢視器預設集可讓您成功將其內嵌在體驗片段中。
將熱點或影像映射添加到影像時,請記住保存您的工作。 目前 的建立/編輯工作階段期間,支援位於頁面右上角附近的「取消復原」選項。
當您完成轉盤橫幅的建立時,您可以選擇使用預覽來查看向客戶呈現的轉盤橫幅。
請參閱(選用)預覽轉盤橫幅。
當您在互動式影像或轉盤橫幅中將熱點添加到影像時,熱點資訊會儲存在相對於影像位置的相同元資料位置,而不論是互動式影像還是轉盤橫幅。 此功能表示您可以在任一檢視器中輕鬆重複使用相同的影像,及其定義的熱點資料。
但請注意,轉盤橫幅支援影像上的影像地圖,這些影像中也可能包含熱點;互動式影像則否。 如果您要建立使用相同影像的互動式影像或輪播橫幅,請記住這一點。 您可能想要使用相同影像的個別副本,建立互動式影像和輪播橫幅。
如果您正在使用熱點編輯互動式影像並裁切影像,則會刪除熱點。
要向影像橫幅添加熱點:
從「資產」,導覽至您要進行互動式的轉盤集。
選取轉盤集,然後點選Edit。
在轉盤檢視器編輯器中,選取您要建立互動式的投影片。
在頁面的左上角附近,點選「熱點 」或「影像地圖」。
執行下列任一操作:
如有必要,請將熱點或影像映射拖動到新位置。 根據需要添加其他熱點或影像映射。
若要刪除熱點或影像地圖,請點選「動 作 」標籤。在「地 圖與熱點 」標題下,從「選定類型 」下拉菜單中,選擇要刪除的熱點或影像映射的名稱。點選功 能表旁的 「垃圾筒」圖示,然後點選「 刪除」。
在「名稱」文本欄位中,鍵入熱點或影像映射的名稱。 此名稱也會出現在地圖與熱點下拉式清單中。 如果您決定在未來進行變更,提供名稱可讓您輕鬆識別熱點或影像地圖。
在Actions標籤中執行下列任一操作:
點選Quickview。
如果您是AEM Sites和Ecommerce客戶,請點選產品選擇器圖示(放大鏡)以開啟選取產品頁面。 點選您要使用的產品,然後點選頁面右上角的勾號,以返回轉盤橫幅編輯器。
如果您不是AEM Sites或電子商務客戶
點選超連結。
如果您是AEM Sites客戶,請點選網站選取器圖示(資料夾)以導覽至URL。
如果您的互動式內容有連結與相對URL(尤其是連結至AEM Sites頁面),則無法使用以URL為基礎的連結方法。
如果您是獨立客戶,請在HREF文字欄位中,指定連結網頁的完整URL路徑。
請務必指定要在新的瀏覽器標籤(建議的預設值)或相同的標籤中開啟連結。
如需詳細資訊,請參閱使用選取器 。
點選體驗片段。
如果您是AEM Sites客戶,請點選搜尋圖示(放大鏡)以開啟「體驗片段」頁面。 點選您要使用的體驗片段,然後點選頁面右上角的「選取 」以返回「熱點」管理頁面。
請參閱體驗片段。
注意:請注意,當您將檢視器嵌入體驗片段時,「輪播橫幅」中的社交媒體分享工具不受支援。若要解決此問題,您可以使用或建立沒有社交媒體共用工具的檢視器預設集。 這類檢視器預設集可讓您成功將其內嵌在體驗片段中。
指定體驗片段在橫幅上顯示的寬度和高度。
您也可以預覽轉盤橫幅的外觀。 請參閱(選用)預覽轉盤橫幅。
點選儲存。
發佈轉盤集。 發佈會建立您可在網站頁面上使用的內嵌程式碼或URL。 如果您是AEM Sites客戶,可以直接將轉盤集新增至網頁。
請參閱發佈資產。
必須將非管理使用者新增至dam-users群組,才能建立或編輯轉盤橫幅。 如果您在建立或編輯時遇到問題,請洽詢系統管理員,該管理員可將您新增至dam-users群組。
您可以對轉盤集執行各種編輯工作,例如:
請注意,如果您正在編輯具有熱點的互動式影像並裁剪影像,則會刪除熱點。
若要編輯轉盤集:
執行下列任一操作:
若要編輯轉盤集,請執行下列任一操作:
您可以使用預覽來查看您的轉盤橫幅對客戶的看法,並測試轉盤橫幅熱點和影像地圖,以確保它們如預期般運作。
當您對輪播橫幅感到滿意時,即可發佈它。
您可以從轉盤編輯器(偏好的方法)或檢視器清單預覽轉盤橫幅。
若要預覽輪播橫幅:
在Assets中,導覽至您已建立的現有輪播橫幅,並點選以開啟它。
點選「Edit」。
在工具列右角的檢視器預設集清單中,選取檢視器以預覽轉盤橫幅。
點選預覽。
點選影像上的熱點或影像地圖,以測試其相關聯的動作。
若要從「檢視器」清單預覽輪播橫幅:
您必須發佈輪播才能使用。 發佈轉盤集會啟用URL和內嵌程式碼。 它也會將轉盤發佈至Dynamic Media雲端,與CDN整合以提供可擴充且效能優異的傳送。
如果您使用浮動切換橫幅的現有互動式影像與熱點,在您發佈浮動切換橫幅後,必須個別發佈互動式影像。
此外,如果您修改轉盤橫幅中使用的已發佈互動式影像,則必須先發佈互動式影像,這些變更才會反映在轉盤橫幅中。
如需如何發佈轉盤橫幅的詳細資訊,請參閱發佈Dynamic Media資產。
上傳橫幅影像以建立輪播、新增熱點和/或影像對應至橫幅並發佈輪播集後,您現在可以將其新增至現有的網站頁面。
如果您是AEM Sites客戶,您可以將互動式媒體元件拖曳至頁面,直接將輪播橫幅新增至頁面。 請參閱將Dynamic Media資產新增至頁面。
不過,如果您是獨立的AEM資產客戶,您可以依照本節所述,手動將轉盤橫幅新增至您的網站登陸頁面。
複製已發佈的轉盤集的內嵌程式碼。
請參閱將視訊或影像檢視器內嵌在網頁上。
將您從AEM Assets複製的內嵌程式碼新增至網頁。
複製的內嵌程式碼會回應,因此應會自動符合頁面的內嵌區域。
只有當您是獨立AEM Assets客戶時,才適用此工作。
此程式的最後一個步驟是將轉盤橫幅與網站上現有的Quickview實作整合。 每個Quickview實施都是獨一無二的,需要一種最可能需要前端IT人員協助的特定方法。
現有的Quickview實施通常會依下列順序呈現網頁上發生的一系列相關動作:
這些呼叫可能不代表獨立的公用API呼叫,而網頁邏輯可從任意步驟呼叫。 相反地,它是連結呼叫,其中每個後續步驟都會隱藏在前一個步驟的最後一個階段(回撥)中。
在輪播橫幅正在取代步驟1和部分步驟2的同時,當使用者按一下輪播橫幅內的熱點或影像地圖時,檢視器會處理這類使用者互動。 檢視器會將事件傳回至網頁,其中包含先前新增的所有熱點或影像地圖資料。
在這種事件處理常式中,前端程式碼會執行下列動作:
AEM Assets傳回的內嵌程式碼已有可供使用的事件處理常式,且已註解。
因此,只需取消對代碼的註解,並將虛擬處理程式主體替換為特定網頁特有的代碼。
構建Quickview URL的過程與識別先前涵蓋的熱點和影像地圖變數的過程基本相反。
請參閱識別熱點和影像映射變數。
觸發Quickview URL並啟動Quickview面板的最後一個步驟很可能需要IT部門的前端IT人員協助。 他們具備最佳知識,了解如何從正確的步驟準確觸發Quickview實作,並擁有可供使用的Quickview URL。
請參閱使用快速檢視建立自訂快顯視窗。