Fragmentos de experiência do AEM: layouts de várias colunas e componentes do carrossel não são renderizados corretamente nas atividades do Adobe Target
Ao fornecer Fragmentos de experiência por meio de atividades do Adobe Target, as seções de várias colunas são renderizadas como colunas empilhadas, e os componentes interativos, como carrosséis, não funcionam conforme esperado. O fragmento é renderizado corretamente ao visualizá-lo diretamente no AEM, mas o problema aparece depois que o Target o injeta na página do host. Para corrigir isso, valide a estrutura do fragmento, carregue o CSS necessário, inicialize o JavaScript necessário após a injeção e remova as bibliotecas de clientes duplicadas.
Descrição description
Ambiente
Fragmentos de experiência do Experience Manager Sites exportados para ofertas do Adobe Target as HTML
Problema/Sintomas
Ao entregar um Fragmento de experiência por meio de uma atividade do Adobe Target, o layout e os componentes interativos não são renderizados ou funcionam conforme esperado.
- As seções de várias colunas são renderizadas como colunas empilhadas em vez do layout pretendido.
- Componentes interativos, como carrosséis, não funcionam conforme esperado.
- O Fragmento de experiência é renderizado corretamente ao visualizá-lo diretamente no AEM.
- O problema aparece depois que o Adobe Target injeta o Fragmento de experiência na página do host.
- As imagens dentro do Fragmento de experiência não usam as dimensões esperadas.
- O problema afeta várias atividades do Adobe Target ou seções de página.
Causa
Os HTML, CSS e JavaScript do Fragmento de experiência inserido interagem com a página do host depois que o Adobe Target insere o fragmento na atividade. Essa interação afeta os estilos de layout e a inicialização de componentes interativos.
Resolução resolution
Para solucionar problemas de renderização, siga estas etapas:
-
Revise a estrutura do Fragmento de experiência e remova invólucros de página inteira que não são exigidos pelo fragmento.
-
Verifique as bibliotecas de clientes usadas pelo Fragmento de Experiência e remova as bibliotecas
CSSouJavaScriptduplicadas quando a página de host já carregar as mesmas bibliotecas. -
Verifique se o layout necessário
CSSestá disponível e se aplica corretamente depois que o Adobe Target injeta o Fragmento de experiência na página do host. -
Verifique se os seletores de layout
CSSpermanecem disponíveis e inalterados após o carregamento da página e teste o Fragmento de experiência em seções de página diferentes para determinar se o problema persiste. -
Inicialize o
JavaScriptexigido por componentes interativos, como carrosséis, depois que o Adobe Target injetar o Fragmento de experiência.- Observação: não depende de scripts incorporados no fragmento.
- Acione a inicialização a partir da página do host depois que a atividade do Target for carregada.
-
Verifique se o Fragmento de experiência é renderizado corretamente, se as imagens usam as dimensões esperadas e se os componentes interativos funcionam em todas as atividades do Adobe Target e seções de página desejadas.