Adobe Experience Platform Web SDK를 사용하여 Adobe Analytics 설정
Adobe Analytics Web SDK를 사용하여 Adobe Experience Platform을 설정하고, 데이터를 Adobe Analytics으로 전송하기 위한 태그 규칙을 만들고, Analytics가 데이터를 예상대로 캡처하고 있는지 확인하는 방법에 대해 알아봅니다.
Adobe Analytics은(는) 고객 인텔리전스로 고객을 사람으로 이해하고 고객 인텔리전스로 비즈니스를 이끌어 나갈 수 있는 업계 선도적인 애플리케이션입니다.
학습 목표
이 단원을 마치면 다음을 수행할 수 있습니다.
- Adobe Analytics을 활성화하기 위한 데이터 스트림 구성
- Analytics 변수에 자동 매핑되는 표준 XDM 필드 식별
- 데이터 개체에서 Analytics 변수 설정
- 데이터 스트림을 재정의하여 데이터를 다른 보고서 세트에 보냅니다.
- Debugger 및 Assurance를 사용하여 Adobe Analytics 변수 확인
전제 조건
이 단원을 완료하려면 먼저 다음 작업을 수행해야 합니다.
-
Adobe Analytics에 대해 잘 알고 있고 액세스할 수 있습니다.
-
하나 이상의 테스트/개발 보고서 세트 ID가 있습니다. 이 자습서에 사용할 수 있는 테스트/개발 보고서 세트가 없는 경우 만드십시오.
-
이 자습서의 초기 구성 및 태그 구성 섹션에서 이전 단원을 완료합니다.
데이터 스트림 구성
Platform Web SDK는 웹 사이트에서 Platform Edge Network으로 데이터를 전송합니다. 그런 다음 데이터 스트림은 데이터를 전송해야 하는 Adobe Analytics 보고서 세트에 대한 플랫폼 Edge Network을 알려줍니다.
-
데이터 수집 인터페이스로 이동
-
왼쪽 탐색에서 데이터스트림 을 선택합니다.
-
이전에 만든
Luma Web SDK: Development Environment
데이터스트림 선택 -
서비스 추가 선택
-
Adobe Analytics 을(를) 서비스(으)로 선택
-
개발 보고서 세트의 보고서 세트 ID 입력
-
저장 선택
note tip TIP 보고서 세트 추가 를 선택하여 더 많은 보고서 세트를 추가하는 것은 다중 세트 태그 지정과 같습니다.
Analytics 변수 설정
웹 SDK 구현에서 Analytics 변수를 설정하는 방법에는 여러 가지가 있습니다.
- Analytics 변수에 대한 XDM 필드 자동 매핑 (자동).
data
개체에 필드를 설정합니다(권장).- Analytics 처리 규칙에서 XDM 필드를 Analytics 변수에 매핑합니다(더 이상 권장되지 않음).
- XDM 스키마에서 Analytics 변수에 직접 매핑합니다(더 이상 권장되지 않음).
2024년 5월부터 Platform Web SDK를 사용하여 Adobe Analytics을 구현하기 위해 더 이상 XDM 스키마를 만들 필요가 없습니다. data
개체(및 데이터 요소 만들기 단원에서 만든 data.variable
데이터 요소)를 사용하여 모든 사용자 지정 Analytics 변수를 설정할 수 있습니다. 데이터 개체에서 이러한 변수를 설정하면 기존 Analytics 고객에게 익숙하고, 처리 규칙 인터페이스를 사용하는 것보다 효율적이며, 불필요한 데이터가 실시간 고객 프로필에 공간을 차지하는 것을 방지합니다(Real-time Customer Data Platform 또는 Journey Optimizer이 있는 경우 중요).
자동으로 매핑된 필드
많은 XDM 필드는 자동으로 Analytics 변수에 매핑됩니다. 매핑의 최신 목록을 확인하려면 Analytics Experience Edge의 Adobe 변수 매핑을 참조하세요.
사용자 지정 스키마를 정의하지 않았더라도 이(가) 발생할 경우 입니다. Experience Platform 웹 SDK는 일부 데이터를 자동으로 수집하여 XDM 필드로 플랫폼 Edge Network에 보냅니다. 예를 들어 Web SDK는 현재 페이지 URL을 읽고 XDM 필드 web.webPageDetails.URL
(으)로 보냅니다. 이 필드는 Adobe Analytics으로 전달되며 Adobe Analytics의 페이지 URL 보고서가 자동으로 채워집니다.
이 자습서에서 XDM 스키마로 Adobe Analytics용 Web SDK를 구현하는 경우, 이 표에 설명된 대로 Analytics 변수에 자동 매핑되도록 사용자 지정 구현한 XDM 필드 중 일부가 있습니다.
identitymap.ecid.[0].id
web.webPageDetails.name
web.webPageDetails.server
web.webPageDetails.siteSection
commerce.productViews.value
commerce.productListViews.value
commerce.checkouts.value
commerce.purchases.value
commerce.order.currencyCode
commerce.order.purchaseID
productListItems[].SKU
productListItems[].name
productListItems[].quantity
productListItems[].priceTotal
Analytics 제품 문자열의 개별 섹션은 productListItems
개체 아래에서 다양한 XDM 변수를 통해 설정됩니다.
productListItems[].SKU
은(는) s.products 변수의 제품 이름에 매핑하는 우선 순위를 갖습니다.productListItems[].name
(으)로 설정된 값은 productListItems[].SKU
이(가) 없는 경우에만 제품 이름에 매핑됩니다. 그렇지 않으면 매핑되지 않고 컨텍스트 데이터에서 사용할 수 있습니다.빈 문자열 또는 null을
productListItems[].SKU
(으)로 설정하지 마십시오. 이렇게 하면 s.products 변수의 제품 이름에 매핑되지 않는 효과가 있습니다.데이터 개체에서 변수 설정
하지만 evar, prop, 이벤트는 어떻습니까? data
개체에서 변수를 설정하는 것이 Web SDK에서 이러한 Analytics 변수를 설정하는 데 권장되는 방법입니다. 데이터 객체에서 변수를 설정하면 자동으로 매핑된 변수를 덮어쓸 수도 있습니다.
먼저 data
개체는 무엇입니까? 모든 Web SDK 이벤트에서 사용자 지정 데이터가 있는 두 개체, 즉 xdm
개체와 data
개체를 보낼 수 있습니다. 둘 다 Platform Edge Network으로 전송되지만 xdm
개체만 Experience Platform 데이터 세트로 전송됩니다. data
개체의 속성은 데이터 수집을 위한 데이터 준비 기능을 사용하여 Edge에서 xdm
필드에 매핑될 수 있지만 그렇지 않으면 Experience Platform으로 전송되지 않습니다. 따라서 기본적으로 Experience Platform 기반으로 구축되지 않은 Analytics와 같은 애플리케이션에 데이터를 전송하는 것이 이상적입니다.
다음은 일반 웹 SDK 호출의 두 개체입니다.
Adobe Analytics은 data.__adobe.analytics
개체에서 모든 속성을 찾아 Analytics 변수에 사용하도록 구성되어 있습니다.
이제 이것이 어떻게 작동하는지 알아보겠습니다. 페이지 이름으로 eVar1
및 prop1
을(를) 설정하고 XDM 매핑 값을 덮어쓰는 방법을 살펴보겠습니다
- 태그 규칙
all pages - library loaded - set global variables - 1
을(를) 엽니다 - 새 작업 추가
- Adobe Experience Platform Web SDK 확장 선택
- 작업 유형 을(를) 변수 업데이트(으)로 선택
data.variable
을(를) 데이터 요소(으)로 선택- analytics 개체 선택
eVar1
을(를)page.pageInfo.pageName
데이터 요소로 설정prop1
을(를) 설정하여eVar1
의 값을 복사합니다.- XDM 매핑 값의 덮어쓰기를 테스트하려면 추가 속성 섹션에서 페이지 이름을 정적 값
test
(으)로 설정합니다. - 규칙 저장
이제 전송 이벤트 규칙에 데이터 개체를 포함해야 합니다.
- 태그 규칙
all pages - library loaded - send event - 50
을(를) 엽니다 - 이벤트 보내기 작업 열기
data.variable
을(를) 데이터(으)로 선택- 변경 내용 유지 선택
- 저장 선택
다른 보고서 세트로 데이터 보내기
방문자가 특정 페이지에 있을 때 전송할 Adobe Analytics 보고서 세트 데이터를 변경할 수 있습니다. 이를 위해서는 데이터 스트림과 규칙 모두에서 구성해야 합니다.
보고서 세트 재정의를 위한 데이터스트림 구성
데이터 스트림에서 Adobe Analytics 보고서 세트 재정의 설정을 구성하려면 다음 작업을 수행하십시오.
-
데이터 스트림 열기
-
메뉴를 연 다음 편집 을 선택하여 Adobe Analytics 구성을 편집하십시오.
-
고급 옵션 을 선택하여 보고서 세트 무시 를 엽니다.
-
재정의할 보고서 세트를 선택합니다. 이 경우
Web SDK Course Dev
및Web SDK Course Stg
-
저장 선택
보고서 세트 재정의에 대한 규칙 구성
다른 보고서 세트에 추가 페이지 보기 호출을 보내는 규칙을 만들어 보겠습니다. 데이터 스트림 재정의 기능을 사용하여 이벤트 보내기 작업을 사용하여 페이지에 대한 보고서 세트를 변경할 수 있습니다.
-
새 규칙을 만들어 이름을
homepage - library loaded - AA report suite override - 51
로 지정합니다. -
이벤트 에서 더하기 기호를 선택하여 새 트리거를 추가합니다.
-
확장 에서 코어 을(를) 선택합니다.
-
이벤트 유형 에서 로드된 라이브러리(페이지 상단) 를 선택합니다.
-
고급 옵션 을(를) 열려면 선택하고
51
을(를) 입력하십시오. 이렇게 하면 변수 업데이트 작업 유형으로 기준 XDM을 설정하는all pages - library loaded - send event - 50
이후에 규칙이 실행됩니다. -
변경 내용 유지 선택
-
조건 에서 추가 를 선택하십시오.
-
논리 형식 을(를) 보통(으)로 둡니다.
-
확장 을(를) 코어(으)로 유지
-
조건 유형 을(를) 쿼리 문자열이 없는 경로(으)로 선택
-
오른쪽에서 Regex 토글을 사용하지 않도록 설정합니다.
-
경로가 인 경우
/content/luma/us/en.html
을(를) 설정합니다. Luma 데모 사이트의 경우 규칙이 홈 페이지에서만 트리거되도록 합니다 -
변경 내용 유지 선택
-
작업 에서 추가 를 선택합니다.
-
확장(으)로 Adobe Experience Platform Web SDK 를 선택합니다.
-
작업 유형(으)로 이벤트 보내기 를 선택합니다.
-
XDM 데이터(으)로, 데이터 요소 만들기 단원에서 만든
xdm.variable.content
데이터 요소를 선택합니다 -
Data(으)로 데이터 요소 만들기 단원에서 만든
data.variable
데이터 요소를 선택합니다 -
데이터 스트림 구성 재정의 섹션까지 아래로 스크롤합니다.
-
개발 탭을 선택한 상태로 둡니다.
note tip TIP 이 탭은 재정의가 발생하는 태그 환경을 결정합니다. 이 연습에서는 개발 환경만 지정하지만 프로덕션에 배포할 때는 프로덕션 환경에서도 지정해야 합니다. -
자습서에 사용하는 샌드박스 를 선택하십시오.
-
데이터 스트림(이 경우
Luma Web SDK: Development Environment
) 선택 -
보고서 세트 에서 재정의하는 데 사용할 보고서 사이트를 선택하십시오. 이 경우
tmd-websdk-course-stg
입니다. -
변경 내용 유지 선택
-
규칙을 저장
개발 환경 구축
업데이트된 규칙을 Luma Web SDK Tutorial
태그 라이브러리에 추가하고 개발 환경을 다시 빌드합니다.
축하합니다! 다음 단계는 Experience Platform Web SDK를 통해 Adobe Analytics 구현의 유효성을 검사하는 것입니다.
디버거를 사용하여 Adobe Analytics 유효성 검사
Adobe Analytics이 Experience Platform 디버거의 Edge 추적 기능으로 ECID, 페이지 보기, 제품 문자열 및 전자 상거래 이벤트를 캡처하고 있는지 확인하는 방법을 알아봅니다.
Debugger 단원에서 AppMeasurement.js
Analytics 구현을 디버깅하는 방법과 유사한 Platform Debugger 및 브라우저 개발자 콘솔을 사용하여 클라이언트측 XDM 요청을 검사하는 방법을 배웠습니다. 또한 Adobe 애플리케이션으로 전송된 Platform Edge Network 서버측 요청의 유효성 검사와 Assurance를 사용하여 완전히 처리된 페이로드를 확인하는 방법에 대해 배웠습니다.
Analytics가 Experience Platform Web SDK를 통해 데이터를 제대로 캡처하고 있는지 확인하려면 다음 두 단계를 더 수행해야 합니다.
- Experience Platform 디버거의 Edge 추적 기능을 사용하여 Platform Edge Network의 XDM 개체에서 데이터가 처리되는 방식의 유효성 검사
- Adobe Experience Platform Assurance를 사용하여 Analytics에서 데이터가 완전히 처리되는 방식의 유효성 검사
Experience Cloud ID 유효성 검사
-
Luma 데모 사이트(으)로 이동
-
오른쪽 상단에 있는 로그인 단추를 선택하고 자격 증명 u: test@adobe.com p: 테스트를 사용하여 인증합니다.
-
Experience Platform 디버거를 열고 사이트의 태그 속성을 고유한 개발 속성으로 전환
-
Edge 추적을 사용하려면 Experience Platform 디버거로 이동하고 왼쪽 탐색에서 로그 를 선택한 다음 Edge 탭을 선택하고 연결 을 선택합니다
-
지금은 비어 있습니다.
-
Luma 페이지를 새로 고치고 Experience Platform 디버거를 다시 확인합니다. 데이터가 들어오는 것을 볼 수 있습니다. Analytics 자동 매핑(으)로 시작하는 행은 Adobe Analytics 비콘입니다
-
Analytics 변수를 보려면
mappedQueryParams
드롭다운과 두 번째 드롭다운을 모두 열려면 선택하십시오.note tip TIP 두 번째 드롭다운은 데이터를 보내는 Analytics 보고서 세트 ID에 해당합니다. 스크린샷의 보고서 세트가 아니라 자신의 보고서 세트와 일치해야 합니다. -
아래로 스크롤하여
c.a.x.identitymap.ecid.[0].id
을(를) 찾습니다. ECID를 캡처하는 컨텍스트 데이터 변수입니다 -
Analytics
mid
변수가 표시될 때까지 아래로 스크롤합니다. 두 ID 모두 장치의 Experience Cloud ID와 일치합니다. -
Luma 사이트에서,
note note NOTE 로그인했으므로 c.a.x.identitymap.lumacrmid.[0].id
에서test@adobe.com
사용자에 대한 인증된 ID112ca06ed53d3db37e4cea49cc45b71e
의 유효성을 검사하는 동안 잠시 기다려 주십시오.
보고서 세트 재정의 유효성 검사
위에서 Luma 홈 페이지에 대한 데이터 스트림 재정의를 구성했습니다. 이 구성의 유효성을 검사하려면
-
재정의가 적용된 후 데이터스트림 구성이 있는 행을 찾습니다. 여기에서 보고서 세트 무시를 위해 구성된 기본 보고서 세트와 추가 보고서 세트를 찾을 수 있습니다.
-
Analytics 자동 매핑(으)로 시작하는 행까지 아래로 스크롤하여
reportSuiteIds
에 재정의 구성에 지정한 보고서 세트가 표시되는지 확인합니다
콘텐츠 페이지 보기 수 유효성 검사
Didi Sport Watch 제품 페이지와 같은 제품 페이지로 이동합니다. Analytics에서 컨텐츠 페이지 보기를 캡처하는지 확인합니다.
-
c.a.x.web.webpagedetails.pageviews.value=1
검색 -
아래로 스크롤하여
gn
변수를 확인합니다.s.pageName
변수에 대한 Analytics 동적 구문입니다. 데이터 레이어에서 페이지 이름을 캡처합니다.
제품 문자열 및 전자 상거래 이벤트 유효성 검사
이미 제품 페이지를 사용하고 있으므로 이 연습에서는 동일한 Edge 추적을 사용하여 Analytics가 제품 데이터를 캡처하는지 확인합니다. 제품 문자열 및 전자 상거래 이벤트는 모두 XDM 변수를 Analytics에 자동으로 매핑합니다. Adobe Analytics에 대한 XDM 스키마를 구성하는 동안 적절한 productListItem
XDM 변수에 매핑했다면 Platform Edge Network에서 데이터를 적절한 Analytics 변수에 매핑합니다.
먼저 Product String
이(가) 설정되어 있는지 확인
-
c.a.x.productlistitems.[0].sku
검색 변수는 이 단원의 앞부분에서productListItems.item1.sku
에 매핑한 데이터 요소 값을 캡처합니다. -
c.a.x.productlistitems.[0]._experience.analytics.customdimensions.evars.evar1
도 찾습니다. 변수는productListItems.item1._experience.analytics.customdimensions.evars.evar1
에 매핑한 데이터 요소 값을 캡처합니다. -
아래로 스크롤하여
pl
변수를 확인합니다. Analytics 제품 문자열 변수의 동적 구문입니다 -
데이터 계층의 제품 이름은 제품 문자열의
c.a.x.productlistitems.[0].sku
및product
매개 변수에 모두 매핑됩니다. 또한 데이터 계층의 제품 제목은 제품 문자열의 머천다이징 evar1에 매핑됩니다.Edge 추적은
commerce
이벤트를productList
차원과 약간 다르게 처리합니다. 위의c.a.x.productlistitem.[0].name
에 매핑된 제품 이름과 같은 방식으로 매핑된 컨텍스트 데이터 변수가 없습니다. 대신 Edge 추적은 Analyticsevent
변수에 최종 이벤트 자동 매핑을 표시합니다. 플랫폼 Edge Network은 Adobe Analytics에 대한 스키마를 구성(이 경우commerce.productViews.value=1
)하는 동안 적절한 XDMcommerce
변수에 매핑하는 한 적절하게 매핑합니다. -
Experience Platform 디버거 창으로 돌아가서
events
변수로 스크롤하면prodView
(으)로 설정됩니다. -
제품 페이지에 있으므로
c.a.x.eventType
이(가)commerce.productViews
(으)로 설정되어 있습니다.note tip TIP ecommerce - pdp library loaded - AA (order 20)
규칙은all pages global content variables - library loaded - AA (order 1)
규칙이 설정한eventType
의 값을 시퀀스 뒷부분에서 트리거하도록 설정했으므로 덮어씁니다
나머지 전자 상거래 이벤트와 제품 문자열이 Analytics에 대해 설정되어 있는지 확인
-
장바구니에 Didi Sport Watch 추가
-
장바구니 페이지(으)로 이동하여 다음 항목에 대한 Edge 추적 확인
eventType
이(가)commerce.productListViews
(으)로 설정됨events: "scView"
및- 제품 문자열이 설정됩니다.
-
체크아웃으로 이동하여 다음에 대한 Edge 추적 을 확인하십시오.
eventType
이(가)commerce.checkouts
(으)로 설정됨events: "scCheckout"
및- 제품 문자열이 설정됩니다.
-
배송 양식에 이름 및 성 필드만 입력하고 계속 을 선택하세요. 다음 페이지에서 주문 을 선택하세요.
-
확인 페이지에서 다음에 대한 Edge 추적 을 확인하십시오.
eventType
이(가)commerce.purchases
(으)로 설정됨- 구매 이벤트가
events: "purchase"
설정 중입니다. - 통화 코드 변수 설정 중
cc: "USD"
pi
에 설정되는 구매 ID- 제품 이름, 수량 및 가격을 설정하는 제품 문자열
pl
Assurance를 사용하여 Adobe Analytics 유효성 검사
Adobe Experience Platform Assurance를 사용하면 웹 사이트 및 모바일 애플리케이션에서 데이터를 수집하거나 경험을 제공하는 방법을 검사, 증명, 시뮬레이션 및 확인할 수 있습니다.
이전 연습에서는 Adobe Analytics이 Experience Platform 디버거의 Edge 추적 기능으로 ECID, 페이지 보기, 제품 문자열 및 전자 상거래 이벤트를 캡처하고 있음을 확인했습니다. 그런 다음 Adobe Experience Platform 추적의 동일한 데이터에 액세스할 수 있는 대체 인터페이스인 Edge Assurance를 사용하여 동일한 이벤트의 유효성을 검사합니다.
Assurance 단원에서 배운 대로 Assurance 세션을 시작하는 방법에는 여러 가지가 있습니다. 마지막 연습에서 시작한 Edge 추적 세션으로 이미 Adobe Experience Platform Debugger이 열려 있으므로 디버거를 통해 Assurance에 액세스하는 것이 좋습니다.
"웹 SDK 자습서 3" 보증 세션 내에서 이벤트 검색 표시줄에 "hitdebugger" 를 입력하여 결과를 Adobe Analytics Post에서 처리된 데이터로 필터링합니다.
Experience Cloud ID 유효성 검사
Adobe Analytics이 ECID를 캡처하고 있는지 확인하려면 비콘을 선택하고 페이로드를 엽니다. 이 비콘의 공급업체는 com.adobe.analytics.hitdebugger 여야 합니다.
그런 다음 mcvisId(으)로 아래로 스크롤하여 ECID가 올바르게 캡처되었는지 확인합니다
콘텐츠 페이지 보기 수 유효성 검사
동일한 비콘을 사용하여 컨텐츠 페이지 보기가 올바른 Adobe Analytics 변수에 매핑되었는지 확인합니다.
pageName(으)로 아래로 스크롤하여 Page Name
이(가) 올바르게 캡처되었는지 확인합니다.
제품 문자열 및 전자 상거래 이벤트 유효성 검사
위의 Experience Platform 디버거로 유효성을 검사할 때 사용된 동일한 유효성 검사 사용 사례에 따라 동일한 비콘을 사용하여 Ecommerce Events
및 Product String
의 유효성을 계속 검사하십시오.
- 이벤트 에
prodView
이(가) 포함된 페이로드를 찾습니다.
- product-string(으)로 스크롤하여
Product String
의 유효성을 검사하십시오.Product SKU
및Merchandizing eVar1
을(를) 확인합니다.
- 아래로 더 스크롤하여 이전 섹션에서 처리 규칙을 사용하여 구성한
prop1
에Product SKU
이(가) 포함되어 있는지 확인합니다.
장바구니, 체크아웃 및 구매 이벤트를 검토하여 구현의 유효성을 계속 확인합니다.
- events 에
scView
이(가) 포함된 페이로드를 찾아 제품 문자열의 유효성을 검사합니다.
- events 에
scCheckout
이(가) 포함된 페이로드를 찾아 제품 문자열의 유효성을 검사합니다.
- 이벤트 에
purchase
이(가) 포함된 페이로드를 찾습니다.
purchase
이벤트의 유효성을 검사할 때Product String
에Product SKU
,Product Quantity
및Product Total Price
이(가) 있어야 합니다.- 또한
purchase
의 경우purchase-id
및/또는purchaseId
이(가) 설정되어 있는지 확인합니다.
축하합니다! 네가 해냈어! 이 작업은 단원을 마쳤으며 이제 자체 웹 사이트에 대해 Platform Web SDK를 사용하여 Adobe Analytics을 구현할 준비가 되었습니다.