Extending the Adobe Client Data Layer

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.

TIP

To further explore the flexibility of the Data Layer, review about the integration options including how to enable the Data Layer for your custom components.

On this page

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now