Fragments d’expérience AEM : les dispositions à plusieurs colonnes et les composants de carrousel ne s’affichent pas correctement dans les activités Adobe Target
Lorsque vous diffusez des fragments d’expérience par le biais d’activités Adobe Target, les sections à plusieurs colonnes s’affichent sous forme de colonnes empilées et les composants interactifs tels que les carrousels ne fonctionnent pas comme prévu. Le fragment s’affiche correctement lorsque vous l’affichez directement dans AEM, mais le problème apparaît une fois que Target l’a injecté dans la page hôte. Pour corriger ce problème, validez la structure du fragment, chargez le CSS requis, initialisez le JavaScript requis après l’injection et supprimez les bibliothèques clientes en double.
Description description
Environnement
Fragments d’expérience Experience Manager Sites exportés vers Adobe Target en tant qu’offres HTML
Problème/Symptômes
Lorsque vous diffusez un fragment d’expérience par le biais d’une activité Adobe Target, sa disposition et ses composants interactifs ne s’affichent pas ou ne fonctionnent pas comme prévu.
- Les sections à plusieurs colonnes s’affichent sous forme de colonnes empilées au lieu de la mise en page prévue.
- Les composants interactifs tels que les carrousels ne fonctionnent pas comme prévu.
- Le fragment d’expérience s’affiche correctement lorsque vous l’affichez directement dans AEM.
- Le problème apparaît lorsqu’Adobe Target injecte le fragment d’expérience dans la page hôte.
- Les images du fragment d’expérience n’utilisent pas les dimensions attendues.
- Le problème affecte plusieurs activités Adobe Target ou sections de page.
Cause
Les HTML, CSS et JavaScript du fragment d’expérience injecté interagissent avec la page hôte une fois qu’Adobe Target a inséré le fragment dans l’activité. Cette interaction affecte les styles de disposition et l’initialisation pour les composants interactifs.
Résolution resolution
Pour résoudre les problèmes de rendu, procédez comme suit :
-
Passez en revue la structure du fragment d’expérience et supprimez les wrappers de pleine page qui ne sont pas requis par le fragment.
-
Vérifiez les bibliothèques clientes utilisées par le fragment d’expérience et supprimez les bibliothèques
CSSouJavaScripten double lorsque la page hôte charge déjà les mêmes bibliothèques. -
Vérifiez que la
CSSde mise en page requise est disponible et s’applique correctement après l’injection du fragment d’expérience par Adobe Target dans la page hôte. -
Vérifiez que la disposition
CSSsélecteurs restent disponibles et inchangés après le chargement de la page, puis testez le fragment d’expérience dans différentes sections de la page pour déterminer si le problème persiste. -
Initialisez le
JavaScriptrequis par les composants interactifs tels que les carrousels après l’injection du fragment d’expérience par Adobe Target.- Remarque : ne vous fiez pas aux scripts intégrés dans le fragment.
- Déclenchez l’initialisation à partir de la page hôte une fois l’activité Target chargée.
-
Vérifiez que le fragment d’expérience s’affiche correctement, que les images utilisent les dimensions prévues et que les composants interactifs fonctionnent dans toutes les activités Adobe Target et sections de page prévues.