핵심 구성 요소와 함께 Adobe 클라이언트 데이터 레이어 사용 data-layer-core-components

Adobe 클라이언트 데이터 레이어의 목표는 스크립트용 데이터 노출 및 사용을 위한 표준화된 방법을 제공하여 웹 사이트를 측정하는 수고를 줄이는 것입니다.

Adobe 클라이언트 데이터 레이어는 플랫폼에 구애받지 않지만, AEM에서 사용할 수 있도록 핵심 구성 요소에 완전히 통합되어 있습니다.

핵심 구성 요소와 마찬가지로 Adobe 클라이언트 데이터 레이어용 코드는 개발자 설명서와 함께 GitHub에서 사용할 수 있습니다. 이 문서는 핵심 구성 요소가 데이터 레이어와 상호 작용하는 방법에 대한 개요를 제공하지만 전체 기술 세부 사항은 GitHub 문서로 미루어집니다.

설치 및 활성화 installation-activation

핵심 구성 요소 릴리스 2.9.0부터 데이터 레이어는 핵심 구성 요소와 함께 AEM 클라이언트 라이브러리로 배포되고 설치할 필요가 없습니다. AEM Project Archetype v. 24+로 생성된 모든 프로젝트에는 기본적으로 활성화된 데이터 레이어가 포함됩니다.

데이터 레이어를 수동으로 활성화하려면 해당되는 컨텍스트 인식 구성을 제작해야 합니다.

지원되는 구성 요소 supported-components

다음 구성 요소는 데이터 레이어를 지원합니다.

구성 요소에 의해 트리거된 이벤트도 참조하십시오.

핵심 구성 요소 데이터 스키마 data-schemas

다음은 데이터 레이어와 함께 핵심 구성 요소가 사용하는 스키마 목록입니다.

구성 요소/컨테이너 항목 스키마 item

다음 구성 요소에서 구성 요소/컨테이너 항목 스키마를 사용합니다.

구성 요소/컨테이너 항목 스키마를 다음과 같이 정의합니다.

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
}

다음 이벤트는 구성 요소/컨테이너 항목 스키마와 관련성이 있습니다.

페이지 스키마 page

다음 구성 요소는 페이지 스키마를 사용합니다.

페이지 스키마를 다음과 같이 정의합니다.

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
}

cmp:show이벤트는 페이지 로드에서 트리거됩니다. 열기 <body> 태그 바로 아래 인라인 JavaScript에서 이 이벤트를 발송하게 되면 데이터 레이어 이벤트 큐에서 가장 빠른 이벤트가 됩니다.

컨테이너 스키마 container

다음 구성 요소는 컨테이너 스키마를 사용합니다.

컨테이너 스키마를 다음과 같이 정의합니다.

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

다음 이벤트는 컨테이너 스키마와 관련성이 있습니다.

이미지 스키마 image

다음 구성 요소는 이미지 스키마를 사용합니다.

이미지 스키마를 다음과 같이 정의합니다.

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

다음 이벤트는 이미지 스키마와 관련성이 있습니다.

에셋 스키마 asset

이미지 구성 요소 내부에서 에셋 스키마를 사용합니다.

에셋 스키마를 다음과 같이 정의합니다.

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

다음 이벤트는 에셋 스키마와 관련성이 있습니다.

콘텐츠 조각 스키마 content-fragment

콘텐츠 조각 구성 요소는 콘텐츠 조각 스키마를 사용합니다.

콘텐츠 조각 스키마를 다음과 같이 정의합니다.

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

콘텐츠 조각 요소에 사용되는 스키마는 다음과 같습니다.

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

핵심 구성 요소 이벤트 events

데이터 레이어를 통해 핵심 구성 요소가 트리거하는 여러 이벤트가 있습니다. 데이터 래이어와 인터렉션하는 가장 좋은 방법은 이벤트 리스너를 등록한 다음 이벤트 유형 및/또는 이벤트를 트리거하는 구성 요소에 따라 조치를 취하는 것입니다. 이렇게 하면 비동기 스크립트로 인한 잠재적인 경합 조건을 방지할 수 있습니다.

다음은 AEM 핵심 구성 요소에서 기본적으로 제공하는 이벤트입니다.

구성 요소에 의해 트리거된 이벤트 events-components

다음 테이블은 해당 이벤트와 함께 이벤트를 트리거하는 표준 구성 요소를 보여 줍니다.

이벤트 경로 정보 event-path-info

AEM 핵심 구성 요소에 의해 트리거된 각 데이터 레이어 이벤트에는 다음 JSON 오브젝트와 함께 페이로드가 포함됩니다.

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

<component-path>가 이벤트를 트리거한 데이터 레이어의 JSON 경로에 있는 경우. event.eventInfo.path를 통해 사용할 수 있는 값은 이벤트를 트리거한 구성 요소의 현재 상태를 검색하는 adobeDataLayer.getState(<component-path>)에 대한 매개 변수로 사용할 수 있기 때문에 중요합니다. 이로써 맞춤형 코드는 추가 데이터에 액세스하여 해당 데이터를 데이터 레이어에 추가할 수 있습니다.

예:

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);
});

튜토리얼

데이터 레이어와 핵심 구성 요소에 대해 더 자세히 살펴보시겠습니까? 이 실습형 튜토리얼을 살펴보십시오.