Customize DataLayer attributes for Custom Component Extending Accordion

[manasabojja7]

Hi,

I have a custom component(Stepper) that extends the AEM Core Accordion Component.

In the HTL I'm using 

     data-cmp-data-layer="${accordion.data.json}" for Accordion and

     data-cmp-data-layer="${item.data.json}"

Below is the output I see in the browser console when I use window.adobeDataLayer.getState();

      stepper-994a14f431:

            @type: "app/components/custom/stepper"

            parentId: "page-aef00a07fb"

            repo:modifyDate: "2023-04-24T20:04:30Z"

            shownItems: []

    stepper-994a14f431-item-03ec51c5d0:

           @type: "app/components/custom/stepper/item"

           dc:title: "Stepper Item Title"

           parentId: "stepper-994a14f431"

Now the current requirement I have is to add custom attributes to the Item List like customId, and customTitle to track in the Adobe data layer which means I should update the "${item.data.json}"

However, how to handle the same for ${accordion. items} in the same class?

data-cmp-data-layer="${item.data.json}"

I have gone through this

https://github.com/adobe/aem-core-wcm-components/blob/e49999b3733ceb487fd40774ac4a15f921713336/bundl...

but this is to update the getDataLayerShownItems(). But my main question is how to actually add custom attributes so I can have them accessed using ${item.data.json}"

I looked at this blog but haven't really understood how exactly these attributes can be added to the Item List.

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/customize-adobe-client-dat...

Since this is an accepted solution can you guys help me understand better @arunpatidar @Rohan_Garg @kautuk_sahni 

Any help is really appreciated. 

[Anmol_Bhardwaj]

Hi @manasabojja7 ,

There are 2 main things to this:

1. How is the data layer populated from Model class. 

The datalayer.js in AEM OOTB, automatically looks for data-layer-cmp elements ( during page load ) and adds the fields and values to the datalayer from those elements. These fields and values are obtained from SLING models/ manually added. 

SLING Model => HTML => DataLayer

2. How do I customize an OOTB SLING Model?

This can be achieved through SLING delegation.

https://github.com/adobe/aem-core-wcm-components/wiki/Delegation-Pattern-for-Sling-Models 

Override the function that you want through SLING delegation ( you can add custom variables as well)

Customizing the data-layer is nothing but the combination of these 2 concepts.

---

Anmol Bhardwaj

[Sady_Rifat · Accepted solution]

Hello @manasabojja7 ,

You can use the Sling Deligation Pattern to integrate and customize the analytics object easily.

Here is an example to customize the existing Sling object and use it: https://github.com/Sady-Rifat/aem-demo/blob/master/core/src/main/java/com/aem/demo/core/models/TabsE... 

For your requirement, you need to extend the, 

com.adobe.cq.wcm.core.components.models.datalayer.ComponentData

And overwrite this function,

ComponentData getData()

 in this function your core will be something like this,

public CustomComponentData getData() {
        accordion.getData(); // Mapping this CustomComponentData object by constructor 
        return customComponentData;
    }

You don't need to bring any change in HTL code. All changes will done from the Sling Model Class.

Hope this helps you give an idea, still if you face trouble let me know.