使用Web SDK和Edge Network伺服器API的混合個人化
概觀 overview
Hybdrid個人化說明使用Edge Network伺服器API擷取個人化內容伺服器端，並使用Web SDK在使用者端轉譯該內容的程式。
您可以將混合式個人化與Adobe Target、Adobe Journey Optimizer或Offer Decisioning等個人化解決方案搭配使用，差異在於伺服器API裝載的內容。
先決條件 prerequisites
在Web屬性上實作混合個人化之前，請確定您符合下列條件：
- 您已決定要使用的個人化解決方案。 這會影響伺服器API裝載的內容。
- 您可以存取應用程式伺服器，以用來進行伺服器API呼叫。
- 您有權存取Edge Network伺服器API。
- 您已正確設定並在您想要個人化的頁面上部署Web SDK。
流程圖 flow-diagram
以下流程圖說明傳遞混合個人化所採取步驟的順序。
- 先前由瀏覽器儲存且前置詞為
kndctr_的任何現有Cookie都會包含在瀏覽器請求中。 - 使用者端網頁瀏覽器會向應用程式伺服器要求網頁。
- 應用程式伺服器收到頁面要求時，會向伺服器API互動式資料收集端點發出
POST要求，以擷取個人化內容。POST要求包含event和query。 先前步驟的Cookie （若有）包含在meta>state>entries陣列中。 - 伺服器API會將個人化內容傳回至您的應用程式伺服器。
- 應用程式伺服器傳回HTML回應給使用者端瀏覽器，其中包含識別與叢集Cookie。
- 在使用者端頁面上呼叫Web SDK
applyResponse命令，傳入上一步驟之伺服器API回應的標題和內文。 - Web SDK會自動轉譯Target Visual Experience Composer (VEC)選件和Journey Optimizer Web Channel專案，因為
renderDecisions標幟已設為true。 - 透過
applyProposition方法手動套用Target表單式HTML/JSON選件和Journey Optimizer程式碼式體驗，以根據主張中的個人化內容更新DOM。 - 對於Target表單式HTML/JSON選件和Journey Optimizer程式碼式體驗，必須手動傳送顯示事件，以指出已顯示傳回內容的時間。 這是透過
sendEvent命令完成的。
Cookie cookies
Cookie可用來儲存使用者身分和叢集資訊。 使用混合實作時，Web應用程式伺服器會在請求生命週期期間處理這些Cookie的儲存和傳送。
Cookie
目的
儲存者
傳送者
kndctr_AdobeOrg_identity包含使用者身分詳細資訊。
應用程式伺服器
應用程式伺服器
kndctr_AdobeOrg_cluster指出應使用哪個Edge Network叢集來履行要求。
應用程式伺服器
應用程式伺服器
請求刊登 request-placement
需要伺服器API要求才能取得主張並傳送顯示通知。 使用混合實作時，應用程式伺服器會向伺服器API提出這些要求。
請求
製作者
擷取主張的互動請求
應用程式伺服器
傳送顯示通知的互動請求
應用程式伺服器
分析影響 analytics
實施混合個人化時，您必須特別注意，才不會在Analytics中多次計算頁面點選。
當您為Analytics設定資料流時，會自動轉送事件，以便擷取頁面點選。
此實作的範例使用兩個不同的資料串流：
- 為Analytics設定的資料串流。 此資料流用於Web SDK互動。
- 沒有Analytics設定的第二個資料串流。 此資料流用於伺服器API請求。 您必須使用與您為Analytics設定的資料流相同的目的地設定來設定此資料流。
如此一來，伺服器端要求不會註冊任何Analytics事件，但使用者端要求會註冊。 如此一來，Analytics請求就會被精確計算。
伺服器端要求 server-side-request
以下範例請求說明您的應用程式伺服器可用來擷取個人化內容的伺服器API請求。
IMPORTANT
此範例請求使用Adobe Target作為個人化解決方案。 您的請求可能會因您選擇的個人化解決方案而異。
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"
}
]
}
}
}'
參數
類型
必要
說明
requestIdString無
關聯內部伺服器請求的隨機ID。 如果未提供任何專案，Edge Network將會產生一個專案，並在回應中傳回。
伺服器端回應 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"));
透過applyPersonalization方法手動套用表單式JSON優惠，以根據個人化優惠更新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存放庫下載應用程式，以及有關如何使用的詳細說明。
recommendation-more-help
ad108910-6329-42f1-aa1d-5920a2b13636