AEM体验片段：多列布局和轮播组件在Adobe Target活动中无法正确呈现
当您通过Adobe Target活动交付体验片段时，多列区段呈现为栈叠列，并且交互式组件（例如轮盘）无法按预期发挥作用。 当您直接在AEM中查看片段时，片段会正确呈现，但在Target将其注入主机页面后，会出现问题。 要解决此问题，请验证片段结构，加载所需的CSS，在注入后初始化所需的JavaScript，并删除重复的客户端库。
描述 description
环境
导出到Adobe Target的Experience Manager Sites Experience Fragments作为HTML选件
问题/症状
通过Adobe Target活动交付体验片段时，其布局和交互式组件无法按预期呈现或运行。
- 多列节呈现为栈叠列，而不是预期的布局。
- 交互组件（如轮播）无法按预期发挥作用。
- 当您直接在AEM中查看体验片段时，体验片段可正确呈现。
- Adobe Target将体验片段注入主机页面后，会出现问题。
- 体验片段中的图像不使用预期的维度。
- 该问题会影响多个Adobe Target活动或页面区域。
原因
Adobe Target将片段插入活动后，插入的体验片段的HTML、CSS和JavaScript将与主机页面交互。 此交互影响交互组件的布局样式和初始化。
解决方法 resolution
要排除渲染问题，请执行以下步骤：
-
查看体验片段结构并移除片段不需要的全页包装器。
-
检查体验片段使用的客户端库，并在主机页面已加载相同的库时删除重复的
CSS或JavaScript库。 -
在Adobe Target将体验片段注入主机页面后，验证所需的布局
CSS是否可用以及是否正确应用。 -
验证页面加载后布局
CSS选择器是否保持可用并且未更改，然后在不同的页面部分测试体验片段以确定问题是否仍然存在。 -
在Adobe Target注入Experience Fragment后，初始化交互组件（例如轮播）所需的
JavaScript。- 注意：不依赖片段中的内联脚本。
- 加载Target活动后，从主机页面触发初始化。
-
验证体验片段是否正确呈现，图像是否使用预期的维度，以及交互组件是否可以在所有预期的Adobe Target活动和页面部分中正常工作。
相关阅读
- 将体验片段导出到Adobe Target
- 如何使用Adobe Experience Manager (AEM)体验片段？
- Adobe Experience Manager Sites开发中的体验片段
recommendation-more-help
experience-cloud-kcs-help-kbarticles