SPA page and Client Data Layer integration

[YuSheng]

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!

[Jennifer_Dungan]

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

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

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

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

[YuSheng]

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.