AEM Assets 및 Adobe Experience Platform Launch을 사용하여 자산 통찰력 설정

이 5개 부분 비디오 시리즈에서는 Adobe Launch를 통해 배포되는 Experience Manager에 대한 자산 통찰력 설정 및 구성을 살펴봅니다.

1부:자산 통찰력 개요

자산 통찰력 개요. 핵심 구성 요소, 샘플 이미지 구성 요소 및 기타 컨텐츠 패키지를 설치하여 환경을 준비하십시오.

아키텍처 다이어그램

이 비디오에서는 더 이상 최신 버전이 아닌 코어 구성 요소 v2.2.2를 사용합니다.다음 섹션을 진행하려면 먼저 최신 버전을 사용하십시오.

• 자산 통찰력 샘플 이미지 컨텐츠 다운로드
• 최신 AEM WCM 코어 구성 요소 다운로드

2부 :샘플 이미지 구성 요소에 대한 자산 통찰력 추적 활성화

자산 통찰력을 위한 코어 구성 요소 및 프록시 구성 요소(샘플 이미지 구성 요소) 사용 개선 사항. 참조 사이트에 대한 샘플 이미지 구성 요소를 활성화하기 위해 컨텐츠 페이지 템플릿 정책을 편집합니다.

코어 이미지 구성 요소는 이미지 태그의 상위 <div> 내에 data-asset-id 속성을 사용하여 이 기능을 활성화/비활성화합니다. 프록시 구성 요소는 다음 변경 사항으로 코어 구성 요소를 재정의합니다.

• image.html 내에 있는 <img> 요소의 상위 div에서 data-asset-id​를 제거합니다
• data-aem-asset-id​를 image.html 내의 <img> 요소에 직접 추가합니다
• data-trackable='true' 값을 image.html 내의 <img> 요소에 추가합니다
• data-aem-asset- idand data-trackable='true' 는 동일한 노드 수준에서 유지됩니다

3부:Adobe Analytics — 보고서 세트 생성, 실시간 데이터 수집 및 AEM Assets 보고 활성화

자산 추적을 위해 실시간 데이터 수집이 있는 보고서 세트가 만들어집니다. AEM Assets 통찰력 구성은 Adobe Analytics 자격 증명을 사용하여 설정됩니다.

AEM Assets Insights 구성의 경우 다음 자격 증명이 필요합니다

• 데이터 센터
• Analytics 회사 이름
• Analytics 사용자 이름
• 공유 암호(Adobe Analytics > 관리자 > 회사 설정 > 웹 서비스​에서 가져올 수 있음).
• 보고서 세트(자산 보고에 사용되는 올바른 보고서 세트를 선택해야 합니다)

4부:Adobe Experience Platform Launch을 사용하여 Adobe Analytics 확장 추가

Adobe Analytics 확장 추가, 페이지 로드 규칙 만들기 및 AEM과 Adobe IMS 기술 계정 통합.

규칙 1 :페이지 추적기(pagetracker.js)

//For AEM 6.3
<script type="text/javascript" src="http://localhost:4503/etc/clientlibs/foundation/assetinsights/pagetracker.js"></script>

//For AEM 6.4
<script type="text/javascript" src="http://localhost:4503/etc.clientlibs/dam/clientlibs/assetinsights/pagetracker.js"></script>

페이지 추적기는 두 개의 호출 백(asset-embed-code에 등록됨)을 구현합니다

• &lt;code>assetAnalytics.core.assetLoaded&lt;/code> <code><code>:asset-DOM-요소에 대해 'load' 이벤트가 전달될 때 호출됩니다.</code></code>
• &lt;code>assetAnalytics.core.assetClicked&lt;/code> <code><code>:asset-DOM-요소에 대해 'click' 이벤트가 전달될 때 호출됨, 이는 asset-DOM-요소에 유효한 외부 'href' 속성을 가진 상위 태그가 있는 경우에만 관련이 있습니다</code></code>

마지막으로 Pagetracker는 초기화 함수를 다음과 같이 구현합니다.

• &lt;code>assetAnalytics.dispatcher.init()&lt;/code> <code><code>:를 호출하여 Pagetracker 구성 요소를 초기화합니다.</code></code> 이 ID는 웹 페이지에서 자산-인사이트 이벤트(노출 횟수 및/또는 클릭 수)를 생성하기 전에 호출해야 합니다.
• &lt;code>assetAnalytics.dispatcher.init()&lt;/code> <code><code>:선택적으로 AppMeasurement 개체를 허용합니다. 제공된 경우 AppMeasurement 개체의 새 인스턴스를 만들지 않습니다.</code></code>

규칙 2:이미지 추적기 — 작업 1(asset-insights.js)

/*
 * AEM Asset Insights
 */

var sObj = window.s;
_satellite.notify('in assetAnalytics customInit');
(function initializeAssetAnalytics() {
 if ((!!window.assetAnalytics) && (!!assetAnalytics.dispatcher)) {
 _satellite.notify('assetAnalytics ready');
 /** NOTE:
  Copy over the call to 'assetAnalytics.dispatcher.init()' from Assets Pagetracker
  Be mindful about changing the AppMeasurement object as retrieved above.
  */
 assetAnalytics.dispatcher.init(
                                "",  /** RSID to send tracking-call to */
                                "",  /** Tracking Server to send tracking-call to */
                                "",  /** Visitor Namespace to send tracking-call to */
                                "",  /** listVar to put comma-separated-list of Asset IDs for Asset Impression Events in tracking-call, e.g. 'listVar1' */
                                "",  /** eVar to put Asset ID for Asset Click Events in, e.g. 'eVar3' */
                                "",  /** event to include in tracking-calls for Asset Impression Events, e.g. 'event8' */
                                "",  /** event to include in tracking-calls for Asset Click Events, e.g. 'event7' */
                                sObj  /** [OPTIONAL] if the webpage already has an AppMeasurement object, please include the object here. If unspecified, Pagetracker Core shall create its own AppMeasurement object */
                                );
 sObj.usePlugins = true;
 sObj.doPlugins = assetAnalytics.core.updateContextData;
}
 else {
 _satellite.notify('assetAnalytics not available. Consider updating the Custom Page Code', 4);
 }
})();

규칙 2:이미지 추적기 — 작업 2(image-tracker.js)

/*
 * AEM Asset Insights
 */

document.querySelectorAll('[data-aem-asset-id]').forEach(function(element) {
    assetAnalytics.core.assetLoaded(element);
    var parent = element.parentElement;
    if (parent.nodeName == "A") {
        parent.addEventListener("click", function() {
            assetAnalytics.core.assetClicked(this)
        });
    }
});

• assetAnalytics.core.assetLoaded() :이 페이지 로드 완료 시 호출되고, 은 모든 추적 가능한 이미지에 대한 자산 노출 횟수를 트리거합니다
• 로드된 자산 목록을 전달하는 Analytics 변수 .contextData['c.a.assets.idList']
• assetAnalytics.core.assetClicked() :자산 DOM 요소에 유효한 href 값이 있는 앵커 태그가 있는 경우 이 호출됩니다. 자산을 클릭하면 클릭한 자산 ID를 값으로 사용하여 쿠키가 만들어집니다.(쿠키 이름:a.assets.clickedid)
• 로드된 자산 목록을 전달하는 Analytics 변수 .contextData['c.a.assets.clickedid']
• 원본 :contextData['c.a.assets.source']

콘솔 디버그 문

//Launch Build Info
_satellite.buildInfo

//Enables debug messages
_satellite.setDebug(true);

//Asset Insight JS Object
assetAnalytics

//List of trackable images
document.querySelectorAll(".cmp-image__image");

두 개의 Google Chrome 브라우저 확장 프로그램이 Analytics를 디버깅하는 방법으로 비디오에서 참조됩니다. 다른 브라우저에서도 유사한 확장을 사용할 수 있습니다.

• Launch 스위치 Chrome 확장 프로그램
• Adobe Experience Cloud Debugger

다음 Chrome 확장을 사용하여 DTM을 디버그 모드로 전환할 수도 있습니다.Launch 및 DTM 스위치. 이렇게 하면 DTM 배포와 관련된 오류가 있는지 쉽게 확인할 수 있습니다. 또한 다음 코드 조각을 추가하여 브라우저 개발자 도구 -> JS 콘솔​을 통해 DTM을 디버그 모드로 수동으로 전환할 수 있습니다.

5부 :분석 추적 및 인사이트 데이터 동기화 테스트

AEM 자산 보고 동기화 작업 스케줄러 및 자산 통찰력 보고서 구성