SPA page and Client Data Layer integration | Community
Skip to main content
Y
YuSheng
March 7, 2023
Solved

SPA page and Client Data Layer integration

  • March 7, 2023
  • 3 replies
  • 1910 views

Dear community,

I'm trying to integrate the spa page with Adobe Client Data Layer. 

Before adopting SPA project, I used "com.adobe.cq.wcm.core.components.models.datalayer.ComponentData" in SlingModels, and set relevant information with DataLayerBuilder. In so doing I can use htl to embed data layer in my component html like this: 

 

 

<a data-cmp-data-layer="${item.componentData.json}" href="#" ></a>

 


Since SPA page development doesn't require htl, is ACDL still an option to collect page data? Or is there any package can handle this?
Thanks in advance!

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 yuhuisg

If you're using ACDL, then you don't need to use Custom Events. Instead, just push key-value objects into ACDL and include an "event" key. You can then use that "event"'s value to setup your ACDL events in your rules.

I don't know of any React package to use ACDL. But you can add the ACDL code directly: https://github.com/adobe/adobe-client-data-layer/wiki#setup

3 replies

Jennifer_Dungan
Community Advisor and Adobe Champion
Jennifer_DunganCommunity Advisor and Adobe Champion
Community Advisor and Adobe Champion
March 7, 2023

While I don't use the ACDL, this should still work for SPA websites... SPAs were already a popular way of developing websites when the ACDL was created, it wouldn't make a lot of sense for that to not work with such a development standard.

 

The big thing is though, that because the ACDL will continue growing the more pages you visit and the more clicks you perform (similar to Google's DataLayer object); you may want to build in the Reset Data Layer logic (which should take a copy of the last computed state, empties the object, then re-pushes the last state)... https://experienceleague.adobe.com/docs/experience-platform/tags/extensions/client/client-data-layer/overview.html?lang=en 

 

 

I did notice that Search Discovery has created a Reset Data Layer extension that you could check out as well: https://techdocs.searchdiscovery.com/adobe-solutions/adobe-launch/launch-extensions/data-layer-manager/actions/reset-data-layer

 

Maybe someone who has more experience with the ACDL will chime in here... but as far as I know, the actions you are inquiring about should still work in an SPA site.

    yuhuisg
    Community Advisor
    yuhuisgCommunity AdvisorAccepted solution
    Community Advisor
    March 8, 2023

    If you're using ACDL, then you don't need to use Custom Events. Instead, just push key-value objects into ACDL and include an "event" key. You can then use that "event"'s value to setup your ACDL events in your rules.

    I don't know of any React package to use ACDL. But you can add the ACDL code directly: https://github.com/adobe/adobe-client-data-layer/wiki#setup

      Y
      YuShengAuthor
      March 9, 2023

      Thank you for the helpful replies.

      It seems the data layer should be set on ui.frontend instead of sling model in SPA development cases. It has become quite straightforward to implement.

      Terms & ConditionsAccessibility statement

      Loading footer...