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!