Data Layer Implementation - React web App

[pradeep_07]

Hi,

Is there any documentation on How to Implement Digital data Layer for React Web App?  

We are trying to configure custom Data layer event for React components, Data layer event is firing in browser but Adobe Data collection unable to capture the event. Below is what i see in browser console.

[V_Sirish_Kaushik1 · Accepted solution]

Hi Pradeep, 

Adobe recommends using Adobe Client Data Layer (Event Driven Data Layer), and I suggest you also try this! We have been using this for our clients with React websites / SPAs and it works fine, and makes the implementation relatively easy. You can use ACDL Extension if you are using Tags as TMS and specify the data layer event for when the rule should trigger. 

Coming to the legacy W3C format, if you use direct call rule/custom events, the updated data layer values will be passed in adobe calls as expected.

You can read about it here 

https://experienceleague.adobe.com/docs/analytics-learn/tutorials/implementation/spa-pages/using-bes...

You can read more about ACDL below

https://github.com/adobe/adobe-client-data-layer/wiki
https://www.softcrylic.com/blogs/why-the-adobe-client-data-layer-acdl-is-the-right-data-layer-for-yo...

[Jennifer_Dungan]

Your Data Layer looks to be there... whether it has the correct info would be better answered by you since you know what you should be expecting...

So it seems like the issue may be more with the Adobe Launch rules to detect the Data Layer event....

I would expect you would need a trigger such as:

to listen for that event, then you would have to apply the action you want for that event in Launch.

[yuhuisg]

If you must use this W3C-style flat key-value "digitalData" object, then you can use the Core extension's "Data Element Changed" event to detect when new values have been set with your digitalData's keys.

Otherwise, as @V_Sirish_Kaushik1 said, the best suggestion is to migrate to an event-driven data layer like ACDL. Note that this will require your developers to re-program all of their data layer-related code.