Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events

Customize Adobe Client Data Layer for Accordion Component


Community Advisor


Hi All,


I am working on customizing the Data Layer for AEM's Accordion Component -


Default window.adobeDataLayer.getState() value -

"accordion-bbcec98699": Object { "Component Name": "accordion-bbcec98699-component title", "@type": "brandA/components/content/accordion", "Link Name": "null-accordion item title", }
"@type": "brandA/components/content/accordion"
"Component Name": "accordion-bbcec98699-component title" //CUSTOM PROPERTY ADDED
parentId: "page-599f57792d"
"repo:modifyDate": "2022-07-07T17:12:16.610Z"
shownItems: Array [ "accordion-bbcec98699-item-eedf5f3c7a" ]
0: "accordion-bbcec98699-item-eedf5f3c7a"
length: 1

This confirms to the Container Schema used by Accordion, Tabs and Carousel -


As seen we were able to add our custom attributes to the accordion data layer.
OBJECTIVE - I want to add custom attributes to Accordion's Item as well -
The items schema has the below default behavior -
"accordion-bbcec98699-item-171f13855a": Object { "@type": "brandA/components/content/accordion/item", "repo:modifyDate": "2022-09-20T20:42:46Z", "dc:title": "When will the app be available for Android users?", }
"@type": "brandA/components/content/accordion/item"
"dc:title": "When will the app be available for Android users?"
parentId: "accordion-bbcec98699"
"repo:modifyDate": "2022-09-20T20:42:46Z"
How can I add custom property to the accordion item with "@type": "brandA/components/content/accordion/item" ?
In Page's JSON the accordion's item comes as rich text (We selected Rich Text as the Item component in authoring)


"jcr:created":"Wed Jun 15 2022 01:19:48 GMT+0000",
"jcr:lastModified":"Thu Jul 07 2022 11:42:16 GMT+0000",
"cq:panelTitle":"When will the app be available for Android users?",
"jcr:created":"Wed Jun 15 2022 05:58:49 GMT+0000",
"text":"<p>brandA is available for Android users and iPhone users! ",
"jcr:lastModified":"Tue Sep 20 2022 20:42:46 GMT+0000",

Can you please help with the above query ? 
Alternatively, Is there a way to map AEM's default schema values to custom values in Analytics ?
Here's what is available and what we require -
  1.  Available: 
    @type: "brandA/components/content/accordion/item"
    dc:title: "How do I reset my password?"
    parentId: "accordion-bbcec98699"
    repo:modifyDate: "2022-07-27T11:41:23Z"

  2. Required -
    Link Name: <description over which click was done>-accordion item title
    Component Name: <Component Name>-component title
Rohan Garg

1 Accepted Solution


Correct answer by
Community Advisor
3 Replies


Community Advisor

@arunpatidar - Thanks for the response.

I am already implementing a custom model for the accordion. I am able to add custom property to the Accordion model but not to get it for the Panel Container/item used by Accordion.

@Model(adaptables = {SlingHttpServletRequest.class}, adapters = { CustomAccordion.class },
resourceType = {CustomAccordionImpl.RESOURCE_TYPE}, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
@Exporter(name = ExporterConstants.SLING_MODEL_EXPORTER_NAME, extensions =ExporterConstants.SLING_MODEL_EXTENSION)
public class CustomAccordionImpl implements CustomAccordion {

public static final String RESOURCE_TYPE = "platform/components/content/accordion/v1/accordion";
private static final Logger log = LoggerFactory.getLogger(CustomAccordionImpl.class);

@Via(type = ResourceSuperType.class)
private Accordion accordion;

private SlingHttpServletRequest request;

private Page currentPage;

protected ComponentContext componentContext;

private ResourceResolver resolver;

public String getData() {
Resource accordionResource = this.request.getResource();

if (ComponentUtils.isDataLayerEnabled(accordionResource)) {
Map<String, Object> accordionProperties = new HashMap<String,Object>();
accordionProperties.put("@type", accordionResource.getResourceType());
accordionProperties.put("repo:modifyDate", PlatformUtils.isoDateFormat(accordion.getData().getLastModifiedDate(), dateutil));
accordionProperties.put("parentId", accordion.getData().getParentId());

//Adding New Custom Properties
accordionProperties.put("Link Name", "accordion.getData().getTitle()"+"-accordion item title");
accordionProperties.put("Component Name", accordion.getData().getId()+"-component title");

String bylineComponentID = ComponentUtils.getId(accordionResource, this.currentPage, this.componentContext);
try {
return String.format("{\"%s\":%s}",
// Use the ObjectMapper to serialize the bylineProperties to a JSON string
new ObjectMapper().writeValueAsString(accordionProperties));
} catch (JsonProcessingException e) {
log.error("Unable to generate dataLayer JSON string", e);
return null;

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




Correct answer by
Community Advisor