Customizing Adobe Client Data Layer during Adobe Analytics Implementation?
Data layer is basically a collection of all the key details of a digital property (Websites, Apps, Interactive Kiosks, etc.) in form of JavaScript object that tag management solutions utilize to collect & push data to any reporting server like Google Analytics, Adobe Analytics etc. Once implemented, you can easily reference to this data layer object to collect information like page name, transactions data and other important values. A sample data layer structure is shown below:
Data Layer is tool agnostic so that you can use any tag management solution to collect data like Google Tag manager, Telium or Ensighten. Refer to the link for further details on the data layer.
Overview
Adobe Experience Manager (AEM) is yet another platform provided by Adobe to build simple to complex websites. AEM utilizes different components like Button, Forms, Text, image along with flexible templates that anyone can utilize based on the requirements and speed up web development. You can explore all the list of components that Adobe AEM offers at this URL.
Adobe introduced Adobe client data layer (ACDL) to enable data layer for all the components used across your website and strictly available to AEM only. So, you will not be able to utilize ACDL outside AEM or any other platform you are using to develop your website.
You can look at the referenced screenshots below taken from the sample Weekend website purely built on AEM.
You can navigate to the website and open developer tool (by pressing F12 or right click on webpage and select ‘inspect’ and head over to the console tab. Type ‘adobeDataLayer’ and hit enter, you’ll see a list of data layer attributes in key-value form for all the components currently made live on the WKND website.
Problem with Adobe Client Data Layer??
There are majorly two problems that I see with using Adobe Client Data Layer (ACDL) –
1. Data layer values gets populated on data layer against every AEM components and page attributes which we might not even require to send for reporting purpose. Please look at the sample data layer structure highlighting details provided by default on Adobe Client Data Layer.
This will require us to put unnecessary efforts in figuring out the exact component that we’d want to track. Second, naming convention of the components is dynamic in nature so it might require us to put some extra code to capture the specific event which user have had interacted with.
2. Second, limited values are available out of the box on Adobe client data layer. ACDL provides only specific set of attributes into the data layer and hence, you can choose to send only those values to your analytics reporting server. If you want to capture any additional values out of the data layer, you’ll need to customize ACDL. For example, ACDL includes all the key-value pair specific to the component or page like page title, page url, component id, component name etc. but doesn’t include custom values like country, language, browser or device which can be really crucial for any marketers and businesses to capture.
How to customize ACDL on page level:
Follow below steps to customize and push additional/custom values into ACDL:
· Login to your AEM dev or local environment
· Create a sling model for the page rendering component.
· In the model, write a method that returns all the required values in a JSON format.
· Call this model in the HTML of the page rendering component using the data-sly-use attribute in a script tag.
· Then call the method that returns the JSON Object and store it in a variable, e.g. AEMDataLayer.
· The method will get called on load of any page and will populate the AEMDataLayer variable with the required values.
Steps for Customizing ACDL on components:
· To enable data layer implementation, you must enable a configuration for the same.
· The configuration node is located under conf /your-project-folder/sling:configs node and is named com.adobe.cq.wcm.core.components.internal.DataLayerConfig.
· In this node, change the “enabled” property to true.
· Create a sling model for the component for which data layer needs to be implemented.
· In this sling model, you must write a method that returns the ComponentData of that component which includes the required information for the data layer.
· The DataLayerBuilder utility is use for building the data layer which is made available by importing com.adobe.cq.wcm.core.components.models.datalayer.builder.DataLayerBuilder
· This Data layer builder utility is designed to help build valid data models for integration with Adobe Client Data Layer.
· The method will build the data layer for the component, along with an object with key specified in the withId() method.
· The withDescription(()->LANGUAGE_MESSAGE) method defines a description withing the created object, with the value stored in LANGUAGE_MESSAGE variable.
· In the above example, the created object will look like this:
“languageDropdown”:{
“dc:description”: “Language Selector”
}
· Along with withDescription(), there are multiple methods available that can be used to include the required information in the data layer, e.g.: withTitle(), withText(), withType(), etc.
· After writing this method, all you need to do is call the method in the corresponding component’s HTML code using sightly.
· Firstly, call the sling model using data-sly-use in your component as follows:
<sly data-sly-use.header=”com.medtronic.aem.medtronic.core.models.HeaderModel”>
· Then you must call the method in the required clickable element, such as anchor <a> tag or <button> tag, by adding an attribute data-cmp-data-layer as follows:
<a data-cmp-data-layer=”${header. languageData.json}></a>
· Once this is done, the required values will be added to adobeDataLayer on click of the element. The values will look like this:
Closing Thoughts
Adobe did an amazing job in making the data layer implementation even easier and out of the box. However, I do feel there will be AEM developer’s involvement required to successfully customize the ACDL. However, it’s up to the individual to decide whether they’d want to do any customizations at all or comfortable with whatever values readily made available on the console by ACDL. Customizations requires dev team to be involved to a certain extent but make the job easy for implementation person to a great extent. Overall, this approach is likely to reduce the burden of implementation person in writing custom JS script to capture values out of the web page. This could also result in speeding up the implementation process by 30–40% faster.
References
