Adobe Client Data Layer:
Track your visitor data
Jean-Christophe Kautzmann
Laurentiu Magureanu
Benedikt Wedenik
Who are we?
Jean-Christophe Kautzmann Laurentiu Magureanu Benedikt Wedenik
Sr. Software Engineer Software Engineer Senior Consultant
Adobe AEM Sites Adobe AEM CIF Cloud Expert
©2021 Adobe. All Rights Reserved. Adobe Confidential.
Agenda
§ The Adobe Client Data Layer
§ Integration with the AEM Core Components
§ Integration with custom components
§ Integration with Adobe Launch
§ Q&A
©2021 Adobe. All Rights Reserved. Adobe Confidential.
The Adobe Client Data Layer
What is a data layer?
A data layer consists of a JavaScript client-side event-driven data store that can be used on web pages:
§ to collect data about what the visitors experience on the web page;
§ to communicate this data to digital analytics and reporting servers.
©2021 Adobe. All Rights Reserved. Adobe Confidential.
What does the Adobe Client Data Layer do?
The Adobe Client Data Layer is a JavaScript store for data and events happening on a page within the
scope of a request. It provides an API to:
§ Register data that is to be merged into the data layer state.
§ Trigger events that relate to the data stored in the data layer.
§ Get the current data layer state of all merged data.
§ Register listeners that are called for specific events or data changes.
©2021 Adobe. All Rights Reserved. Adobe Confidential.
Getting the Data Layer ready
§ Loading the data layer script:
§ Declaring the adobeDataLayer array:
©2021 Adobe. All Rights Reserved. Adobe Confidential.
adobeDataLayer.push()
§ Pushing a Data Object:
§ Pushing an Event Object:
©2021 Adobe. All Rights Reserved. Adobe Confidential.
adobeDataLayer.push()
§ Pushing an Object to Delete Data:
©2021 Adobe. All Rights Reserved. Adobe Confidential.
adobeDataLayer.push()
§ Pushing a Function:
©2021 Adobe. All Rights Reserved. Adobe Confidential.
adobeDataLayer.getState()
§ Getting the merged state:
§ Console output:
©2021 Adobe. All Rights Reserved. Adobe Confidential.
adobeDataLayer.getState()
§ Getting the merged state of a specific part:
§ Console output:
©2021 Adobe. All Rights Reserved. Adobe Confidential.
adobeDataLayer.addEventListener()
§ Registering an Event Listener: § Console output:
©2021 Adobe. All Rights Reserved. Adobe Confidential.
adobeDataLayer.removeEventListener()
§ Unregistering all listeners for the adobeDataLayer:change event:
§ Unregistering a specific listener for the click event:
©2021 Adobe. All Rights Reserved. Adobe Confidential.
Contributions welcome!
Feel free to contribute to the ACDL project (questions, issues, PRs, feedback, …):
https://github.com/adobe/adobe-client-data-layer
©2021 Adobe. All Rights Reserved. Adobe Confidential.
Integration with the AEM Core
Components
Populating the data layer
§ Each component generates its state as JSON
§ The HTL scripts of the component renders that JSON as data-attribute
§ A JS utility will capture all the generated data and push it to DL
§ The same JS utility will add event handlers for click events
§ Special components (e.g.: Accordion) will push custom events (show, hide)
©2021 Adobe. All Rights Reserved. Adobe Confidential.
Generating component data
§ Component interface has a getData method
©2021 Adobe. All Rights Reserved. Adobe Confidential.
Generating component data
§ The AbstractComponent implementation relies on calling getComponentData
©2021 Adobe. All Rights Reserved. Adobe Confidential.
Generating component data
§ Each component can override getComponentData to customize the output
§ The customization is done using the DataLayerBuilder utilities
©2021 Adobe. All Rights Reserved. Adobe Confidential.
Generating component data
§ The HTL script renders the ID and component data JSON
§ If the component is clickable it renders a data-cmp-clickable
©2021 Adobe. All Rights Reserved. Adobe Confidential.
Generating component data
§ The javascript utility will push component data
§ The javascript utility registers click event handler
©2021 Adobe. All Rights Reserved. Adobe Confidential.
Enabling Data Layer integration
The Adobe Client Data Layer is disabled by default. To enable it:
§ Create a sling config under /conf/<my-site>/sling:configs/com.adobe.cq.wcm.core.components.internal.DataLayerConfig.
§ Add the enabled boolean property and set it to true.
§ Add a sling:configRef property to the jcr:content node of your site.
©2021 Adobe. All Rights Reserved. Adobe Confidential.
Integration with Custom Components
Using existing integration
To automatically add a custom component to the data layer:
§ Define the properties of the custom component model that needs to be tracked.
§ Add a component ID to the the custom component HTL.
§ Add the data-cmp-data-layer attribute to the custom component HTL.
§ Generate the JSON data structure in your model using the DataLayerBuilder utility
©2021 Adobe. All Rights Reserved. Adobe Confidential.
Custom component model
©2021 Adobe. All Rights Reserved. Adobe Confidential.
Custom HTL data generation
©2021 Adobe. All Rights Reserved. Adobe Confidential.
Data Layer Events for Custom Components
To leverage existing integration for events:
§ In the custom component HTL add the data-cmp-clickable attribute to the element to be tracked.
§ Make sure the component HTL has an ID on the top DOM element.
Custom events (show, hide, etc) should be triggered by component clientlibs
©2021 Adobe. All Rights Reserved. Adobe Confidential.
Integration with Adobe
Launch
ACDL Launch Extension – Features
§ Loading & injecting of the ACDL JavaScript library.
§ Listening to Data Layer push events.
§ Retrieving the Computed State of the Data Layer.
§ Retrieving a specific element from the Data Layer by path.
§ Pushing data & events into the adobeDataLayer object.
§ Renaming and resetting / compacting the adobeDataLayer object.
©2021 Adobe. All Rights Reserved. Adobe Confidential.
Live Demo
ACDL Launch Extension – Installation
To install the Adobe Client Data Layer Extension, navigate to the Extension catalogue in Launch
Extension and select the Adobe Client Data Layer.
©2021 Adobe. All Rights Reserved. Adobe Confidential.
Resources
§ Adobe Client Data Layer:
https://github.com/adobe/adobe-client-data-layer
§ Integration with the Core Components:
https://github.com/adobe/aem-core-wcm-components/blob/master/DATA_LAYER_INTEGRATION.md
§ ACDL Launch Extension:
https://exchange.adobe.com/experiencecloud.details.104231.adobe-client-data-layer.html
§ Collect page data with Adobe Analytics:
https://docs.adobe.com/content/help/en/experience-manager-learn/sites/integrations/analytics/collect-
data-analytics.html
©2021 Adobe. All Rights Reserved. Adobe Confidential.
Q&A
Thank You!
