Fragmentos de experiencias de AEM: los diseños de varias columnas y los componentes de carrusel no se representan correctamente en las actividades de Adobe Target

Cuando envía fragmentos de experiencias a través de actividades de Adobe Target, las secciones de varias columnas se representan como columnas apiladas y los componentes interactivos como carruseles no funcionan según lo esperado. El fragmento se representa correctamente cuando se ve directamente en AEM, pero el problema aparece después de que Target lo inserte en la página host. Para solucionarlo, valide la estructura del fragmento, cargue el elemento CSS necesario, inicialice el elemento JavaScript necesario después de la inyección y quite las bibliotecas de cliente duplicadas.

Descripción description

Entorno

Fragmentos de experiencias de Experience Manager Sites exportados a Adobe Target como ofertas de HTML

Problema/Síntomas

Cuando se entrega un fragmento de experiencia a través de una actividad de Adobe Target, su diseño y los componentes interactivos no se representan ni funcionan según lo esperado.

  • Las secciones de varias columnas se representan como columnas apiladas en lugar del diseño deseado.
  • Los componentes interactivos, como los carruseles, no funcionan según lo esperado.
  • El fragmento de experiencia se representa correctamente cuando se ve directamente en AEM.
  • El problema aparece después de que Adobe Target inserte el fragmento de experiencia en la página host.
  • Las imágenes dentro del fragmento de experiencia no utilizan las dimensiones esperadas.
  • El problema afecta a varias actividades o secciones de página de Adobe Target.

Causa

Los fragmentos de experiencia insertados HTML, CSS y JavaScript interactúan con la página host después de que Adobe Target inserte el fragmento en la actividad. Esta interacción afecta a los estilos de diseño y a la inicialización de los componentes interactivos.

Resolución resolution

Para solucionar los problemas de procesamiento, siga estos pasos:

  1. Revise la estructura del fragmento de experiencia y elimine los contenedores de página completa que no son necesarios para el fragmento.

  2. Compruebe las bibliotecas de cliente utilizadas por el fragmento de experiencia y elimine las bibliotecas duplicadas CSS o JavaScript cuando la página host ya cargue las mismas bibliotecas.

  3. Compruebe que el diseño requerido CSS esté disponible y se aplique correctamente después de que Adobe Target inserte el fragmento de experiencia en la página host.

  4. Compruebe que los selectores de diseño CSS permanecen disponibles y sin cambios después de cargar la página y, a continuación, pruebe el fragmento de experiencia en diferentes secciones de página para determinar si el problema persiste.

  5. Inicialice JavaScript requerido por componentes interactivos como carruseles después de que Adobe Target inserte el fragmento de experiencia.

    • Nota: No confíe en los scripts en línea del fragmento.
    • Inicialice la déclencheur desde la página host después de cargar la actividad de Target.
  6. Compruebe que el fragmento de experiencia se representa correctamente, que las imágenes utilizan las dimensiones esperadas y que los componentes interactivos funcionan en todas las actividades de Adobe Target y secciones de página previstas.

Lectura relacionada

recommendation-more-help
experience-cloud-kcs-help-kbarticles