클릭한 구성 요소를 Adobe Analytics에서 추적

WKND 홈 페이지로 이동

브라우저의 개발자 도구를 열고 콘솔 ​로 이동합니다. 다음 명령을 실행합니다.

adobeDataLayer.getState();

위 코드는 Adobe 클라이언트 데이터 레이어의 현재 상태를 반환합니다.

응답을 확장하고 button- 및 teaser-xyz-cta 항목이 접두사로 추가된 항목을 찾습니다. 다음과 같은 데이터 스키마가 표시됩니다.

단추 스키마:

button-2e6d32893a:
    @type: "wknd/components/button"
    dc:title: "View All"
    parentId: "page-2eee4f8914"
    repo:modifyDate: "2020-07-11T22:17:55Z"
    xdm:linkURL: "/content/wknd/us/en/magazine.html"

티저 스키마:

teaser-da32481ec8-cta-adf3c09db9:
    @type: "wknd/components/teaser/cta"
    dc:title: "Surf's Up"
    parentId: "teaser-da32481ec8"
    xdm:linkURL: "/content/wknd/us/en/magazine/san-diego-surf.html"

위의 데이터 세부 정보는 구성 요소/컨테이너 항목 스키마를 기반으로 합니다. 새 태그 규칙은 이 스키마를 사용합니다.

Experience Platform 로 이동하고 AEM Site와 통합된 태그 속성으로 이동합니다.

태그 속성 UI에서 규칙 섹션으로 이동한 다음 규칙 추가 ​를 클릭합니다.

규칙 이름을 클릭한 CTA ​로 지정합니다.

이벤트 > 추가 ​를 클릭하여 이벤트 구성 마법사를 엽니다.

이벤트 유형 필드에 대해 사용자 지정 코드 ​를 선택합니다.

기본 패널에서 편집기 열기 ​를 클릭하고 다음 코드 조각을 입력합니다.

var componentClickedHandler = function(evt) {
   // defensive coding to avoid a null pointer exception
   if(evt.hasOwnProperty("eventInfo") && evt.eventInfo.hasOwnProperty("path")) {
      //trigger Tag Rule and pass event
      console.debug("cmp:click event: " + evt.eventInfo.path);
      var event = {
         //include the path of the component that triggered the event
         path: evt.eventInfo.path,
         //get the state of the component that triggered the event
         component: window.adobeDataLayer.getState(evt.eventInfo.path)
      };

      //Trigger the Tag Rule, passing in the new `event` object
      // the `event` obj can now be referenced by the reserved name `event` by other Tag Property data elements
      // i.e `event.component['someKey']`
      trigger(event);
   }
}

//set the namespace to avoid a potential race condition
window.adobeDataLayer = window.adobeDataLayer || [];
//push the event listener for cmp:click into the data layer
window.adobeDataLayer.push(function (dl) {
   //add event listener for `cmp:click` and callback to the `componentClickedHandler` function
   dl.addEventListener("cmp:click", componentClickedHandler);
});

위의 코드 조각은 함수를 데이터 레이어로 푸시하여 이벤트 수신기를 추가합니다. cmp:click 이벤트가 트리거될 때마다 componentClickedHandler 함수가 호출됩니다. 이 함수에서는 몇 가지 정상 상태 검사가 추가되고 이벤트를 트리거한 구성 요소에 대한 데이터 계층의 최신 상태로 새 event 개체가 생성됩니다.

마지막으로 trigger(event) 함수가 호출됩니다. trigger() 함수는 태그 속성에서 예약된 이름이며 규칙을 트리거 ​합니다. event 개체가 매개 변수로 전달되며 태그 속성에 예약된 다른 이름으로 노출됩니다. 이제 태그 속성의 데이터 요소가 event.component['someKey']과 같은 코드 조각을 사용하여 다양한 속성을 참조할 수 있습니다.

변경 사항을 저장합니다.

작업 ​에서 추가 ​를 클릭하여 작업 구성 마법사를 엽니다.

작업 유형 필드에 대해 사용자 지정 코드 ​를 선택하세요.

기본 패널에서 편집기 열기 ​를 클릭하고 다음 코드 조각을 입력합니다.

console.debug("Component Clicked");
console.debug("Component Path: " + event.path);
console.debug("Component type: " + event.component['@type']);
console.debug("Component text: " + event.component['dc:title']);

사용자 지정 이벤트에서 호출된 trigger() 메서드에서 event 개체가 전달되었습니다. component 개체는 데이터 계층 getState() 메서드에서 파생된 구성 요소의 현재 상태이며 클릭을 트리거한 요소입니다.

변경 사항을 저장하고 태그 속성에서 빌드를 실행하여 AEM 사이트에서 사용되는 환경(으)로 코드를 승격합니다.

WKND 사이트(으)로 이동하고 개발자 도구를 열어 콘솔을 봅니다. 로그 유지 확인란도 선택하십시오.

다른 페이지로 이동하려면 티저 또는 단추 CTA 단추 중 하나를 클릭하십시오.

개발자 콘솔에서 클릭한 CTA 규칙이 실행되었는지 확인합니다.

Experience Platform 로 이동하고 AEM Site와 통합된 태그 속성으로 이동합니다.

데이터 요소 섹션으로 이동한 다음 새 데이터 요소 추가 ​를 클릭합니다.

이름 필드에 구성 요소 ID ​을(를) 입력하십시오.

데이터 요소 유형 필드에 대해 사용자 지정 코드 ​를 선택합니다.

편집기 열기 단추를 클릭하고 사용자 지정 코드 편집기에 다음을 입력합니다.

if(event && event.path && event.path.includes('.')) {
    // split on the `.` to return just the component ID
    return event.path.split('.')[1];
}

변경 사항을 저장합니다.

데이터 요소 섹션으로 이동한 다음 새 데이터 요소 추가 ​를 클릭합니다.

이름 필드에 구성 요소 제목 ​을 입력하십시오.

데이터 요소 유형 필드에 대해 사용자 지정 코드 ​를 선택합니다.

편집기 열기 단추를 클릭하고 사용자 지정 코드 편집기에 다음을 입력합니다.

if(event && event.component && event.component.hasOwnProperty('dc:title')) {
    return event.component['dc:title'];
}

변경 사항을 저장합니다.

태그 속성 UI에서 이전에 만든 클릭한 CTA 규칙으로 이동합니다.

Conditions ​에서 추가 ​를 클릭하여 Condition 구성 마법사를 엽니다.

조건 유형 필드에 대해 사용자 지정 코드 ​를 선택합니다.

편집기 열기 ​를 클릭하고 사용자 지정 코드 편집기에 다음을 입력합니다.

if(event && event.component && event.component.hasOwnProperty('@type')) {
    // console.log("Event Type: " + event.component['@type']);
    //Check for Button Type OR Teaser CTA type
    if(event.component['@type'] === 'wknd/components/button' ||
       event.component['@type'] === 'wknd/components/teaser/cta') {
        return true;
    }
}

// none of the conditions are met, return false
return false;

위의 코드는 먼저 리소스 유형이 Button ​에서 시작되었는지 또는 리소스 유형이 Teaser 내의 CTA에서 시작되었는지 확인합니다.

변경 사항을 저장합니다.

클릭한 CTA 규칙에서 코어 - 사용자 지정 코드 동작(콘솔 문)을 제거 ​합니다.

Actions 아래에 있는 추가 ​를 클릭하여 작업을 만듭니다.

Extension 유형을 Adobe Analytics(으)로 설정하고 작업 유형 ​을(를) 변수 설정(으)로 설정합니다.

eVars, Props 및 Events ​에 대해 다음 값을 설정하십시오.

• evar8 - %Component ID%
• prop8 - %Component ID%
• event8

그런 다음 더하기 아이콘을 탭하여 Adobe Analytics - 변수 설정 오른쪽에 추가 작업을 추가하십시오.

확장 유형을 Adobe Analytics(으)로 설정하고 작업 유형 ​을(를) 비콘 보내기(으)로 설정합니다.

추적 ​에서 라디오 단추를 s.tl()(으)로 설정합니다.

링크 유형 필드의 경우 사용자 지정 링크 ​를 선택하고 링크 이름 ​의 경우 값을 %Component Title%: CTA Clicked(으)로 설정합니다.

위의 구성은 데이터 요소 구성 요소 제목 ​의 동적 변수와 정적 문자열 클릭한 CTA ​을(를) 결합합니다.

변경 사항을 저장합니다. 이제 클릭한 CTA 규칙에 다음 구성이 있어야 합니다.

• 1. cmp:click 이벤트를 수신 대기합니다.
• 2. 이벤트가 Button 또는 Teaser ​에 의해 트리거되었는지 확인하십시오.
• 3. 구성 요소 ID ​를 eVar, prop 및 이벤트(으)로 추적하도록 Analytics 변수를 설정합니다.
• 4. Analytics 추적 링크 비콘을 보냅니다(하지 않음 페이지 보기로 취급).

모든 변경 사항을 저장하고 태그 라이브러리를 빌드하여 적절한 환경으로 승격합니다.

브라우저에서 WKND 사이트를 엽니다.

디버거 아이콘 을 클릭하여 Experience Platform 디버거를 엽니다.

앞에서 설명한 대로 디버거가 태그 속성을 사용자 개발 환경에 매핑하고 있으며 콘솔 로깅 ​이 선택되어 있는지 확인하십시오.

Analytics 메뉴를 열고 보고서 세트가 내 보고서 세트로 설정되어 있는지 확인하십시오.

브라우저에서 티저 또는 단추 CTA 단추 중 하나를 클릭하여 다른 페이지로 이동합니다.

Experience Platform 디버거로 돌아가서 아래로 스크롤하여 네트워크 요청 > 보고서 세트 ​를 확장합니다. eVar, prop 및 이벤트 집합을 찾을 수 있습니다.

브라우저로 돌아간 다음 개발자 콘솔을 엽니다. 사이트의 바닥글로 이동하여 탐색 링크 중 하나를 클릭합니다.

브라우저 콘솔에서 "CTA 클릭"된 규칙에 대한 "사용자 지정 코드" 메시지가 충족되지 않았습니다.

위의 메시지는 리소스 형식을 확인하는 규칙에 대한 조건 때문에 탐색 구성 요소가 cmp:click 이벤트 but ​을(를) 트리거하기 때문입니다.