AEM Sites 및 Adobe Analytics 통합

Experience Platform에 로그인하고 Tag 속성을 만듭니다(아직 만들지 않은 경우).

초기 태그 JavaScript 라이브러리가 만들어졌는지 그리고 태그 환경(으)로 승격되었는지 확인하십시오.

라이브러리가 게시된 태그 환경에서 JavaScript 포함 코드를 복사합니다.

브라우저에서 새 탭을 열고 WKND 사이트로 이동합니다.

Experience Platform 디버거 브라우저 확장 열기

Experience Platform 태그 > 구성(으)로 이동하고 삽입된 포함 코드 ​에서 기존 포함 코드를 3단계에서 복사한 사용자 포함 코드로 바꿉니다.

WKND 탭에서 디버거를 콘솔 로깅 및 잠금 ​합니다.

WKND 사이트로 이동합니다.

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

adobeDataLayer.getState();

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

응답을 확장하고 page 항목을 검사합니다. 다음과 같은 데이터 스키마가 표시됩니다.

page-2eee4f8914:
    @type: "wknd/components/page"
    dc:description: WKND is a collective of outdoors, music, crafts, adventure sports, and travel enthusiasts that want to share our experiences, connections, and expertise with the world.
    dc:title: "WKND Adventures and Travel"
    repo:modifyDate: "2020-08-31T21:02:21Z"
    repo:path: "/content/wknd/us/en.html"
    xdm:language: "en-US"
    xdm:tags: ["Attract"]
    xdm:template: "/conf/wknd/settings/wcm/templates/landing-page-template"

Adobe Analytics으로 페이지 데이터를 보내려면 데이터 레이어의 dc:title, xdm:language 및 xdm:template과(와) 같은 표준 속성을 사용하겠습니다.

자세한 내용은 핵심 구성 요소 데이터 스키마에서 페이지 스키마를 검토하십시오.

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

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

규칙 이름을 로드된 페이지 ​로 지정합니다.

이벤트 하위 섹션에서 추가 ​를 클릭하여 이벤트 구성 마법사를 엽니다.

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

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

var pageShownEventHandler = function(evt) {
   // defensive coding to avoid a null pointer exception
   if(evt.hasOwnProperty("eventInfo") && evt.eventInfo.hasOwnProperty("path")) {
      //trigger the Tag Rule and pass event
      console.log("cmp:show 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 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:show into the data layer
window.adobeDataLayer.push(function (dl) {
   //add event listener for `cmp:show` and callback to the `pageShownEventHandler` function
   dl.addEventListener("cmp:show", pageShownEventHandler);
});

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

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

변경 사항을 저장합니다.

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

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

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

console.log("Page Loaded ");
console.log("Page name: " + event.component['dc:title']);
console.log("Page type: " + event.component['@type']);
console.log("Page template: " + event.component['xdm:template']);

사용자 지정 이벤트에서 호출된 trigger() 메서드에서 event 개체가 전달되었습니다. 여기서 component은(는) 사용자 지정 이벤트의 데이터 레이어 getState에서 파생된 현재 페이지입니다.

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

AEM 사이트로 이동하고 개발자 도구를 열어 콘솔을 확인합니다. 페이지를 새로 고치면 콘솔 메시지가 기록되었음을 알 수 있습니다.

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

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

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

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

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

if(event && event.component && event.component.hasOwnProperty('@type')) {
    return event.component['@type'];
}

변경 사항을 저장합니다.

데이터 요소 추가 단추를 클릭합니다.

이름 필드에 페이지 이름 ​을 입력하십시오.

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

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

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

변경 사항을 저장합니다.

데이터 요소 추가 단추를 클릭합니다.

이름 필드에 페이지 템플릿 ​을 입력하십시오.

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

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

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

변경 사항을 저장합니다.

이제 규칙의 일부로 3개의 데이터 요소가 있어야 합니다.

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

확장 > 카탈로그(으)로 이동

Adobe Analytics 확장을 찾아 설치 ​를 클릭합니다.

라이브러리 관리 > 보고서 세트 ​에서 각 태그 환경에 사용할 보고서 세트 ID를 입력합니다.

Activity Map 사용 ​을 사용하도록 설정하려면 확인란을 선택하세요.

일반 > 추적 서버 ​에서 추적 서버(예: tmd.sc.omtrdc.net)를 입력하십시오. 사이트가 https://을(를) 지원하는 경우 SSL 추적 서버를 입력합니다.

변경 내용을 저장하려면 저장 ​을 클릭하세요.

태그 속성 UI에서 이전에 만든 로드된 페이지 규칙으로 이동합니다.

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

조건 유형 필드에 대해 값 비교 옵션을 선택하십시오.

양식 필드의 첫 번째 값을 %Component Resource Type%(으)로 설정합니다. 데이터 요소 아이콘 을 사용하여 구성 요소 리소스 유형 데이터 요소를 선택할 수 있습니다. 비교기를 Equals(으)로 설정된 상태로 둡니다.

두 번째 값을 wknd/components/page(으)로 설정합니다.

변경 사항을 저장합니다.

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

작업 하위 섹션에서 추가 ​를 클릭하여 새 작업을 추가합니다.

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

기본 패널에서 사용 가능한 eVar ​을(를) 선택하고 데이터 요소 페이지 템플릿 ​의 값으로 설정합니다. 데이터 요소 아이콘 을(를) 사용하여 페이지 템플릿 요소를 선택합니다.

아래로 스크롤하여 추가 설정 ​에서 페이지 이름 ​을(를) 데이터 요소 페이지 이름(으)로 설정합니다.

변경 사항을 저장합니다.

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

확장 유형을 Adobe Analytics(으)로 설정하고 작업 유형 ​을(를) 비콘 보내기(으)로 설정합니다. 이 작업은 페이지 보기로 간주되므로 기본 추적을 s.t()(으)로 설정합니다.

변경 사항을 저장합니다. 이제 로드된 페이지 규칙에 다음 구성이 있어야 합니다.

• 1. cmp:show 이벤트를 수신 대기합니다.
• 2. 페이지에서 이벤트가 트리거되었는지 확인합니다.
• 3. 페이지 이름 및 페이지 템플릿 ​에 대해 Analytics 변수를 설정합니다.
• 4. Analytics 페이지 보기 비콘 보내기

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

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

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

앞에서 설명한 대로 Debugger가 태그 속성을 사용자 개발 환경에 매핑하고 콘솔 로깅 ​을 선택했는지 확인하십시오.

Analytics 메뉴를 열고 보고서 세트가 내 보고서 세트로 설정되어 있는지 확인하십시오. 페이지 이름도 채워야 합니다.

아래로 스크롤하여 네트워크 요청 ​을 확장합니다. 페이지 템플릿 ​에 대해 설정된 evar ​을(를) 찾을 수 있습니다.

브라우저로 돌아간 다음 개발자 콘솔을 엽니다. 페이지 상단의 회전 ​을(를) 클릭합니다.

브라우저 콘솔에서 콘솔 문을 관찰합니다.

구성 요소 리소스 유형 ​을(를) 확인했기 때문에 회전판에서 cmp:show 이벤트 but ​을(를) 트리거하기 때문에 이벤트가 실행되지 않습니다.

호주 서부와 같은 문서 페이지로 이동합니다. 페이지 이름 및 템플릿 유형이 변경되었는지 확인합니다.