Web SDK 및 Edge Network 서버 API를 사용한 하이브리드 개인화
개요 overview
Hybdrid 개인화는 개인화 콘텐츠 서버측을 검색하고, Edge Network 서버 API를 사용하고, Web SDK를 사용하여 클라이언트측을 렌더링하는 프로세스를 설명합니다.
Adobe Target, Adobe Journey Optimizer 또는 Offer Decisioning과 같은 개인화 솔루션에서 하이브리드 개인화를 사용할 수 있습니다. 차이점은 Server API 페이로드의 콘텐츠입니다.
전제 조건 prerequisites
웹 속성에 하이브리드 개인화를 구현하기 전에 다음 조건을 충족하는지 확인하십시오.
- 사용할 개인화 솔루션을 결정했습니다. Server API 페이로드의 내용에 영향을 미칩니다.
- Server API를 호출하는 데 사용할 수 있는 응용 프로그램 서버에 액세스할 수 있습니다.
- Edge Network 서버 API에 액세스할 수 있습니다.
- 개인화할 페이지에 웹 SDK를 올바르게 구성하고 배포했습니다.
흐름 다이어그램 flow-diagram
아래 흐름 다이어그램은 하이브리드 개인화를 제공하기 위해 취한 단계 순서를 설명합니다.
- 브라우저에서 이전에 저장한 기존 쿠키(접두사가
kndctr_
인)는 브라우저 요청에 포함됩니다. - 클라이언트 웹 브라우저는 애플리케이션 서버에서 웹 페이지를 요청합니다.
- 응용 프로그램 서버가 페이지 요청을 받으면 Server API 대화형 데이터 수집 끝점에
POST
을(를) 요청하여 개인화 콘텐츠를 가져옵니다.POST
요청에event
및query
이(가) 포함되어 있습니다. 사용 가능한 경우 이전 단계의 쿠키가meta>state>entries
배열에 포함됩니다. - 서버 API는 개인화 콘텐츠를 애플리케이션 서버에 반환합니다.
- 응용 프로그램 서버가 클라이언트 브라우저에 ID 및 클러스터 쿠키를 포함하는 HTML 응답을 반환합니다.
- 클라이언트 페이지에서 Web SDK
applyResponse
명령이 호출되어 이전 단계의 Server API 응답의 헤더와 본문을 전달합니다. renderDecisions
플래그가true
(으)로 설정되어 있으므로 Web SDK에서 Target Visual Experience Composer (VEC) 오퍼 및 Journey Optimizer 웹 채널 항목을 자동으로 렌더링합니다.- Target 양식 기반 HTML/JSON 오퍼 및 Journey Optimizer 코드 기반 경험은
applyProposition
메서드를 통해 수동으로 적용되어 제안의 개인화 콘텐츠를 기반으로 DOM을(를) 업데이트합니다. - Target 양식 기반 HTML/JSON 오퍼 및 Journey Optimizer 코드 기반 경험의 경우 반환된 콘텐츠가 표시된 시기를 나타내기 위해 표시 이벤트를 수동으로 보내야 합니다. 이 작업은
sendEvent
명령을 통해 수행됩니다.
쿠키 cookies
쿠키는 사용자 ID 및 클러스터 정보를 유지하는 데 사용됩니다. 하이브리드 구현을 사용하는 경우 웹 애플리케이션 서버는 요청 라이프사이클 동안 이러한 쿠키의 저장 및 전송을 처리합니다.
kndctr_AdobeOrg_identity
kndctr_AdobeOrg_cluster
배치 요청 request-placement
제안을 가져오고 디스플레이 알림을 보내려면 서버 API 요청이 필요합니다. 하이브리드 구현을 사용하는 경우 애플리케이션 서버는 서버 API에 이러한 요청을 수행합니다.
Analytics 영향 analytics
하이브리드 개인화를 구현할 때에는 Analytics에서 페이지 히트가 여러 번 계산되지 않도록 특별히 주의해야 합니다.
Analytics에 대해 데이터 스트림을 구성하면 페이지 히트가 캡처되도록 이벤트가 자동으로 전달됩니다.
이 구현의 샘플은 두 개의 서로 다른 데이터 스트림을 사용합니다.
- Analytics에 대해 구성된 데이터 스트림입니다. 이 데이터 스트림은 웹 SDK 상호 작용에 사용됩니다.
- Analytics 구성이 없는 두 번째 데이터 스트림입니다. 이 데이터 스트림은 서버 API 요청에 사용됩니다. Analytics에 대해 구성한 데이터 스트림과 동일한 대상 구성으로 이 데이터 스트림을 구성해야 합니다.
이렇게 하면 서버측 요청은 Analytics 이벤트를 등록하지 않지만 클라이언트측 요청은 등록합니다. 이렇게 하면 Analytics 요청이 정확하게 계산됩니다.
서버측 요청 server-side-request
아래 샘플 요청은 애플리케이션 서버가 개인화 콘텐츠를 검색하는 데 사용할 수 있는 서버 API 요청을 보여 줍니다.
API 형식
POST /ee/v2/interact
요청 request
curl -X POST "https://edge.adobedc.net/ee/v2/interact?dataStreamId={DATASTREAM_ID}"
-H "Content-Type: text/plain"
-d '{
"event":{
"xdm":{
"web":{
"webPageDetails":{
"URL":"http://localhost/"
},
"webReferrer":{
"URL":""
}
},
"identityMap":{
"FPID":[
{
"id":"xyz",
"authenticatedState":"ambiguous",
"primary":true
}
]
},
"timestamp":"2022-06-23T22:21:00.878Z"
},
"data":{
}
},
"query":{
"identity":{
"fetch":[
"ECID"
]
},
"personalization":{
"schemas":[
"https://ns.adobe.com/personalization/default-content-item",
"https://ns.adobe.com/personalization/html-content-item",
"https://ns.adobe.com/personalization/json-content-item",
"https://ns.adobe.com/personalization/redirect-item",
"https://ns.adobe.com/personalization/dom-action"
],
"decisionScopes":[
"__view__",
"sample-json-offer"
]
}
},
"meta":{
"state":{
"domain":"localhost",
"cookiesEnabled":true,
"entries":[
{
"key":"kndctr_XXX_AdobeOrg_identity",
"value":"abc123"
},
{
"key":"kndctr_XXX_AdobeOrg_cluster",
"value":"or2"
}
]
}
}
}'
dataStreamId
String
requestId
String
서버측 응답 server-response
아래 샘플 응답은 서버 API 응답의 모양을 보여줍니다.
{
"requestId":"5c539bd0-33bf-43b6-a054-2924ac58038b",
"handle":[
{
"payload":[
{
"id":"XXX",
"namespace":{
"code":"ECID"
}
}
],
"type":"identity:result"
},
{
"payload":[
{
"..."
},
{
"..."
}
],
"type":"personalization:decisions",
"eventIndex":0
}
]
}
클라이언트측 요청 client-request
클라이언트 페이지에서 Web SDK applyResponse
명령이 호출되어 서버측 응답의 헤더와 본문을 전달합니다.
alloy("applyResponse", {
"renderDecisions": true,
"responseHeaders": {
"cache-control": "no-cache, no-store, max-age=0, no-transform, private",
"connection": "close",
"content-encoding": "deflate",
"content-type": "application/json;charset=utf-8",
"date": "Mon, 11 Jul 2022 19:42:01 GMT",
"server": "jag",
"strict-transport-security": "max-age=31536000; includeSubDomains",
"transfer-encoding": "chunked",
"vary": "Origin",
"x-adobe-edge": "OR2;9",
"x-content-type-options": "nosniff",
"x-konductor": "22.6.78-BLACKOUTSERVERDOMAINS:7fa23f82",
"x-rate-limit-remaining": "599",
"x-request-id": "5c539bd0-33bf-43b6-a054-2924ac58038b",
"x-xss-protection": "1; mode=block"
},
"responseBody": {
"requestId": "5c539bd0-33bf-43b6-a054-2924ac58038b",
"handle": [
{
"payload": [
{
"id": "XXX",
"namespace": {
"code": "ECID"
}
}
],
"type": "identity:result"
},
{
"payload": [
{...},
{...}
],
"type": "personalization:decisions",
"eventIndex": 0
}
]
}
}
).then(applyPersonalization("sample-json-offer"));
양식 기반 JSON 오퍼는 applyPersonalization
메서드를 통해 수동으로 적용되어 개인화 오퍼에 따라 DOM을(를) 업데이트합니다. 양식 기반 활동의 경우 오퍼가 표시된 시기를 나타내기 위해 표시 이벤트를 수동으로 보내야 합니다. 이 작업은 sendEvent
명령을 통해 수행됩니다.
function sendDisplayEvent(decision) {
const { id, scope, scopeDetails = {} } = decision;
alloy("sendEvent", {
"xdm": {
"eventType": "decisioning.propositionDisplay",
"_experience": {
"decisioning": {
"propositions": [{
"id": id,
"scope": scope,
"scopeDetails": scopeDetails
}],
"propositionEventType": {
"display": 1
}
}
}
}
});
}
샘플 애플리케이션 sample-app
이 유형의 개인화를 실험하고 자세히 알아볼 수 있도록 다운로드하여 테스트에 사용할 수 있는 샘플 애플리케이션을 제공합니다. 이 GitHub 저장소에서 응용 프로그램을 사용하는 방법에 대한 자세한 지침과 함께 다운로드할 수 있습니다.