웹 SDK 및 Edge Network API를 사용한 하이브리드 개인화

개요 overview

하이브리드 개인화는 개인화 콘텐츠 서버측을 검색하고 Edge Network API를 사용하며 Web SDK를 사용하여 클라이언트측을 렌더링하는 프로세스를 설명합니다.

Adobe Target, Adobe Journey Optimizer 또는 Offer Decisioning과 같은 개인화 솔루션에서 하이브리드 개인화를 사용할 수 있습니다. 차이점은 Edge Network API 페이로드의 콘텐츠입니다.

전제 조건 prerequisites

웹 속성에 하이브리드 개인화를 구현하기 전에 다음 조건을 충족하는지 확인하십시오.

흐름 다이어그램 flow-diagram

아래 흐름 다이어그램은 하이브리드 개인화를 제공하기 위해 취한 단계 순서를 설명합니다.

쿠키 cookies

쿠키는 사용자 ID 및 클러스터 정보를 유지하는 데 사용됩니다. 하이브리드 구현을 사용하는 경우 웹 애플리케이션 서버는 요청 라이프사이클 동안 이러한 쿠키의 저장 및 전송을 처리합니다.

배치 요청 request-placement

제안을 가져오고 디스플레이 알림을 보내려면 Edge Network API 요청이 필요합니다. 하이브리드 구현을 사용하는 경우 애플리케이션 서버는 Edge Network API에 이러한 요청을 수행합니다.

Edge Network 지역 호스트 설정 regional-host

Edge Network 지역 호스트를 설정하려면 먼저 kndctr_<orgId>_AdobeOrg_cluster 쿠키에서 다음 값을 가질 수 있는 위치 힌트를 읽습니다.

예: kndctr_53A16ACB5CC1D3760A495C99_AdobeOrg_cluster: va6

Edge Network 지역 호스트는 <location_hint>.server.adobedc.net 형식을 사용하며 다음 값을 가질 수 있습니다.

이러한 특정 호스트를 사용하면 요청이 이전에 사용자가 방문했던 동일한 Edge Network 위치로 이동하며, 사용자 데이터가 해당 호스트에 있으므로 시스템에서 최상의 경험을 제공할 수 있습니다.

위치 힌트(즉, 쿠키 없음)가 없으면 기본 호스트 server.adobedc.net을(를) 사용합니다.

Analytics 영향 analytics

하이브리드 개인화를 구현할 때에는 Analytics에서 페이지 히트가 여러 번 계산되지 않도록 특별히 주의해야 합니다.

Analytics에 대해 데이터 스트림을 구성하면 페이지 히트가 캡처되도록 이벤트가 자동으로 전달됩니다.

이 구현의 샘플은 두 개의 서로 다른 데이터 스트림을 사용합니다.

이렇게 하면 서버측 요청은 Analytics 이벤트를 등록하지 않지만 클라이언트측 요청은 등록합니다. 이렇게 하면 Analytics 요청이 정확하게 계산됩니다.

서버측 요청 빌드 server-side-request

아래 샘플 요청은 애플리케이션 서버가 개인화 콘텐츠를 검색하는 데 사용할 수 있는 Edge Network 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_53A16ACB5CC1D3760A495C99_AdobeOrg_identity",
           "value":"CiY0NzE0NzkwMTUyMzYzMzI4NDAxMjc3NDcwNzA2NTcxMjI3OTI1NVIRCJ_S-uCRMRABGAEqBElSTDHwAZ_S-uCRMQ=="
         }, {
           "key": "kndctr_53A16ACB5CC1D3760A495C99_AdobeOrg_consent",
           "value": "general=in"
         }, {
            "key": "kndctr_53A16ACB5CC1D3760A495C99_AdobeOrg_cluster",
            "value": "va6"
         }]
      }
   }
}'

프록시 헤더 proxy-headers

요청을 올바르게 처리하려면 다음 헤더가 필요합니다.

이러한 항목이 실제 클라이언트 정보를 가리키도록 올바르게 설정되었는지 확인하십시오. 예를 들어 X-Forwarded-For 헤더에는 적절한 지리적 위치를 사용하려면 클라이언트 IP가 포함되어야 합니다.

사용자 에이전트 헤더 user-agent-headers

요청을 올바르게 처리하려면 다음 사용자 에이전트 헤더를 사용하십시오.

기본값

낮은 엔트로피(필수):

높은 엔트로피(선택 사항):

Edge Network API 사양에 표시된 대로 요청을 보내야 합니다. 사용 사례에 필요한 경우 개인화 설명서를 참조하세요.

서버측 응답 server-response

Edge Network 응답에는 state:store 헤더에서 변환해야 하는 Set-Cookie 명령이 포함됩니다. 브라우저에 저장되고 웹 SDK 구현에서 사용할 수 있습니다.

쿠키는 클라이언트 쿠키뿐만 아니라 서버 구현에 대한 요청과 함께 전송되도록 최상위 도메인에서 설정해야 합니다. (또는 적어도 두 구현에서 모두 사용하는 공통 하위 도메인)

예:

쿠키가 두 경우에 공유되도록 .example.com에 설정해야 합니다.

서버측 응답은 데이터 스트림 구성에 따라 생성된 Handles(이)라는 조각으로 구성됩니다. 예를 들어 실시간 개인화 엔진은 personalization:decisions개의 핸들을 반환하지만 실시간 활성화 엔진은 activation:pull개의 핸들을 생성합니다.

아래 샘플 응답은 Edge Network 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 저장소에서 응용 프로그램을 사용하는 방법에 대한 자세한 지침과 함께 다운로드할 수 있습니다.