AEM 코어 구성 요소와 함께 Adobe 클라이언트 데이터 레이어 사용

Adobe 클라이언트 데이터 레이어는 웹 페이지에서 방문자 경험에 대한 데이터를 수집 및 저장한 다음 이 데이터에 쉽게 액세스할 수 있는 표준 방법을 제공합니다. Adobe 클라이언트 데이터 레이어는 플랫폼에 관계 없지만, AEM과 함께 사용하기 위해 핵심 구성 요소에 완벽하게 통합됩니다.

노트

AEM 사이트에서 Adobe 클라이언트 데이터 레이어를 활성화하시겠습니까? 이 지침을 참조하십시오.

데이터 레이어 살펴보기

브라우저의 개발자 도구와 실시간 WKND 참조 사이트를 사용하기만 하면 Adobe 클라이언트 데이터 레이어의 내장 기능에 대한 아이디어를 얻을 수 있습니다.

노트

Chrome 브라우저에서 촬영한 아래 스크린샷.

  1. https://wknd.site로 이동합니다.

  2. 개발자 도구를 열고 콘솔​에 다음 명령을 입력합니다.

    window.adobeDataLayer.getState();
    

    Inspect은 AEM 사이트에서 데이터 레이어의 현재 상태를 확인하는 응답입니다. 페이지 및 개별 구성 요소에 대한 정보가 표시됩니다.

    Adobe 데이터 레이어 응답

  3. 콘솔에서 다음을 입력하여 데이터 개체를 데이터 레이어로 푸시합니다.

    window.adobeDataLayer.push({
        "component": {
            "training-data": {
                "title": "Learn More",
                "link": "learn-more.html"
            }
        }
    });
    
  4. adobeDataLayer.getState() 명령을 다시 실행하고 training-data에 대한 항목을 찾습니다.

  5. 다음으로 경로 매개 변수를 추가하여 구성 요소의 특정 상태만 반환합니다.

    window.adobeDataLayer.getState('component.training-data');
    

    단일 구성 요소 데이터 항목만 반환

이벤트 작업

데이터 레이어의 이벤트를 기반으로 사용자 지정 코드를 트리거하는 것이 가장 좋습니다. 다음으로, 다양한 이벤트 등록 및 의견 수렴을 살펴보십시오.

  1. 콘솔에서 다음 도우미 메서드를 입력합니다.

    function getDataObjectHelper(event, filter) {
        if (event.hasOwnProperty("eventInfo") && event.eventInfo.hasOwnProperty("path")) {
            var dataObject = window.adobeDataLayer.getState(event.eventInfo.path);
            if (dataObject != null) {
                for (var property in filter) {
                    if (!dataObject.hasOwnProperty(property) || (filter[property] !== null && filter[property] !== dataObject[property])) {
                        return;
                    }
                    return dataObject;
                }
            }
        }
        return;
    }
    

    위의 코드는 event 객체를 검사하고 adobeDataLayer.getState 메서드를 사용하여 이벤트를 트리거한 객체의 현재 상태를 가져옵니다. 그러면 도우미 메서드는 filter 기준을 검사하며 현재 dataObject이(가) 필터를 충족하는 경우에만 필터를 반환합니다.

    주의

    이 연습 동안 브라우저를 새로 고치는 것은 이 아닌​이어야 합니다. 그렇지 않으면 콘솔 JavaScript가 손실됩니다.

  2. 다음으로 Carousel 내에 Teaser 구성 요소가 표시될 때 호출할 이벤트 핸들러를 입력합니다.

    function teaserShownHandler(event) {
        var dataObject = getDataObjectHelper(event, {"@type": "wknd/components/teaser"});
        if(dataObject != null) {
            console.log("Teaser Shown: " + dataObject['dc:title']);
            console.log(dataObject);
        }
    }
    

    teaserShownHandlergetDataObjectHelper 메서드를 호출하고 wknd/components/teaser 필터를 @type 필터로 전달하여 다른 구성 요소에 의해 트리거되는 이벤트를 필터링합니다.

  3. 그런 다음 이벤트 리스너를 데이터 레이어에 푸시하여 cmp:show 이벤트를 수신합니다.

    window.adobeDataLayer.push(function (dl) {
         dl.addEventListener("cmp:show", teaserShownHandler);
    });
    

    cmp:show 이벤트는 캐러셀​에 새 슬라이드가 표시되거나 Tab 구성 요소에서 새 탭이 선택되었을 때와 같이 여러 가지 구성 요소에 의해 트리거됩니다.

  4. 페이지에서 회전판 슬라이드를 전환하고 콘솔 문을 확인합니다.

    회전 메뉴 전환 및 이벤트 리스너 보기

  5. 데이터 레이어에서 이벤트 리스너를 제거하여 cmp:show 이벤트에 대한 의견 수렴을 중지합니다.

    window.adobeDataLayer = window.adobeDataLayer || [];
    window.adobeDataLayer.push(function(dl) {
        dl.removeEventListener("cmp:show", teaserShownHandler);
    });
    
  6. 페이지로 돌아가서 캐러셀 슬라이드를 전환합니다. 더 이상의 진술이 기록되지 않고 이벤트가 경청되지 않는다는 것을 확인합니다.

  7. 다음으로, 페이지 표시 이벤트가 트리거될 때 호출할 이벤트 핸들러를 입력합니다.

    function pageShownHandler(event) {
        var dataObject = getDataObjectHelper(event, {"@type": "wknd/components/page"});
        if(dataObject != null) {
            console.log("Page Shown: " + dataObject['dc:title']);
            console.log(dataObject);
        }
    }
    

    리소스 유형 wknd/components/page은(는) 이벤트를 필터링하는 데 사용됩니다.

  8. 그런 다음 이벤트 리스너를 데이터 레이어로 푸시하여 cmp:show 이벤트를 수신하고 pageShownHandler 이벤트를 호출합니다.

    window.adobeDataLayer = window.adobeDataLayer || [];
    window.adobeDataLayer.push(function (dl) {
         dl.addEventListener("cmp:show", pageShownHandler);
    });
    
  9. 페이지 데이터로 실행된 콘솔 문을 즉시 볼 수 있습니다.

    페이지 데이터 표시

    페이지에 대한 cmp:show 이벤트는 페이지의 맨 위에 있는 각 페이지 로드 시 트리거됩니다. 페이지가 확실히 로드되었을 때 이벤트 핸들러가 트리거된 이유는 무엇입니까?

    이 기능은 Adobe 클라이언트 데이터 레이어의 고유한 기능 중 하나입니다. 이 기능은 데이터 레이어가 초기화된 후 또는​에 이벤트 리스너 을 등록할 수 있습니다. 이것은 경주 상황을 피하기 위한 중요한 특징이다.

    데이터 레이어는 시퀀스에서 발생한 모든 이벤트의 큐 배열을 유지합니다. 기본적으로 데이터 레이어는 future​의 이벤트는 물론 과거​에서 발생한 이벤트에 대한 이벤트 콜백을 트리거합니다. 이벤트를 과거 또는 미래의 이벤트로 필터링할 수 있습니다. 자세한 내용은 설명서를 참조하십시오.

다음 단계

이벤트 기반 Adobe 클라이언트 데이터 레이어를 사용하여 페이지 데이터를 수집하고 Adobe Analytics로 전송하는 방법을 알아보려면 다음 자습서를 확인하십시오.

또는 AEM 구성 요소를 사용하여 Adobe 클라이언트 데이터 레이어를 사용자 지정하는 방법

추가 리소스

이 페이지에서는