Customize Adobe Client Data Layer for Accordion Component

[Rohan_Garg]

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

"Link Name": "null-accordion item 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)

"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 ? 

@arunpatidar , @Jörg_Hoh , @lukasz-m, @Mohit_KBansal

Alternatively, Is there a way to map AEM's default schema values to custom values in Analytics ?

@Jennifer_Dungan, @yuhuisg, @Pablo_Childe, @Asheesh_Pandey, @Andrey_Osadchuk 

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

[arunpatidar]

Please check https://github.com/adobe/aem-core-wcm-components/blob/main/DATA_LAYER_INTEGRATION.md#enabling-the-da... 

you need to extend the Model

[Rohan_Garg]

@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}"

[arunpatidar · Accepted solution]

Please check implementation here

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