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
SOLVED

Customize Adobe Client Data Layer for Accordion Component

Avatar

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 -
Rohan_Garg_0-1664449657664.png

 

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)

"accordion_copy_copy_":{

"jcr:primaryType":"nt:unstructured",
"iconExpand":"icon-plus",
"jcr:created":"Wed Jun 15 2022 01:19:48 GMT+0000",
"jcr:lastModified":"Thu Jul 07 2022 11:42:16 GMT+0000",
"iconCollapse":"icon-minus",
"expandedItems":[
"richtext"
],
"singleExpansion":"true",
"sling:resourceType":"brandA/components/content/accordion",
"richtext_1084009683":{
"jcr:primaryType":"nt:unstructured",
"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",
"sling:resourceType":"brandA/components/content/richtext",
"textIsRich":"true"
}
}

 
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: 
    accordion-bbcec98699-item-eedf5f3c7a:
    @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
 
Thanks,
Rohan Garg
 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor
3 Replies

Avatar

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);

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

@Self
private SlingHttpServletRequest request;

@ScriptVariable
private Page currentPage;

@ScriptVariable
protected ComponentContext componentContext;

@ScriptVariable
private ResourceResolver resolver;

@Override
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}",
bylineComponentID,
// 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 ?

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

 

Avatar

Correct answer by
Community Advisor