AEM Sites 및 Adobe Analytics 통합

Experience Platform 및 태그 속성 만들기 (아직 수행하지 않았다면).

초기 태그 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 개체는 매개 변수로 전달되며, 결과적으로 tag 속성의 예약된 다른 이름에 의해 노출됩니다. 이제 태그 속성의 데이터 요소는 와 같은 코드 조각을 사용하여 다양한 속성을 참조할 수 있습니다 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']);

다음 event 에서 개체가 전달됩니다. trigger() 메서드가 사용자 지정 이벤트에서 호출되었습니다. 여기, 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. 사이트가 를 지원하는 경우 SSL 추적 서버를 입력합니다. https://

클릭 저장 변경 내용을 저장합니다.

Tag Property UI에서 페이지 로드됨 규칙이 이전에 만들어졌습니다.

아래 조건 클릭 추가 을(를) 열려면 조건 구성 마법사.

대상 조건 유형 필드, 선택 값 비교 옵션을 선택합니다.

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

두 번째 값을 다음으로 설정 wknd/components/page.

변경 사항을 저장합니다.

페이지 로드 규칙에서, 제거 다음 코어 - 사용자 지정 코드 작업(console 문):

작업 하위 섹션에서 추가 새 작업을 추가합니다.

설정 확장 입력 대상 Adobe Analytics 및 설정 작업 유형 끝 변수 설정

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

아래로 스크롤합니다. 추가 설정 set 페이지 이름 데이터 요소에 페이지 이름:

변경 사항을 저장합니다.

그런 다음 의 오른쪽에 추가 작업을 추가합니다. Adobe Analytics - 변수 설정 을 탭하여 플러스 아이콘:

설정 확장 입력 대상 Adobe Analytics 및 설정 작업 유형 끝 비콘 보내기. 이 작업은 페이지 보기로 간주되므로 기본 추적을 (으)로 설정된 상태로 둡니다. s.t().

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

• 1. 다음을 들어보십시오. cmp:show 이벤트.
• 2. 이벤트가 페이지에 의해 트리거되었는지 확인합니다.
• 3. 다음에 대한 Analytics 변수 설정 페이지 이름 및 페이지 템플릿
• 4. Analytics 페이지 보기 비콘 보내기

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

를 엽니다. WKND 사이트 을 클릭합니다.

Debugger 아이콘 클릭 Experience Platform 디버거를 엽니다.

디버거가 태그 속성을 다음에 매핑하는지 확인합니다. 본인 앞에서 설명한 개발 환경 및 콘솔 로깅 이(가) 선택되었습니다.

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

아래로 스크롤하고 확장합니다. 네트워크 요청. 다음을 찾을 수 있습니다. evar 을(를) 위한 설정 페이지 템플릿:

브라우저로 돌아간 다음 개발자 콘솔을 엽니다. 다음을 통해 클릭: 회전판 을 클릭합니다.

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

회전판이 를 트리거하기 때문입니다. cmp:show 이벤트 그러나 우리측의 확인 때문에 구성 요소 리소스 유형, 실행된 이벤트가 없습니다.

다음과 같은 문서 페이지로 이동 웨스턴 오스트레일리아. 페이지 이름 및 템플릿 유형이 변경되었는지 확인합니다.