Expand my Community achievements bar.

Join us for the next Community Q&A Coffee Break on Tuesday April 23, 2024 with Eric Matisoff, Principal Evangelist, Analytics & Data Science, who will join us to discuss all the big news and announcements from Summit 2024!
SOLVED

Data Layer Implementation - React web App

Avatar

Level 6

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.

 

pradeep_07_0-1689170183796.png

 

1 Accepted Solution

Avatar

Correct answer by
Level 4

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...

View solution in original post

3 Replies

Avatar

Correct answer by
Level 4

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...

Avatar

Community Advisor

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:

Jennifer_Dungan_0-1689179373432.png


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

Avatar

Community Advisor

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.