Lecture Notes: Tracking Data with Adobe Client Data Layer

Introduction

• Speakers: Jean-Christophe Kauzman (Software Engineer, Adobe), Laurentiu (Software Engineer, Commerce Team), Ben (Consultant and Expert in Adobe Experience Platform)
• Topic: Adobe Client Data Layer

Agenda

1. Overview of Adobe Client Data Layer
2. Integration with AEM Core Components
3. Integration with Custom Components
4. Integration with Adobe Launch and Adobe Analytics

Adobe Client Data Layer

Overview

• Purpose: A client-side store for collecting and communicating data to analytics platforms like Adobe Analytics.
• Functions:
  • Registering data
  • Triggering events
  • Retrieving current state
  • Registering event listeners

Implementation

• Loading Script: Include script tag with async attribute to ensure it loads after other scripts.
• Data Entry: Use JavaScript push method to add data (e.g., page title, events).
• Event Handling: Use functions and listeners to handle data changes and events.
  • Events of interest: adobe.data.change event and adobe.data.event.

Integration with AEM Core Components

Core Components

• Purpose: Provide out-of-the-box data layer integration.
• Data Collection: Each component generates data pushed into the data layer upon page load.
• Non-data Components: E.g., separators.

JSON Data Structure

• Rendered in a data HTML attribute.
• Pushed into data layer using common client library.
• Events like cmp:loaded notify availability of data.

Custom Events

• Mark clickable elements for event handling using cmp-clickable attribute.
• Use unique IDs for components in HTML for tracking.

Integration with Custom Components

Custom Component Integration

• Define properties to be tracked.
• Implement ComponentData interface from core components bundle.
• Generate JSON structure in HTML element with unique ID and data attributes.

Event Handling

• Custom events for interactions like animations.

Integration with Adobe Launch and Adobe Analytics

Adobe Launch

• Tag manager for managing data layer interactions.
• Features:
  • Rename default object
  • Inject data layer library if not present
  • Listen to data layer pushes

Adobe Analytics

• Track page load and asynchronous events.
• Set up rules in Adobe Launch for tracking events.
  • Event message components: message, before state, after state.

Use Cases and Examples

• Demonstrations of page load and stock price update events.
• Interaction with Adobe Analytics for tracking.
• Flexibility with integration to other analytics platforms.

Q&A Highlights

• Naming conventions for page keys and IDs.
• Handling asynchronous component loading.
• Custom event tracking beyond default click events.

Conclusion

• Encouragement for unique business requirement considerations.
• Future availability of Adobe Client Data Layer features.

---

These notes provide a structured overview of the Adobe Client Data Layer as discussed in the session, capturing the main points and examples of application.