Extending the Adobe Client Data Layer
CREATED FOR:
- Developer
- Admin
You can extend the Core Components with custom dialog options that allow content authors to enter additional information related to the Data Layer.
To include these fields in the Data Layer that is provided by the Core Components, you must extend the model of the component that implements its own specific data layer methods.
Example: Title Component
A Core Component like the Title component extends Component which has a getData
method that by default returns ComponentData
.
ComponentData
serializes pre-defined fields that your component may implement, like getDataLayerLinkUrl
and getDataLayerTitle
for the TitleImpl
.
Therefore, your custom Sling model might have a getData
method that returns an object that extends ComponentData
to return more fields.
Doing this, will add a data-cmp-data-layer
attribute to the HTML element of your component with the JSON of the data that will be populated to the data layer. At this point, you can implement scripts that listen to this data or to related events.
Experience Manager
- Core Components Introduction
- Responsive Design
- Paths to Success
- Component Library
- Versions
- Get Started
- The WCM Components
- Accordion
- Breadcrumb
- Button
- Carousel
- Container
- Content Fragment
- Content Fragment List
- Download
- Embed
- Experience Fragment
- Image
- Language Navigation
- List
- Navigation
- Page
- PDF Viewer
- Progress Bar
- Quick Search
- Separator
- Social Media Sharing
- Table of Contents
- Text
- Tabs
- Teaser
- Title
- Form Components
- v1 Components
- v2 Components
- v3 Components
- Email Components
- Adaptive Forms
- Introduction
- Version History
- Adaptive Forms Components
- Adaptive Forms Accordion
- Adaptive Forms Button
- Adaptive Forms Checkbox
- Adaptive Forms Checkbox Group
- Adaptive Forms Container
- Adaptive Forms Date Picker
- Adaptive Forms Drop-down List
- Adaptive Forms Email
- Adaptive Forms Form Fragment
- Adaptive Forms File Attachments
- Adaptive Forms Vertical Tabs
- Adaptive Forms hCaptcha
- Adaptive Forms Horizontal Tabs
- Adaptive Forms Image
- Adaptive Forms Numeric Box
- Adaptive Forms Panel
- Adaptive Forms CAPTCHA
- Adaptive Forms Radio Button
- Adaptive Forms Reset Button
- Adaptive Forms Submit Button
- Adaptive Forms Switch
- Adaptive Forms Phone
- Adaptive Forms Text
- Adaptive Forms Text Box
- Adaptive Forms Form Title
- Adaptive Forms Wizard
- Adaptive Forms Terms and Conditions
- Header
- Footer
- Customize Adaptive Forms Core Components
- Sample themes and templates
- Developing
- Developing Core Components
- Paths to Success
- WKND Developer Tutorial
- Customizing Core Components
- Component Guidelines
- AMP Support
- Context-Aware Configurations
- Including Client Libraries
- The Adaptive Image Servlet
- Web-Optimized Image Delivery
- Remote Assets Support
- Adobe Client Data Layer
- AEM Project Archetype