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