Customize DataLayer attributes for Custom Component Extending Accordion | Community
Skip to main content
M
manasabojja7
October 9, 2023
Solved

Customize DataLayer attributes for Custom Component Extending Accordion

  • October 9, 2023
  • 2 replies
  • 1759 views

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/bundles/core/src/main/java/com/adobe/cq/wcm/core/components/internal/models/v1/AccordionImpl.java#L53

 

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-data-layer-for-accordion-component/td-p/549096

 

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

 

Any help is really appreciated. 

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 Sady_Rifat

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/TabsExtdImpl.java 

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.

2 replies

Anmol_Bhardwaj
Community Advisor
Anmol_BhardwajCommunity Advisor
Community Advisor
October 10, 2023

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
    Community Advisor
    Sady_RifatCommunity AdvisorAccepted solution
    Community Advisor
    October 10, 2023

    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/TabsExtdImpl.java 

    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.

      Terms & ConditionsAccessibility statement

      Loading footer...