AEM體驗片段：多欄版面配置和轉盤元件在Adobe Target活動中無法正確呈現
當您透過Adobe Target活動傳送體驗片段時，多欄區段會顯示為棧疊欄，而互動式元件（例如輪播）則無法如預期運作。 當您直接在AEM中檢視片段時，片段會正確呈現，但在Target將其插入主機頁面後，問題就會出現。 若要修正此問題，請驗證片段結構、載入必要的CSS、在插入後初始化必要的JavaScript，以及移除重複的使用者端程式庫。
說明 description
環境
以HTML選件的形式匯出至Adobe Target的Experience Manager Sites體驗片段
問題/症狀
當您透過Adobe Target活動傳送體驗片段時，其版面配置和互動式元件不會如預期呈現或運作。
- 多欄區段會呈現為棧疊欄，而不是預期的配置。
- 輪播之類的互動式元件無法如預期運作。
- 直接在AEM中檢視體驗片段時，體驗片段會正確呈現。
- Adobe Target將體驗片段插入主機頁面後，問題就會出現。
- 體驗片段內的影像沒有使用預期的維度。
- 此問題會影響多個Adobe Target活動或頁面區段。
原因
Adobe Target將片段插入活動後，插入的體驗片段的HTML、CSS和JavaScript會與主機頁面互動。 此互動會影響互動式元件的版面樣式和初始化。
解決方法 resolution
若要疑難排解轉譯問題，請遵循下列步驟：
-
檢閱體驗片段結構，並移除片段不需要的完整頁麵包裝函式。
-
檢查體驗片段使用的使用者端資料庫，並在主機頁面已載入相同的資料庫時，移除重複的
CSS或JavaScript資料庫。 -
確認必要的版面
CSS可用，並在Adobe Target將體驗片段插入主機頁面後正確套用。 -
確認版面
CSS選擇器在頁面載入後仍可用且未變更，然後在不同的頁面區段中測試體驗片段，以判斷問題是否持續存在。 -
在Adobe Target插入體驗片段後，初始化互動式元件（例如輪播）所需的
JavaScript。- 注意：不要依賴片段中的內嵌指令碼。
- 在Target活動載入後，從主機頁面觸發初始化。
-
確認體驗片段正確呈現、影像使用預期的維度，以及互動式元件可在所有預期的Adobe Target活動和頁面區段中運作。
相關閱讀
- 將體驗片段匯出至Adobe Target
- 如何使用Adobe Experience Manager (AEM)體驗片段？
- Adobe Experience Manager Sites開發中的體驗片段
recommendation-more-help
experience-cloud-kcs-help-kbarticles