Frammenti esperienza AEM: i layout a più colonne e i componenti carosello non vengono visualizzati correttamente nelle attività di Adobe Target
Quando distribuisci Frammenti di esperienza tramite attività di Adobe Target, le sezioni a più colonne vengono visualizzate come colonne sovrapposte e i componenti interattivi, come i caroselli, non funzionano come previsto. Il frammento viene riprodotto correttamente quando lo visualizzi direttamente in AEM, ma il problema viene visualizzato dopo che Target lo ha inserito nella pagina host. Per risolvere questo problema, convalidare la struttura del frammento, caricare il CSS richiesto, inizializzare il JavaScript richiesto dopo l’inserimento e rimuovere le librerie client duplicate.
Descrizione description
Ambiente
Frammenti di esperienza Experience Manager Sites esportati in offerte Adobe Target as HTML
Problema/Sintomi
Quando distribuisci un frammento di esperienza tramite un’attività di Adobe Target, il layout e i componenti interattivi non vengono visualizzati né funzionano come previsto.
- Le sezioni a più colonne vengono riprodotte come colonne sovrapposte invece del layout desiderato.
- I componenti interattivi, come i caroselli, non funzionano come previsto.
- Il frammento di esperienza viene riprodotto correttamente quando lo visualizzi direttamente in AEM.
- Il problema viene visualizzato dopo che Adobe Target inserisce il frammento di esperienza nella pagina host.
- Le immagini all’interno del frammento di esperienza non utilizzano le dimensioni previste.
- Il problema riguarda più attività Adobe Target o sezioni di pagina.
Causa
I valori HTML, CSS e JavaScript del frammento di esperienza inserito interagiscono con la pagina host dopo che Adobe Target ha inserito il frammento nell’attività. Questa interazione influisce sugli stili di layout e sull’inizializzazione dei componenti interattivi.
Risoluzione resolution
Per risolvere i problemi di rendering, effettua le seguenti operazioni:
-
Rivedi la struttura Frammento esperienza e rimuovi i wrapper di pagine intere che non sono richiesti dal frammento.
-
Controlla le librerie client utilizzate dal frammento di esperienza e rimuovi le librerie duplicate
CSSoJavaScriptquando la pagina host carica già le stesse librerie. -
Verifica che il layout richiesto
CSSsia disponibile e si applichi correttamente dopo che Adobe Target ha inserito il frammento di esperienza nella pagina host. -
Verifica che i selettori di layout
CSSrimangano disponibili e invariati dopo il caricamento della pagina, quindi verifica il frammento di esperienza in diverse sezioni di pagina per determinare se il problema persiste. -
Inizializza il
JavaScriptrichiesto dai componenti interattivi, come i caroselli, dopo che Adobe Target ha inserito il frammento di esperienza.- Nota: non fare affidamento su script in linea nel frammento.
- Attiva l’inizializzazione dalla pagina host dopo il caricamento dell’attività Target.
-
Verifica che il rendering del frammento di esperienza sia corretto, che le immagini utilizzino le dimensioni previste e che i componenti interattivi funzionino in tutte le attività Adobe Target e le sezioni di pagina a cui sono destinati.