스트리밍 데이터 수집
이 단원에서는 Adobe Experience Platform Web SDK를 사용하여 데이터를 스트리밍합니다.
데이터 수집 인터페이스에서 완료해야 하는 두 가지 주요 작업이 있습니다.
-
웹 사이트의 방문자 활동에 대한 데이터를 Adobe Edge 네트워크로 보내려면 Luma 웹 사이트에서 웹 SDK를 구현해야 합니다. 태그를 사용하여 간단한 구현을 수행합니다(이전 Launch)
-
Edge 네트워크에 데이터를 전달할 위치를 알려주는 데이터 스트림을 구성해야 합니다. Platform 샌드박스의
Luma Web Events
데이터 세트로 데이터를 보내도록 구성합니다.
데이터 엔지니어 는 이 자습서 외부에서 스트리밍 데이터를 수집해야 합니다. Adobe Experience Platform의 웹 또는 모바일 SDK를 구현할 때 일반적으로 웹 또는 모바일 개발자는 데이터 레이어 만들기 및 태그 속성 구성에 관여합니다.
연습을 시작하기 전에 다음 두 개의 짧은 비디오를 시청하여 데이터 수집 및 웹 SDK 스트리밍에 대해 자세히 알아보십시오.
권한 필요
권한 구성 단원에서 이 단원을 완료하는 데 필요한 모든 액세스 제어를 설정합니다.
데이터 스트림 구성
먼저 데이터 스트림을 구성하겠습니다. 데이터 스트림은 Web SDK 호출에서 데이터를 받은 후 데이터를 보낼 위치를 Adobe Edge 네트워크에 알려줍니다. 예를 들어 데이터를 Experience Platform, Adobe Analytics 또는 Adobe Target으로 전송하시겠습니까? 데이터 스트림은 데이터 수집 사용자 인터페이스(이전 Launch)에서 관리되며, Web SDK를 사용한 데이터 수집에 중요합니다.
데이터스트림을 만들려면:
-
왼쪽 탐색에서 데이터스트림 선택
-
오른쪽 상단에서 새 데이터 스트림 단추를 선택합니다.
-
친숙한 이름 에
Luma Platform Tutorial
을(를) 입력하십시오(회사의 여러 사람이 이 자습서를 수강하는 경우). -
저장 단추 선택
다음 화면에서는 데이터를 보낼 위치를 지정합니다. 데이터를 Experience Platform에 보내려면:
- 추가 필드를 표시하려면 Adobe Experience Platform 을(를) 켜십시오.
- 샌드박스 의 경우
Luma Tutorial
을(를) 선택하십시오. - 이벤트 데이터 세트 에 대해
Luma Web Events Dataset
을(를) 선택합니다. - 다른 Adobe 애플리케이션을 사용하는 경우 언제든지 다른 섹션을 탐색하여 이러한 다른 솔루션의 Edge 구성에 필요한 정보를 확인하십시오. Web SDK는 데이터를 Experience Platform으로 스트리밍할 뿐만 아니라 다른 Adobe 애플리케이션에서 사용하던 모든 이전 JavaScript 라이브러리를 대체하기 위해 개발되었습니다. Edge 구성 을 사용하여 데이터를 전송하려는 각 애플리케이션의 계정 세부 정보를 지정합니다.
- 저장 선택
Edge 구성이 저장되면 결과 화면에 개발, 스테이징 및 프로덕션용으로 만들어진 세 가지 환경이 표시됩니다. 추가 개발 환경을 추가할 수 있습니다.
세 가지 환경 모두 방금 입력한 플랫폼 세부 정보를 포함합니다. 하지만 이러한 세부 정보는 환경별로 다르게 구성할 수 있습니다. 예를 들어 각 환경에서 데이터를 다른 Platform 샌드박스로 보내도록 할 수 있습니다. 이 자습서에서는 데이터 스트림에 대한 추가 사용자 지정을 수행하지 않습니다.
웹 SDK 확장 설치
속성 추가
먼저 태그 속성(이전의 태그 속성)을 만들어야 합니다. 속성은 웹 페이지에서 세부 정보를 수집하여 여러 위치로 보내는 데 필요한 모든 JavaScript, 규칙 및 기타 기능을 위한 컨테이너입니다.
속성을 만들려면 다음 작업을 수행하십시오.
- 왼쪽 탐색에서 속성(으)로 이동
- 새 속성 단추 선택
- 이름(으)로
Luma Platform Tutorial
을(를) 입력하십시오(회사에서 여러 사람이 이 자습서를 수강하는 경우 마지막에 이름을 추가하십시오.) - 도메인(으)로
enablementadobe.com
입력(나중에 설명) - 저장 선택
웹 SDK 확장 추가
이제 속성이 있으므로 확장을 사용하여 웹 SDK를 추가할 수 있습니다. 확장은 데이터 수집 인터페이스 및 기능을 확장하는 코드 패키지입니다. 확장을 추가하려면:
- 태그 속성 열기
- 왼쪽 탐색에서 확장(으)로 이동
- 카탈로그 탭으로 이동
- 태그에 사용할 수 있는 확장 프로그램이 많이 있습니다. 용어
Web SDK
(으)로 카탈로그 필터링 - Adobe Experience Platform Web SDK 확장에서 설치 단추를 선택합니다
- 웹 SDK 확장에는 몇 가지 구성이 있지만, 이 자습서에 대해 두 가지 구성만 수행할 수 있습니다. Edge 도메인 을(를)
data.enablementadobe.com
(으)로 업데이트합니다. 이 설정을 사용하면 웹 SDK 구현을 사용하여 자사 쿠키를 설정할 수 있습니다. 이는 권장되는 현상입니다. 이 단원의 뒷부분에서enablementadobe.com
도메인의 웹 사이트를 태그 속성에 매핑합니다.data.enablementadobe.com
이(가) Adobe 서버로 전달하도록enablementadobe.com
도메인의 CNAME이 이미 구성되었습니다. 웹 사이트에서 Web SDK를 구현하는 경우 데이터 수집을 위해 CNAME을 만들어야 합니다(예:data.YOUR_DOMAIN.com
) - 데이터스트림 드롭다운에서
Luma Platform Tutorial
데이터스트림을 선택합니다. - 다른 구성 옵션을 자유롭게 살펴보십시오(하지만 변경하지 마십시오!). 저장 을 선택합니다.
데이터를 전송할 규칙 만들기
이제 Platform으로 데이터를 전송하는 규칙을 만듭니다. 규칙은 태그에게 작업을 수행하도록 지시하는 이벤트, 조건 및 작업의 조합입니다. 규칙을 만들려면 다음을 수행하십시오.
- 왼쪽 탐색에서 규칙(으)로 이동
- 새 규칙 만들기 단추 선택
- 규칙 이름을 지정합니다
All Pages - Library Loaded
- 이벤트 에서 추가 단추를 선택합니다.
- Core Extension 을(를) 사용하고 Library Loaded(Page Top) 을(를) 이벤트 유형(으)로 선택하십시오. 이 설정은 Launch 라이브러리가 페이지에 로드될 때마다 규칙이 실행됨을 의미합니다.
- 기본 규칙 화면으로 돌아가려면 변경 내용 유지 를 선택하십시오.
- 지정한 이름에 따라 모든 페이지에서 이 규칙을 실행하려면 조건 을 비워 둡니다.
- 작업 에서 추가 단추를 선택합니다.
- Adobe Experience Platform Web SDK 확장 을 사용하고 작업 유형 으로 이벤트 보내기 를 선택합니다.
- 오른쪽의 Type 드롭다운에서 web.webpagedetails.pageViews 을(를) 선택합니다.
Luma Web Events Schema
의 XDM 필드 중 하나입니다. - 기본 규칙 화면으로 돌아가려면 변경 내용 유지 를 선택하십시오.
- 규칙을 저장하려면 저장 을 선택하십시오.
라이브러리의 규칙 Publish
그런 다음 규칙이 작동하는지 확인할 수 있도록 개발 환경에 규칙을 게시합니다.
라이브러리를 만들려면 다음 작업을 수행하십시오.
- 왼쪽 탐색에서 게시 흐름(으)로 이동
- 라이브러리 추가 선택
- Name 에 대해
Luma Platform Tutorial
을(를) 입력하십시오. - 환경 에 대해
Development
을(를) 선택합니다. - 변경된 모든 리소스 추가 단추를 선택합니다. Adobe Experience Platform Web SDK 확장 및
All Pages - Library Loaded
규칙 외에 모든 Launch 웹 속성에 필요한 기본 JavaScript을 포함하는 Core 확장 프로그램도 추가됩니다. - 개발을 위한 저장 및 빌드 단추 선택
라이브러리를 빌드하는 데 몇 분 정도 소요될 수 있으며 완료되면 라이브러리 이름 왼쪽에 녹색 점이 표시됩니다.
게시 플로우 화면에서 볼 수 있듯이 게시 프로세스에는 이 자습서의 범위를 벗어나는 많은 내용이 있습니다. 개발 환경에서 단일 라이브러리를 사용할 예정입니다.
요청의 데이터 유효성 검사
Adobe Experience Platform Debugger 추가
Experience Platform 디버거는 Chrome 및 Firefox 브라우저에서 사용할 수 있는 확장으로, 웹 페이지에서 구현된 Adobe 기술을 볼 수 있도록 도와줍니다. 원하는 브라우저용 버전을 다운로드합니다.
이전에 Debugger를 사용한 적이 없고 이전 Adobe Experience Cloud Debugger와 다른 경우 다음 5분 길이의 개요 비디오를 시청해 보십시오.
Luma 웹 사이트를 엽니다.
이 자습서에서는 공개적으로 호스팅된 Luma 데모 웹 사이트 버전을 사용합니다. 열어 책갈피에 추가:
- 새 브라우저 탭에서 Luma 웹 사이트를 엽니다.
- 자습서의 나머지 부분에서 사용할 페이지에 책갈피를 지정합니다
이 호스팅된 웹 사이트는 초기 태그 속성 구성의 도메인 필드에서 enablementadobe.com
을(를) 사용한 이유와 Adobe Experience Platform Web SDK 확장에서 data.enablementadobe.com
을(를) 자사 도메인으로 사용한 이유입니다. 난 계획이 있었어!
Experience Platform 디버거를 사용하여 태그 속성에 매핑
Experience Platform 디버거에는 기존 태그 속성을 다른 속성으로 바꿀 수 있는 멋진 기능이 있습니다. 이 기능은 유효성 검사에 유용하며, 이 자습서에서는 많은 구현 단계를 건너뛸 수 있습니다.
-
Luma 사이트가 열려 있는지 확인하고 Experience Platform 디버거 확장 아이콘을 선택합니다.
-
디버거가 열리고 이 자습서와 관련이 없는 하드코딩된 구현에 대한 일부 세부 정보가 표시됩니다(디버거를 연 후 Luma 사이트를 다시 로드해야 할 수 있음).
-
디버거가 아래 그림과 같이 "Luma"에 연결되어 있는지 확인한 다음 "잠금" 아이콘을 선택하여 디버거를 Luma 사이트에 잠급니다.
-
인증하려면 오른쪽 상단의 로그인 단추를 선택하십시오.
-
이제 왼쪽 탐색에서 시작(으)로 이동
-
구성 탭을 선택합니다.
-
페이지 포함 코드 를 표시하는 오른쪽의 작업 드롭다운을 열고 바꾸기 를 선택합니다
선택 -
사용자가 인증되었으므로 디버거는 사용 가능한 Launch 속성 및 환경을 가져옵니다.
Luma Platform Tutorial
속성 선택 -
Development
환경 선택 -
적용 단추 선택
-
이제 Luma 웹 사이트가 을(를) 태그 속성으로 다시 로드합니다. 도와줘요, 해킹당했습니다! 농담입니다.
-
Launch 속성의 세부 정보를 보려면 왼쪽 탐색에서 요약(으)로 이동하십시오.
-
이제 왼쪽 탐색 영역에서 AEP Web SDK(으)로 이동하여 네트워크 요청 을 확인합니다.
-
이벤트 행 열기
-
이벤트 보내기 작업에 지정한
web.webpagedetails.pageView
이벤트 형식과AEP Web SDK ExperienceEvent Mixin
형식을 준수하는 기타 기본 변수를 확인하는 방법을 참고하십시오.
-
이러한 유형의 요청 세부 정보는 브라우저의 웹 개발자 도구 네트워크 탭에도 표시됩니다. 페이지를 열고 다시 로드합니다.
interact
(으)로 호출을 필터링하여 호출을 찾아 선택한 다음 헤더 탭, 페이로드 요청 영역에서 찾습니다.
-
응답 탭으로 이동하여 ECID 값이 응답에 어떻게 포함되는지 확인합니다. 다음 연습에서 프로필 정보의 유효성을 검사하는 데 사용할 값으로 이 값을 복사하십시오.
Experience Platform의 데이터 유효성 검사
Luma Web Events Dataset
에 도착하는 데이터 배치를 확인하여 데이터가 플랫폼에 도달하는지 확인할 수 있습니다. (예: 스트리밍 데이터 수집이라고 하지만 이제 여러 개가 일괄적으로 도착한다고 말하고 있습니다.) 프로필로 실시간 스트리밍되므로 실시간 세그멘테이션 및 활성화에 사용할 수 있지만, 15분마다 데이터 레이크로 일괄적으로 전송됩니다.)
데이터의 유효성을 검사하려면
- Platform 사용자 인터페이스에서 왼쪽 탐색 메뉴의 데이터 세트(으)로 이동합니다.
Luma Web Events Dataset
을(를) 열고 일괄 처리가 도착했는지 확인합니다. 15분마다 전송되므로 일괄 처리가 표시될 때까지 기다려야 한다는 것을 기억하십시오.- 데이터 집합 미리 보기 단추 선택
- 미리 보기 모달에서 왼쪽의 스키마의 여러 필드를 선택하여 특정 데이터 포인트를 미리 보는 방법을 확인합니다.
새 프로필이 표시되는지 확인할 수도 있습니다.
- Platform 사용자 인터페이스에서 왼쪽 탐색 메뉴의 프로필(으)로 이동합니다.
- ECID 네임스페이스를 선택하고 ECID 값을 검색합니다(응답에서 복사). 프로필에는 ECID와 별도의 자체 ID가 있습니다.
- 프로필 ID 을(를) 선택하여 프로필 열기
- 본 페이지를 보려면 이벤트 탭을 선택하십시오.
\
이벤트에 사용자 정의 데이터 추가
페이지 이름에 대한 데이터 요소 만들기
-
데이터 수집 태그 인터페이스에서
Luma Platform Tutorial
속성의 오른쪽 상단 모서리에서 작업 라이브러리 선택 드롭다운을 열고Luma Platform Tutorial
라이브러리를 선택합니다. 이 설정을 사용하면 라이브러리에 추가 업데이트를 더 쉽게 게시할 수 있습니다. -
이제 왼쪽 탐색에서 데이터 요소(으)로 이동합니다.
-
새 데이터 요소 만들기 단추 선택
-
이름(으)로
Page Name
을(를) 입력하십시오. -
데이터 요소 형식(으)로
JavaScript Variable
을(를) 선택합니다. -
JavaScript 변수 이름(으)로
digitalData.page.pageInfo.pageName
을(를) 입력하십시오 -
값의 형식을 표준화하려면 소문자 값 강제 적용 및 텍스트 정리 상자를 선택하세요.
-
Luma Platform Tutorial
이(가) 작업 라이브러리로 선택되었는지 확인하십시오. -
라이브러리에 저장 선택
페이지 이름을 XDM 개체 데이터 요소에 매핑합니다
이제 페이지 이름을 웹 SDK에 매핑하겠습니다.
Luma Tutorial Platform
프로필을 빠르게 열고 권한 항목 샌드박스 > Prod 를 추가하십시오. 그런 다음 데이터 요소 페이지에서 SHIFT 키를 누른 상태로 다시 로드하여 캐시를 지웁니다데이터 요소 페이지에서:
- 새 데이터 요소 만들기
- 이름(으)로
XDM Object
을(를) 입력하십시오. - 확장(으)로
Adobe Experience Platform Web SDK
을(를) 선택합니다. - 데이터 요소 형식(으)로
XDM object
을(를) 선택합니다. - 샌드박스(으)로
Luma Tutorial
샌드박스를 선택합니다. - 스키마(으)로
Luma Web Events Schema
을(를) 선택합니다. web.webPageDetails.name
필드 선택- Value(으)로 아이콘을 선택하여 데이터 요소 선택 모달을 열고
Page Name
데이터 요소를 선택합니다 - 라이브러리에 저장 선택
동일한 프로세스를 사용하여 웹 사이트의 추가 사용자 정의 데이터를 XDM 필드에 매핑합니다.
이벤트 보내기 작업에 XDM 데이터 추가
이제 데이터가 XDM 필드에 매핑되었으므로 이벤트 보내기 작업에 포함할 수 있습니다.
- 규칙 화면으로 이동
All Pages - Library Loaded
규칙 열기Adobe Experience Platform Web SDK - Send Event
작업 열기- XDM 데이터 로서 아이콘을 선택하여 데이터 요소 선택 모달을 열고
XDM Object
데이터 요소를 선택합니다 - 변경 내용 유지 단추 선택
- 이제 지난 몇 번의 연습에서
Luma Platform Tutorial
을(를) 작업 라이브러리로 선택했기 때문에 최근 변경 내용이 라이브러리에 직접 저장되었습니다. 게시 플로우 화면을 통해 변경 사항을 게시하지 않고 파란색 버튼의 드롭다운을 열고 라이브러리 및 빌드에 저장 을 선택하면 됩니다.
이렇게 하면 방금 변경한 세 가지 사항으로 새 태그 라이브러리를 빌드하기 시작합니다.
XDM 데이터의 유효성 검사
이제 이전에 학습한 대로 디버거를 사용하여 태그 속성에 매핑되면서 Luma 홈 페이지를 다시 로드하고 페이지 이름 필드가 요청에 채워지는지 확인할 수 있습니다.
데이터 세트와 프로필을 미리 보고 Platform에서 페이지 이름 데이터가 수신되었는지 확인할 수도 있습니다.
추가 ID 보내기
웹 SDK 구현에서 이제 Experience Cloud ID(ECID)를 기본 식별자로 사용하는 이벤트를 보냅니다. ECID는 웹 SDK에 의해 자동으로 생성되며 디바이스 및 브라우저별로 고유합니다. 단일 고객은 사용 중인 디바이스 및 브라우저에 따라 여러 ECID를 가질 수 있습니다. 그렇다면 어떻게 이 고객에 대한 통합된 뷰를 얻고 고객의 온라인 활동을 CRM, 충성도 및 오프라인 구매 데이터에 연결할 수 있습니까? 세션 중에 추가 ID를 수집하고 ID 결합을 통해 프로필을 결정적으로 연결하여 이를 수행합니다.
기억나는 경우 ID 매핑 단원에서 ECID 및 CRM ID를 웹 데이터의 ID로 사용한다고 언급했습니다. 웹 SDK를 사용하여 CRM ID를 수집해 보겠습니다!
CRM ID에 대한 데이터 요소 추가
먼저 데이터 요소에 CRM ID를 저장합니다.
- 태그 인터페이스에 이름이
CRM Id
인 데이터 요소를 추가합니다. - 데이터 요소 형식(으)로 JavaScript 변수 를 선택합니다.
- JavaScript 변수 이름(으)로
digitalData.user.0.profile.0.attributes.username
을(를) 입력하십시오 - 라이브러리에 저장 단추를 선택합니다(
Luma Platform Tutorial
은(는) 작업 라이브러리여야 함).
ID 맵 데이터 요소에 CRM ID 추가
이제 CRM ID 값을 캡처했으므로 ID 맵 데이터 요소라는 특수 데이터 요소 유형과 연결해야 합니다.
-
이름이
Identities
인 데이터 요소 추가 -
확장(으)로 Adobe Experience Platform Web SDK 를 선택합니다.
-
데이터 요소 형식(으)로 ID 맵 을(를) 선택하십시오.
-
네임스페이스(으)로, 이전 단원에서 만든 네임스페이스인
Luma CRM Id
을(를) 입력하십시오.note warning WARNING Adobe Experience Platform 웹 SDK 확장 버전 2.2에서는 Platform 계정의 실제 값을 사용하여 미리 채워진 드롭다운에서 네임스페이스를 선택할 수 있습니다. 죄송합니다. 이 기능은 아직 "샌드박스 인식"이 아니므로 Luma CRM Id
값이 드롭다운에 표시되지 않을 수 있습니다. 이 경우 이 연습을 완료하지 못할 수 있습니다. 확인 후 해결 방법을 게시하겠습니다. -
ID 로서 아이콘을 선택하여 데이터 요소 선택 모달을 열고
CRM Id
데이터 요소를 선택합니다 -
인증됨 상태(으)로 인증됨 을(를) 선택합니다
-
기본 선택 취소됨 상태로 둡니다. CRM ID가 Luma 웹 사이트의 대부분의 방문자에 대해 존재하지 않으므로 ECID를 기본 식별자로 재정의하지 않으려고 합니다. ECID 이외의 항목을 기본 식별자로 사용하는 경우는 거의 없습니다. 일반적으로 이러한 지침에서 기본 설정은 언급하지 않지만 나중에 사용자 자신의 구현에서 두통을 피할 수 있도록 지원하기 위해 이 설정을 호출합니다.
-
라이브러리에 저장 단추를 선택합니다(
Luma Platform Tutorial
은(는) 작업 라이브러리여야 함).
XDM 개체에 ID 맵 데이터 요소 추가
업데이트해야 하는 데이터 요소가 하나 더 있습니다. XDM 개체 데이터 요소입니다. 이 하나의 ID를 전달하기 위해 세 개의 개별 데이터 요소를 업데이트해야 하는 것이 이상하게 보일 수 있지만, 이 프로세스는 여러 ID에 대해 확장되도록 설계되었습니다. 걱정 마, 이 수업은 거의 끝났어!
- XDM 개체 데이터 요소를 엽니다.
- IdentityMap XDM 필드 열기
- 데이터 요소(으)로 아이콘을 선택하여 데이터 요소 선택 모달을 열고
Identities
데이터 요소를 선택합니다 - 이제 지난 몇 번의 연습에서
Luma Platform Tutorial
을(를) 작업 라이브러리로 선택했기 때문에 최근 변경 내용이 라이브러리에 직접 저장되었습니다. 게시 플로우 화면을 통해 변경 내용을 게시하지 않고 파란색 버튼의 드롭다운을 열고 라이브러리 및 빌드에 저장 을 선택할 수 있습니다.
ID 유효성 검사
이제 웹 SDK에서 CRM ID를 보내고 있는지 확인하려면:
- Luma 웹 사이트 열기
- 이전 지침에 따라 디버거를 사용하여 태그 속성에 매핑합니다
- Luma 웹 사이트의 오른쪽 상단에서 로그인 링크를 선택합니다.
- 자격 증명
test@adobe.com
/test
을(를) 사용하여 로그인 - 인증되면 디버거(Adobe Experience Platform Web SDK > 네트워크 요청 > 이벤트)에서 Experience Platform Web SDK 호출을 검사하면
lumaCrmId
이(가) 표시됩니다.
- ECID 네임스페이스 및 값을 사용하여 사용자 프로필을 다시 조회합니다. 프로필에는 CRM ID와 고객 충성도 ID 및 프로필 세부 사항(예: 이름 및 전화번호)이 표시됩니다. 모든 ID 및 데이터가 하나의 실시간 고객 프로필에 결합되었습니다!
추가 리소스
좋습니다! 웹 SDK 및 Launch에 대한 많은 정보였습니다. 본격적인 구현에 더 많은 참여가 있지만, 이러한 참여는 플랫폼에서 시작하고 결과를 확인하는 데 도움이 되는 기본 사항입니다.
Luma Tutorial Platform
제품 프로필에서 Prod 샌드박스를 제거할 수 있습니다데이터 엔지니어의 경우 쿼리 실행 단원으로 건너뛸 수 있습니다.
데이터 설계자는 병합 정책(으)로 이동할 수 있습니다.