使用網頁SDK和Edge Network API的混合個人化
概觀 overview
混合個人化描述使用Edge Network API擷取個人化內容伺服器端，並使用Web SDK在使用者端轉譯個人化內容的程式。
您可以將混合式個人化與Adobe Target、Adobe Journey Optimizer或Offer Decisioning等個人化解決方案搭配使用，差異在於Edge Network API裝載的內容。
先決條件 prerequisites
在Web屬性上實作混合個人化之前，請確定您符合下列條件：
- 您已決定要使用的個人化解決方案。 這會影響Edge Network API裝載的內容。
- 您有權存取可用於進行Edge Network API呼叫的應用程式伺服器。
- 您有權存取Edge Network API。
- 您已正確設定並在您想要個人化的頁面上部署網頁SDK。
流程圖 flow-diagram
以下流程圖說明傳遞混合個人化所採取步驟的順序。
- 先前由瀏覽器儲存且前置詞為
kndctr_的任何現有Cookie都會包含在瀏覽器請求中。 - 使用者端網頁瀏覽器會向應用程式伺服器要求網頁。
- 應用程式伺服器收到頁面要求時，會向
POSTEdge Network API互動式資料收集端點發出要求，以擷取個人化內容。POST要求包含event和query。 先前步驟的Cookie （若有）包含在meta>state>entries陣列中。 - Edge Network API會將個人化內容傳回至您的應用程式伺服器。
- 應用程式伺服器傳回HTML回應給使用者端瀏覽器，其中包含身分識別與叢集Cookie。
- 在使用者端頁面上呼叫Web SDK
applyResponse命令，傳入上一步驟之Edge Network API回應的標題和內文。 - Web SDK會自動轉譯Target Visual Experience Composer (VEC)選件和Journey Optimizer Web Channel專案，因為
renderDecisions標幟已設為true。 - 透過HTML方法手動套用Target表單式JSON/
applyProposition選件和Journey Optimizer程式碼式體驗，以根據主張中的個人化內容更新DOM。 - 對於Target表單式HTML/JSON選件和Journey Optimizer程式碼式體驗，必須手動傳送顯示事件，以指出已顯示傳回內容的時間。 這是透過
sendEvent命令完成的。
Cookie cookies
Cookie可用來儲存使用者身分和叢集資訊。 使用混合實作時，Web應用程式伺服器會在請求生命週期期間處理這些Cookie的儲存和傳送。
kndctr_AdobeOrg_identitykndctr_AdobeOrg_cluster請求刊登 request-placement
需要Edge Network API要求才能取得主張並傳送顯示通知。 使用混合實作時，應用程式伺服器會向Edge Network API提出這些要求。
建立Edge Network地區主機 regional-host
若要建立Edge Network區域主機，請先從kndctr_<orgId>_AdobeOrg_cluster Cookie讀取位置提示，其可具有下列值：
va6or2irl1ind1sgp3jpn3aus3
範例：kndctr_53A16ACB5CC1D3760A495C99_AdobeOrg_cluster: va6
Edge Network區域主機使用以下格式： <location_hint>.server.adobedc.net，而且可以有下列值：
va6.server.adobedc.netor2.server.adobedc.netirl1.server.adobedc.netind1.server.adobedc.netsgp3.server.adobedc.netjpn3.server.adobedc.netaus3.server.adobedc.net
透過使用這些特定主機，系統會將請求導向至使用者之前造訪過的Edge Network相同位置，且當使用者資料存在時，系統可提供最佳體驗。
如果沒有位置提示（亦即沒有Cookie），請使用預設主機： server.adobedc.net。
分析影響 analytics
實施混合個人化時，您必須特別注意，才不會在Analytics中多次計算頁面點選。
當您為Analytics設定資料流時，會自動轉送事件，以便擷取頁面點選。
此實作的範例使用兩個不同的資料串流：
- 為Analytics設定的資料串流。 此資料流用於網頁SDK互動。
- 沒有Analytics設定的第二個資料串流。 此資料流用於Edge Network API請求。 您必須使用與您為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"
}]
}
}
}'
requestIdStringProxy標題 proxy-headers
正確處理請求需要下列標頭。
RefererX-Forwarded-ForX-Forwarded-ProtoX-Forwarded-Host
請確定已正確設定這些專案，以指向實際的使用者端資訊。 例如，X-Forwarded-For標頭應包含使用者端IP，才能進行適當的地理位置。
User-Agent標題 user-agent-headers
使用下列使用者代理標題正確處理請求。
預設
User-Agent
低平均資訊量（必要）：
Sec-CH-UASec-CH-UA-MobileSec-CH-UA-Platform
高平均資訊量（選擇性）：
Sec-CH-UA-Platform-VersionSec-CH-UA-ArchSec-CH-UA-ModelSec-CH-UA-BitnessSec-CH-UA-WoW64
必須傳送要求，如Edge Network API規格中所示。 若您的使用案例需要，請參閱個人化檔案。
伺服器端回應 server-response
Edge Network回應將包含state:store個指示，這些指示應轉換成Set-Cookie標頭。 這些檔案會儲存在瀏覽器中，以供網頁SDK實作使用。
Cookie應設定在頂層網域上，以便隨著要求一起傳送給伺服器實施以及使用者端。 （或至少是兩個實作所使用的通用子網域）
範例：
- 伺服器端呼叫使用
api.example.com - 使用者端呼叫使用
adobe.example.com
Cookie應設定在.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存放庫下載應用程式，以及有關如何使用的詳細說明。