Adobe Client Data Layer compatibility with React + Core Components | Community
Skip to main content
R
Ricardo-33
Level 2
November 21, 2024
Solved

Adobe Client Data Layer compatibility with React + Core Components

  • November 21, 2024
  • 2 replies
  • 810 views

Hello,

 

When implementing React with AEM Core Components, is Adobe Client Data Layer still fully functional and accessible? Looking to understand if there are limitations or considerations when accessing/using ACDL in this setup vs traditional HTL implementation.

Has anyone successfully used ACDL with React + Core Components, or only with HTL?

Thanks.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Pallavi_Shukla_

Hi @ricardo-33 

 

ACDL is fully accessible and functional when combined with React and AEM Core Components. However, there are some differences in how data is managed and accessed compared to traditional HTL implementations.

 

HTL-based ACDL: In this approach, data is typically injected server-side, making it easy to access directly in the markup.

 

React-based ACDL: For React, you may need to reinitialize or update the object on the client side after React has hydrated. This is particularly important in single-page application (SPA) setups or when transitioning between pages.

2 replies

Shashi_Mulugu
Community Advisor
Shashi_MuluguCommunity Advisor
Community Advisor
November 22, 2024

@ricardo-33 with react you need to enable datalayer at ui.frontend module, htl based acdl won't work for spa.

R
Ricardo-33Author
Level 2
November 22, 2024

Basically, we need to create a custom data layer in the frontend module instead of using ACDL, and then use hooks in the components to push events to this object when needed. Is that right?

Pallavi_Shukla_
Community Advisor
Pallavi_Shukla_Community AdvisorAccepted solution
Community Advisor
November 25, 2024

Hi @ricardo-33 

 

ACDL is fully accessible and functional when combined with React and AEM Core Components. However, there are some differences in how data is managed and accessed compared to traditional HTL implementations.

 

HTL-based ACDL: In this approach, data is typically injected server-side, making it easy to access directly in the markup.

 

React-based ACDL: For React, you may need to reinitialize or update the object on the client side after React has hydrated. This is particularly important in single-page application (SPA) setups or when transitioning between pages.

Terms & ConditionsAccessibility statement

Loading footer...