AEM Experience Fragments: 다중 열 레이아웃 및 슬라이드 구성 요소가 Adobe Target 활동에서 올바르게 렌더링되지 않음
Adobe Target 활동을 통해 경험 조각을 전달하면 다중 열 섹션이 스택 열로 렌더링되고 회전 메뉴 등의 대화형 구성 요소가 예상대로 작동하지 않습니다. 조각은 AEM에서 직접 볼 때 올바르게 렌더링되지만 Target이 조각을 호스트 페이지에 삽입하면 문제가 나타납니다. 이 문제를 해결하려면 조각 구조를 확인하고 필요한 CSS을(를) 로드한 다음 삽입 후 필요한 JavaScript을(를) 초기화하고 중복된 클라이언트 라이브러리를 제거하십시오.
설명 description
환경
HTML 오퍼로 Adobe Target에 내보낸 Experience Manager Sites 경험 조각
문제/증상
Adobe Target 활동을 통해 경험 조각을 전달하면 해당 레이아웃 및 대화형 구성 요소가 예상대로 렌더링되거나 작동하지 않습니다.
- 다중 열 섹션은 의도한 레이아웃 대신 스택된 열로 렌더링됩니다.
- 회전 메뉴 등 인터랙티브한 구성 요소가 예상대로 작동하지 않습니다.
- 경험 조각은 AEM에서 직접 볼 때 올바르게 렌더링됩니다.
- Adobe Target이 경험 조각을 호스트 페이지에 삽입하면 문제가 나타납니다.
- 경험 조각 내의 이미지는 예상 차원을 사용하지 않습니다.
- 이 문제는 여러 Adobe Target 활동 또는 페이지 섹션에 영향을 줍니다.
원인
Adobe Target이 조각을 활동에 삽입하면 삽입된 경험 조각의 HTML, CSS 및 JavaScript이(가) 호스트 페이지와 상호 작용합니다. 이 상호 작용은 대화형 구성 요소의 레이아웃 스타일과 초기화에 영향을 줍니다.
해결 방법 resolution
렌더링 문제를 해결하려면 다음 단계를 수행합니다.
-
경험 조각 구조를 검토하고 조각에 필요하지 않은 전체 페이지 래퍼를 제거합니다.
-
경험 조각에서 사용하는 클라이언트 라이브러리를 확인하고 호스트 페이지가 이미 동일한 라이브러리를 로드할 때 중복
CSS또는JavaScript라이브러리를 제거하십시오. -
Adobe Target이 경험 조각을 호스트 페이지에 삽입한 후 필요한 레이아웃
CSS을(를) 사용할 수 있고 올바르게 적용되는지 확인하십시오. -
페이지 로드 후 레이아웃
CSS선택기가 사용 가능하고 변경되지 않았는지 확인한 다음 다른 페이지 섹션에서 경험 조각을 테스트하여 문제가 지속되는지 확인합니다. -
Adobe Target에서 경험 조각을 삽입한 후 회전 메뉴 등의 인터랙티브한 구성 요소에 필요한
JavaScript을(를) 초기화합니다.- 참고: 조각의 인라인 스크립트를 사용하지 마십시오.
- 대상 활동이 로드된 후 호스트 페이지에서 초기화를 트리거합니다.
-
경험 조각이 올바르게 렌더링되고, 이미지에 예상 차원이 사용되고, 대화형 구성 요소가 의도한 모든 Adobe Target 활동 및 페이지 섹션에서 작동하는지 확인합니다.