AEM ACDL (Adobe Client Data Layer) tracking – Core Component

Problem Statement:

What is ACDL? How to use ACDL within AEM? How to add custom ID for component tracking

Requirement:

Enable ACDL on the project and track the events and add provide ID for component tracking instead of using auto generated HEX value

Introduction:

The Adobe Client Data Layer introduces a standard method to collect and store data about a visitors experience on a webpage and then make it easy to access this data. The Adobe Client Data Layer is platform agnostic but is fully integrated into the Core Components for use with AEM.

You can also visit the article to enable ACDL on your project, you can go through the document to understand its usage.

After enabling on the site you can see the datalayer for each component:

Enter adobeDataLayer.getState() in browser console

component datalayer

You can paste the following JS script on the console to test button clicks on the page

function bylineClickHandler(event) {
    var dataObject = window.adobeDataLayer.getState(event.eventInfo.path);
    if (dataObject != null && dataObject['@type'] === 'wknd/components/button') {  
        console.log("Component Clicked!");      
        console.log("Component Path: " + dataObject['xdm:linkURL']);        
        console.log("Component text: " + dataObject['dc:title']);
    }
}

window.adobeDataLayer.push(function (dl) {
     dl.addEventListener("cmp:click", bylineClickHandler);
});
tracking button click event

You can also change the component ID to a readable ID for tracking purposes by adding ID field details inside the component

ID field

Now you can see the readable ID added to the button component

button component with id details

You can go through the following document to track the events in Adobe Analytics

One thought on “AEM ACDL (Adobe Client Data Layer) tracking – Core Component

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s