Supported Components

The following components support the Data Layer.

Also refer to the events triggered by the components.

Core Components Data Schemas

The following is a list of schemas that the Core Components use with the Data Layer.

Component/Container Item Schema

The Component/Container Item schema is used in the following components:

The Component/Container Item schema is defined as follows.

id: {                   // component ID
    @type               // resource type
    repo:modifyDate     // last modified date
    dc:title            // title
    dc:description      // description
    xdm:text            // text
    xdm:linkURL         // link URL
    parentId            // parent component ID
}

The following event is relevant to the Component/Container Item schema:

  • cmp:click

Page Schema

The Page schema is used by the following component:

The Page schema is defined as follows.

id: {
    @type
    repo:modifyDate
    dc:title
    dc:description
    xdm:text
    xdm:linkURL
    parentId
    xdm:tags            // page tags
    repo:path           // page path
    xdm:template        // page template
    xdm:language        // page language
}

A cmp:show event is triggered on page load. This event is dispatched from in-line JavaScript immediately beneath the opening <body> tag, making it the earliest event in the Data Layer event queue.

Container Schema

The Container schema is used by the following components:

The Container schema is defined as follows.

id: {
    @type
    repo:modifyDate
    dc:title
    dc:description
    xdm:text
    xdm:linkURL
    parentId
    shownItems          // array of the displayed item IDs
}

The following events are relevant to the Container schema:

  • cmp:click
  • cmp:show
  • cmp:hide

Image Schema

The Image schema is used by the following component:

The Image schema is defined as follows.

id: {
    @type
    repo:modifyDate
    dc:title
    dc:description
    xdm:text
    xdm:linkURL
    parentId
    image               // asset detail (see below section)
}

The following event is relevant to the Image schema:

  • cmp:click

Asset Schema

The Asset schema is used inside the Image component.

The Asset schema is defined as follows.

id: {
    repo:id             // asset UUID
    repo:path           // asset path
    @type               // asset resource type
    xdm:tags            // asset tags
    repo:modifyDate
}

The following event is relevant to the Asset schema:

  • cmp:click

Content Fragment Schema

The Content Fragment schema is used by the Content Fragment component.

The Content Fragment schema is defined as follows.

id: {
    @type
    repo:modifyDate
    dc:title
    dc:description
    xdm:text
    xdm:linkURL
    parentId
    elements            // array of the Content Fragment elements
}

The schema used for the Content Fragment element is as follows.

{
    xdm:title           // title
    xdm:text            // text
}

Core Component Events

There are a number of events that Core Components trigger via the Data Layer. The best practice for interacting with the Data Layer is to register an event listener and then take an action based on the event type and/or component that triggered the event. This will avoid potential race conditions with asynchronous scripts.

Below are the out of the box events provided by AEM Core Components:

  • cmp:click - Clicking a clickable element (an element that has a data-cmp-clickable attribute) causes the data layer to trigger a cmp:click event.
  • cmp:show and cmp:hide - Manipulating the accordion (expand/collapse), the carousel (next/previous buttons), and the tabs (tab select) components causes the data layer to trigger cmp:show and a cmp:hide events respectively. A cmp:show event is also dispatched on page load and is expected to be the first event.
  • cmp:loaded - As soon as the Data Layer is populated with the Core Components on the page, the Data Layer triggers a cmp:loaded event.

Events Triggered by Component

The following tables list the standard Core Components that trigger events along with those events.

ComponentEvent(s)
Accordioncmp:show and cmp:hide
Buttoncmp:click
Breadcrumbcmp:click
Carouselcmp:show and cmp:hide
Language Navigationcmp:click
Navigationcmp:click
Pagecmp:show
Tabscmp:show and cmp:hide
Teasercmp:click

Event Path Info

Each Data Layer event that is triggered by an AEM Core Component will include a payload with the following JSON object:

eventInfo: {
    path: '<component-path>'
}

Where <component-path> is the JSON path to the component in the Data Layer that triggered the event. The value, available via event.eventInfo.path, is important as it can be used as a parameter to adobeDataLayer.getState(<component-path>) which retrieves the current state of the component that triggered the event, allowing custom code to access additional data and add it to the Data Layer.

For example:


function logEventObject(event) {
    if(event.hasOwnProperty("eventInfo") && event.eventInfo.hasOwnProperty("path")) {
        var dataObject = window.adobeDataLayer.getState(event.eventInfo.path);
        console.debug("The component that triggered this event: ");
        console.log(dataObject);
    }
}

window.adobeDataLayer = window.adobeDataLayer || [];
window.adobeDataLayer.push(function (dl) {
     dl.addEventListener("cmp:show", logEventObject);
});

Tutorial

Want to explore the Data Layer and Core Components in more detail? Check out this hands-on tutorial.

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.
Previous pageRemote Assets Support
Next pageIntegrations with the Data Layer

Experience Manager