Data Layer Implementation - React web App | Community
Skip to main content
pradeep_07
pradeep_07
Level 4
July 12, 2023
Solved

Data Layer Implementation - React web App

  • July 12, 2023
  • 3 replies
  • 3795 views

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.

 

 

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 V_Sirish_Kaushik1

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-best-practices-when-tracking-spa.html?lang=en

 

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-your-website/

3 replies

V_Sirish_Kaushik1
V_Sirish_Kaushik1Accepted solution
Level 4
July 12, 2023

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-best-practices-when-tracking-spa.html?lang=en

 

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-your-website/

    Jennifer_Dungan
    Community Advisor and Adobe Champion
    Jennifer_DunganCommunity Advisor and Adobe Champion
    Community Advisor and Adobe Champion
    July 12, 2023

    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
      Community Advisor
      yuhuisgCommunity Advisor
      Community Advisor
      July 13, 2023

      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.

        Terms & ConditionsAccessibility statement

        Loading footer...