AEM Experience Fragments: Mehrspaltige Layouts und Karussellkomponenten werden in Adobe Target-Aktivitäten nicht korrekt dargestellt

Letzte Aktualisierung: 24. August 2026

Wenn Sie Experience Fragments über Adobe Target-Aktivitäten bereitstellen, werden mehrspaltige Abschnitte als gestapelte Spalten gerendert und interaktive Komponenten wie Karussells funktionieren nicht wie erwartet. Das Fragment wird korrekt gerendert, wenn es direkt in AEM angezeigt wird, doch das Problem tritt auf, nachdem Target es in die Host-Seite eingefügt hat. Um dies zu beheben, validieren Sie die Fragmentstruktur, laden Sie die erforderlichen CSS, initialisieren Sie die erforderlichen JavaScript nach der Injektion und entfernen Sie doppelte Client-Bibliotheken.

Beschreibung description

Umgebung

Experience Manager Sites Experience Fragments, die als HTML-Angebote nach Adobe Target exportiert wurden

Problem/Symptome

Wenn Sie ein Experience Fragment über eine Adobe Target-Aktivität bereitstellen, werden sein Layout und seine interaktiven Komponenten nicht wie erwartet gerendert oder funktionieren nicht wie erwartet.

Mehrspaltige Abschnitte werden anstelle des vorgesehenen Layouts als gestapelte Spalten dargestellt.
Interaktive Komponenten wie Karussells funktionieren nicht wie erwartet.
Das Experience Fragment wird korrekt gerendert, wenn Sie es direkt in AEM anzeigen.
Das Problem tritt auf, nachdem Adobe Target das Experience Fragment in die Host-Seite eingefügt hat.
Bilder im Experience Fragment verwenden nicht die erwarteten Dimensionen.
Das Problem betrifft mehrere Adobe Target-Aktivitäten oder -Seitenabschnitte.

Ursache

Die HTML, CSS und JavaScript des eingefügten Experience Fragments interagieren mit der Host-Seite, nachdem Adobe Target das Fragment in die Aktivität eingefügt hat. Diese Interaktion wirkt sich auf Layout-Stile und Initialisierung für interaktive Komponenten aus.

Lösung resolution

Gehen Sie wie folgt vor, um die Rendering-Probleme zu beheben:

Überprüfen Sie die Experience Fragment-Struktur und entfernen Sie ganzseitige Wrapper, die für das Fragment nicht erforderlich sind.
Überprüfen Sie die vom Experience Fragment verwendeten Client-Bibliotheken und entfernen Sie doppelte CSS- oder JavaScript, wenn die Host-Seite bereits dieselben Bibliotheken lädt.
Stellen Sie sicher, dass die erforderliche Layout-CSS verfügbar ist und korrekt angewendet wird, nachdem Adobe Target das Experience Fragment in die Host-Seite eingefügt hat.
Vergewissern Sie sich, dass die Layout-CSS-Selektoren nach dem Laden der Seite verfügbar und unverändert bleiben, und testen Sie dann das Experience Fragment in verschiedenen Seitenabschnitten, um festzustellen, ob das Problem weiterhin besteht.
Initialisieren Sie die JavaScripterforderlich für interaktive Komponenten wie Karussells, nachdem Adobe Target das Experience Fragment eingefügt hat.
- Hinweis Verlassen Sie sich nicht auf Inline-Skripte im Fragment.
- Trigger-Initialisierung von der Host-Seite aus, nachdem die Target-Aktivität geladen wurde.
Überprüfen Sie, ob das Experience Fragment korrekt gerendert wird, ob Bilder die erwarteten Abmessungen verwenden und ob interaktive Komponenten in allen vorgesehenen Adobe Target-Aktivitäten und Seitenabschnitten funktionieren.