Adobe Client Data Layer compatibility with React + Core Components

[Ricardo-33]

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.

[Shashi_Mulugu]

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

[Ricardo-33]

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_ · Accepted solution]

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.