20.5 채팅 및 Adobe Experience Platform 간의 통합 구성

스택채팅을 통해 Adobe Experience Platform에서 이벤트를 보내고 받으려면 Stackchat Studio에서 통합을 만들고 구성해야 합니다. Stackchat Studio에서 통합을 설정하기 전에 Adobe Experience Platform API와 상호 작용할 수 있는 Adobe I/O 프로젝트를 만들어야 합니다.

20.5.1 기존 Adobe I/O 프로젝트

제3부에서 연습 3.3.2 - Adobe I/O 프로젝트를설정하는 동안 Adobe I/O 프로젝트를 직접 만들었습니다. Adobe I/O 프로젝트를 만들 때 인증서 쌍이 만들어졌습니다. 이 연습 동안 인증서 쌍을 사용해야 합니다. 더 이상 사용하지 않는 경우 연습 3.3.2 - Adobe I/O 프로젝트 설정에 설명된 단계에 따라 새 프로젝트를 만들거나 새 인증서 쌍을 생성합니다.

계속하려면 다음 파일을 준비해야 합니다.

  • private.key
  • certificate_pub.crt

Adobe I/O 프로젝트를 설정하는 동안 생성되었으며, 컴퓨터에 config.zip이라는 압축 파일 을 사용하여 자동으로 다운로드되었습니다.

또한 클라이언트 ID, 클라이언트 암호 등과 같은 JWT( 서비스 계정) 의 다른 중요한 정보를 검색하려면 Adobe I/O 프로젝트를 열어야 합니다.

이렇게 하려면 https://console.adobe.io/projects을 방문하십시오. 그러면 이것을 보실 수 있습니다.

스택채팅

위쪽 탐색 메뉴에서 프로젝트로 이동합니다. 검색 후 프로젝트를 열어 플랫폼 API ldap​이름을 지정합니다.

스택채팅

프로젝트를 열면 비슷한 화면이 나타납니다. JWT( 서비스 계정) 를 클릭하여 Adobe I/O 프로젝트의 자격 증명을 봅니다.

스택채팅

그러면 이것을 보실 수 있습니다. 통합을 설정하는 동안 Stackchat Studio 사용자 인터페이스에 이러한 자격 증명을 입력해야 하므로 다음 2단계 동안 이 화면을 계속 여십시오.

스택채팅

20.5.2 스택채팅에서 Adobe IO 자격 증명 추가

Stackchat Studio에서 보트 메뉴의 통합을 클릭한 다음 오른쪽 상단의 통합 추가 를 클릭하고

Stackchat Adobe Experience Platform 통합

그런 다음 모달 창에서 Adobe Experience Platform 를 선택합니다.

Stackchat Adobe Experience Platform 통합

이제 빈 Adobe Experience Platform 통합 화면이 표시됩니다.

Stackchat Adobe Experience Platform 통합

이제 [인증] 탭에서 모든 필드에 값을 입력해야 합니다.

JWT 서비스 계정 필드

다음 페이지에서 JWT 서비스 계정 값을 복사/붙여 넣어 클라이언트 ID, 클라이언트 암호, 기술 계정 ID 및 IMS 조직 ID 필드를 모두 채울 수 있습니다.

스택채팅

이러한 값을 채우고 나면 다음과 같이 해야 합니다.

스택채팅

개인 키

개인 필드는 Adobe I/O 프로젝트 설정의 일부로 생성한 private.key파일의 전체 컨텐츠를 포함해야 합니다. 텍스트 편집기에서 private.key 를 열고 전체 컨텐츠를 개인 키 텍스트 입력에 복사/붙여 넣습니다.

스택채팅

private.key를 Stackchat Studio에 붙여 넣은 후 다음과 같은 내용이 필요합니다.

스택채팅

연결 ID

연결 ID는 DCS 입입 ID의 마지막 부분이며 구성 ID에 이미 여기에 저장됩니다. 그러나 클릭을 저장하려면 DCS Inlet ID는 다음과 같습니다.

--dcsInletId--

이제 URL의 마지막 / 뒤에 있는 모든 문자를 복사하여 Stackchat Studio의 연결 ID 필드에 붙여넣으면 됩니다. 이 예에서는 92b2eb1267c8fc7ee8b41a760a7d616714ca380b49d2d83e68adf692a0a28b1.

그런 다음 자격 증명 확인을 클릭합니다.

Stackchat Adobe Experience Platform 통합

노트

잘못된 AEP 자격 증명 오류가 발생하는 경우 모든 내용을 올바르게 복사/붙여넣었는지 확인하십시오.

20.5.3 샌드박스, 스키마 및 데이터 집합 구성

스택채트는 다음 2가지 유형의 이벤트를 Adobe Experience Platform으로 전송합니다.사용자 프로필 이벤트 및 행동 상호 작용 이벤트. 각 이벤트 유형에는 Adobe Experience Platform에 정의된 전용 스키마와 데이터 세트가 필요합니다. 이 단계에서는 Adobe Experience Platform 샌드박스에서 프로필 및 상호 작용 데이터를 보내야 하는 스택채팅 위치를 알려 줍니다.

이전 단계의 자격 증명이 올바르면 데이터 라우팅 탭으로 자동 전환됩니다. 샌드박스 가져오기를 클릭합니다.

Stackchat Adobe Experience Platform 통합

샌드박스를 가져온 후 샌드박스 이름을 검색하고 선택합니다. 사용할 샌드박스는 다음과 같습니다 --aepSandboxId--. 이 예에서 샌드박스는 AEP 활성 FY21이라고 합니다.

Stackchat Adobe Experience Platform 통합

스키마 및 데이터 세트가 로드되는 동안 몇 초 동안 기다려 주십시오. UI가 로드되면 다음 값을 선택합니다.

  • 프로필 스키마: 데모 시스템 - Stackchat Chatbot(Global v1.1)용 프로필 스키마
  • 이벤트 스키마: 데모 시스템 - Stackchat Chatbot(Global v1.1)용 이벤트 스키마
  • 프로필 데이터 세트: 데모 시스템 - 스택 채팅 채팅 채팅 채팅 채팅(글로벌 v1.1)을 위한 프로필 데이터 집합
  • 이벤트 데이터 세트: 데모 시스템 - 스택 채팅 채팅 채팅 채팅(글로벌 v1.1)용 이벤트 데이터 세트

이제 구성 저장을 눌러 다음 단계로 이동할 수 있습니다.

Stackchat Adobe Experience Platform 통합

20.5.4 프로필 매핑

다음 탭에서 스택형 채팅 슬롯을 Adobe Experience Platform 스키마에 정의된 속성에 매핑합니다. 다음과 같이 표시됩니다.

Stackchat Adobe Experience Platform 통합

처음 수행할 매핑은 스택채팅 ID에 필요한 매핑입니다. 슬롯 선택 메뉴에서 사용자 ID를 선택합니다.

Stackchat Adobe Experience Platform 통합

다음으로, 여러 선택적 매핑을 추가해야 합니다. 여기에 추가로 매핑할 항목의 표가 있습니다.

슬롯 이름 스키마 매핑
ECID --aepTenantId--.identification.core.ecid
이메일 --aepTenantId--.identification.core.email
이름 person.name.firstName
NpsScore --aepTenantId--.customerSatisfactionScore.score
NpsFeedback --aepTenantId--.customerSatisfactionScore.feedback
NPSFeedbackText --aepTenantId--.customerSatisfactionScore.detailedFeedback

각 매핑에 대해 + 단추를 클릭하여 새 매핑을 추가합니다.

Stackchat Adobe Experience Platform 통합

예를 들어 사용자의 Experience Cloud ID를 매핑하여 시작합니다. 슬롯 선택 메뉴에서 ECID를 선택합니다.

Stackchat Adobe Experience Platform 통합

잘하고 있어! 이제 연습 20.2.2에서 만든 다음 슬롯에 대해 이 과정을 반복하면 됩니다. 모든 스키마에는 해당 스키마 속성이 설정되어 있습니다.

최종 매핑은 다음과 같아야 합니다.

Stackchat Adobe Experience Platform 통합

이러한 모든 매핑이 매핑되면 오른쪽 상단에서 업데이트 매핑을 누르십시오.

20.5.5 이벤트 매핑

이 탭에서 스택채팅 슬롯을 Stackchat이 Adobe Experience Platform으로 보내는 동작 이벤트에 매핑합니다. 단계 20.5.2(데모 시스템 - Stackchat Chatbot(Global v1.1))에서 선택한 스키마에는 사용자가 있는 대화 흐름이나 클라우드 함수가 실행될 때와 같은 정보와 함께 Stackchat에 의해 자동으로 채워지는 --aepTenantId--.chatbotInteraction 혼합이 있습니다. Adobe Experience Platform에서 이 동작을 올바른 사용자에게 적용할 수 있도록 ID 슬롯을 매핑하는 것이 유일한 작업입니다.

[이벤트 매핑] 탭에서 다음 매핑을 추가합니다.

슬롯 이름 스키마 매핑
사용자 ID --aepTenantId--.identification.core.stackchatId
ECID --aepTenantId--.identification.core.ecid
이메일 --aepTenantId--.identification.core.email

최종 매핑은 다음과 같아야 합니다.

Stackchat Adobe Experience Platform 통합

이러한 모든 매핑이 매핑되면 오른쪽 상단에서 업데이트 매핑을 누르십시오.

20.5.5 제품 보기 이벤트를 Adobe Experience Platform으로 보내기

Stackchat가 자동으로 전송하는 사용자 프로필 및 행동 이벤트 외에 Adobe Experience Platform으로 이벤트를 전송하려는 경우가 있습니다. 이러한 상황이 발생하면 Stackchat Cloud 기능을 통해 이러한 특별 사례 이벤트를 Adobe Experience Platform으로 보낼 수 있습니다.

이 섹션에서는 사용자가 특정 제품 카드의 단추를 누를 때 이메일 주소와 제품 보기 이벤트를 캡처할 때 Adobe Experience Platform 사용자 식별된 이벤트를 보내도록 Luma Bot을 구성합니다.

Stackchat Adobe Experience Platform 통합

이 ❤️ 버튼은 이미 포스트백 단추로 구성되었으며, 이는 사용자가 이 버튼을 클릭할 때 클라우드 함수를 호출하는 것을 의미합니다. 이 ❤️ 단추는 notifyAEPOfProductView 클라우드 함수를 호출하도록 구성되었으며 다음과 같은 페이로드를 전달합니다.

{
  name: result.name,
  imageUrl: result.image1.url,
  price: result.finalPrice,
  sku: result.SKU,
  pageUrl: BASE_PRODUCT_URL + result.productUrl
}

notifyAEPOfProductView ​메서드는 이미 이 페이로드에서 Adobe Experience Platform 제품 보기 이벤트를 생성하도록 설정되어 있지만 Adobe Experience Platform 샌드박스에서 제품 보기/사용자 식별된 스키마의 id를 알아야 합니다.

Visual Studio 코드 환경으로 돌아가서 file _constants.ts 파일을 엽니다.

VSC

이제 다음 3줄의 코드를 업데이트해야 합니다.

export const CUSTOM_EVENT_SCHEMA_ID = 'XXXX';   // For "product viewed" and "user identified" events
...
export const CUSTOM_EVENT_DATASET_ID = 'XXXX';
export const CUSTOM_EVENT_ORCHESTRATION_EVENT_ID = 'XXXX';

CUSTOM_EVENT_SCHEMA_ID

Adobe Experience Platform 사용자 인터페이스를 열고 [ 스키마 ] 페이지로 이동하여 데모 시스템 - Stackchat Chatbot(글로벌 v1.1)용 이벤트 스키마 (Global v1.1)를 검색하여 CUSTOM_EVENT_SCHEMA_ID를 얻고 을 클릭하여 스키마를 열 수 있습니다.

VSC

스키마 ID를 가져오려면 URL에서 복사합니다. 쿼리 문자열 끝의 긴 숫자입니다(예: fa8b21f33509e8ab9d5139b53652b61ec2b18dcea1388 411.

VSC

스키마 ID를 복사하여 _constants.ts 파일의 이 필드에 붙여 넣습니다.

export const CUSTOM_EVENT_SCHEMA_ID = 'fa8b21f33509e8ab9d5139b53652b61ec2b18dcea1388411';

이제 file _constants.ts 파일은 다음과 같아야 합니다.

VSC

CUSTOM_EVENT_DATASET_ID

이제 데이터 세트에 대해서도 동일하게 살펴보겠습니다. Adobe Experience Platform 사용자 인터페이스를 가져오고 데이터 집합 페이지를 열고 데모 시스템 - Stackchat Chatbot(Global v1.1) ​이벤트 데이터 집합을 검색하고 결과 데이터 집합 결과를 클릭합니다.

오른쪽의 레이블에서 데이터 세트 ID를 복사하여 _constants.ts 파일의 이 필드에 붙여 넣습니다.

VSC

export const CUSTOM_EVENT_DATASET_ID = 'paste-your-value-here';

이제 file _constants.ts 파일은 다음과 같아야 합니다.

VSC

CUSTOM_EVENT_ORCHESTRATION_EVENT_ID

마지막 항목 1개 남음:이전 단계의 Journey Orchestration ID! 20.4에서는 Journey Orchestration에서 이벤트를 직접 만든 채팅 봇과 상호 작용한 후 이메일 후속 작업을 트리거할 수 있습니다. 만든 오케스트레이션 eventID를 복사하여 _constants.ts 파일의 이 필드에 붙여 넣습니다.

다음과 같이 오케스트레이션 eventID를 찾을 수 있습니다.

ACOP

이 예제에서 오케스트레이션 eventID는 bcd25051c871367b0e2d5e4a1af292c6b716673faf85aad76de0e010e0d8입니다. 8a

export const CUSTOM_EVENT_ORCHESTRATION_EVENT_ID = 'XXXX';

이제 file _constants.ts 파일은 다음과 같아야 합니다. 변경 내용을 file _constants.ts에 저장합니다.

VSC

다 준비됐어요! 이제 Stackchat Studio에서 코드를 컴파일하고 클라우드 기능을 업데이트해야 합니다.

먼저 터미널을 엽니다(보기 -> 터미널).

vs_terminal-open

그러면 VS 코드 창 아래쪽에 패널이 열립니다.

노트

올바른 디렉토리에서 작업하고 있는지 확인합니다. 다음 단계를 수행하려면 /cloud-functions 디렉터리 내에서 작업해야 합니다. 터미널 내의 pwd (인쇄 작업 디렉토리)를 확인하고 Enter 키를 누릅니다. 인쇄되는 경로가 /cloud-functions 로 끝나는 경우 cd 클라우드 기능을 실행하여 올바른 디렉토리를 설정하지 않으면 모두 설정됩니다. 이제 pwd를 다시 실행하면​이제 /cloud-functions로 끝나는 경로가 표시됩니다.

터미널에서 다음 명령을 실행하여 클라우드 기능을 빌드합니다. npm build를 실행하고 enter 키를 누릅니다.

vs_terminal-open

그러면 라는 폴더가 생성됩니다 ./dist - cloud-functions.js라는 단일 파일을 포함할 것입니다.

vs-dist-cloud-functions

파일 cloud-functions.js를 열고​모든 내용을 복사하고 Stackchat Studio의 클라우드 함수 편집기에 붙여 넣어 현재 코드를 바꾼 다음 저장 버튼을 누릅니다.

ui_cloud-functions-updated

잘됐다, 거의 다 왔어! 왼쪽 탐색 하단에 있는 [게시 ] 단추를 누르고 Luma Bot가 게시되기를 기다리는 동안 향수를 불러옵니다.

Stackchat Adobe Experience Platform 통합

보트가 게시를 완료한 후 채팅 위젯을 열고 메시지 /재설정 메시지를 보내 채팅 세션을 지우고 다시 시작합니다.

데모

그러면 이것을 보실 수 있습니다. 이름을 지정하고 전송을 클릭합니다.

데모

그런 다음 아이디어 필요한 메뉴 항목을 선택합니다.

데모

그러면 이것을 보실 수 있습니다. 예 를 클릭합니다.

데모

다음으로 이메일 주소를 입력합니다.

데모

예를 클릭하여 이메일 주소를 확인합니다.

데모

그러면 Luma 제품이 채팅 보트 내에 표시됩니다.

데모

그런 다음 몇 가지 제품❤️의 버튼을 눌러 제품 보기 이벤트를 생성하고 Journey Orchestration의 고객 여정을 시작합니다.

2초 후에 방금 좋아한 항목에 대한 프로모션이 포함된 Adobe Experience Platform 및 Journey Orchestration의 이메일을 받게 됩니다.

데모

노트

이제 아이디어 ​흐름이 필요한 경우 Luma Bot에서 이전에 좋아한 제품을 기억하고 권장 사항으로 표시합니다. 이렇게 하려면 Adobe Experience Platform에서 사용자의 제품 보기 이벤트를 가져오십시오.

채팅 보트의 다음 질문은 채팅 경험에 대한 피드백을 제공할 수 있는지 여부입니다. 확인을 클릭합니다.

데모

선택을 하세요. 이 경우 선택은 훌륭합니다.

데모

해피오를 클릭합니다!

데모

자세한 피드백을 추가로 제공하고 전송을 클릭합니다.

데모

이제 Adobe Experience Platform의 실시간 고객 프로필에서 데이터를 수집했는지 확인하겠습니다.

https://platform.adobe.com 으로 이동하여 프로필로 이동합니다. Click the + Browse button. 그러면 다음 내용이 표시됩니다.

데모

[ ID 네임스페이스 - 이메일 ]을 선택하고 채팅 대화 상자에 제출한 이메일 주소를 입력합니다. 보기 클릭한 다음 프로필의 프로필 ID를 클릭합니다.

데모

그러면 Adobe Experience Platform에서 고객 프로파일에 대한 기본 개요를 확인할 수 있습니다. 속성으로 이동합니다.

데모

속성 에서 NPS 점수와 자세한 피드백과 같은 것을 확인할 수 있습니다. 이벤트로 이동합니다.

데모

이벤트 에서​발생한 모든 상호 작용을 볼 수 있습니다. JSON 보기 단추를 클릭하면 Nadia Elements Shell 제품에서 제품 보기 이벤트에 대한 모든 세부 사항(예: 이 경우)과 같이 더 자세한 정보를 볼 수 있습니다.

데모

이메일을 받고 Adobe Experience Platform에서 프로필을 시각화할 수 있는 경우 Stackchat과의 통합이 이제 제대로 진행되고 다음 연습을 계속할 수 있습니다.

다음 단계: 20.6 데모 웹 사이트에서 채팅 보트 테스트

모듈 20으로 돌아가기

모든 모듈로 돌아가기

이 페이지에서는