使用Web SDK和邊緣網路伺服器API的混合個人化
總覽
Hybdrid個人化說明在伺服器端擷取個人化內容的程式，使用 邊緣網路伺服器API，並在用戶端呈現，使用 Web SDK.
您可以搭配Adobe Target或Offer decisioning等個人化解決方案使用混合個人化，差異在於 伺服器API 裝載。
先決條件
在Web屬性上實作混合個人化之前，請確定您符合下列條件：
- 您已決定要使用哪個個人化解決方案。 這會影響 伺服器API 裝載。
- 您可以存取應用程式伺服器，以便用來 伺服器API 呼叫。
- 您可以存取 邊緣網路伺服器API.
- 您已正確 配置和部署 網頁上的網頁SDK。
流程圖
以下流程圖表說明提供混合個人化所採取步驟的順序。
- 瀏覽器先前儲存的任何現有Cookie，首碼為
kndctr_，會包含在瀏覽器請求中。 - 客戶端Web瀏覽器向應用伺服器請求該網頁。
- 應用程式伺服器收到頁面請求時，會發出
POST請求 伺服器API互動式資料收集端點 擷取個人化內容。 此POST要求包含event和query. 前一步驟的Cookie（若有）會包含在meta>state>entries陣列。 - 伺服器API會將個人化內容傳回至您的應用程式伺服器。
- 應用程式伺服器會傳回HTML回應給用戶端瀏覽器，其中包含 身分和叢集Cookie.
- 在用戶端頁面上， Web SDK
applyResponse會呼叫，並傳遞標題和內文 伺服器API 上一步的回應。 - 此 Web SDK 呈現頁面載入 Visual Experience Composer (VEC) 自動提供，因為
renderDecisions標幟設為true. - 表單式 JSON 選件會透過手動套用
applyPersonalization方法，要更新 DOM 根據個人化選件。 - 對於表單式活動，必須手動傳送顯示事件，以指出已顯示選件。 這是透過
sendEvent命令。
Cookie
Cookie可用來保存使用者身分和叢集資訊。 使用混合實作時，Web應用程式伺服器會在請求生命週期期間處理這些Cookie的儲存和傳送。
| Cookie | 用途 | 儲存者 | 傳送者 |
|---|---|---|---|
kndctr_AdobeOrg_identity |
包含使用者身分詳細資料。 | 應用程式伺服器 | 應用程式伺服器 |
kndctr_AdobeOrg_cluster |
指示應使用哪個邊緣網路群集來滿足請求。 | 應用程式伺服器 | 應用程式伺服器 |
請求投放
需要伺服器API請求才能獲取命題併發送顯示通知。 使用混合式實作時，應用程式伺服器會向伺服器API提出這些要求。
| 請求 | 製作者 |
|---|---|
| Interact請求以檢索主張 | 應用程式伺服器 |
| 傳送顯示通知的互動請求 | 應用程式伺服器 |
Analytics含意
實作混合個人化時，您必須特別注意，這樣Analytics就不會多次計算頁面點擊。
當您 設定資料流 若為Analytics，事件會自動轉送，以便擷取頁面點擊。
此實作的範例使用兩種不同的資料流：
- 為Analytics設定的資料流。 此資料流用於Web SDK互動。
- 不使用Analytics設定的第二個資料流。 此資料流用於伺服器API請求。
如此一來，伺服器端請求就不會註冊任何Analytics事件，但用戶端請求會註冊。 這會導致Analytics請求被準確計算。
伺服器端要求
以下範例要求說明您的應用程式伺服器可用於擷取個人化內容的伺服器API要求。
重要
此範例要求使用Adobe Target作為個人化解決方案。 您的請求可能會因您選擇的個人化解決方案而異。
API格式
POST /ee/v2/interact
請求
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 |
可以。 | 用來將互動傳遞至邊緣網路之資料流的ID。 請參閱 資料流概觀 了解如何設定資料流。 |
requestId |
String |
無 | 用於關聯內部伺服器請求的隨機ID。 若未提供，邊緣網路將產生一個，並在回應中傳回。 |
伺服器端回應
以下範例回應顯示伺服器API回應的外觀。
{
"requestId":"5c539bd0-33bf-43b6-a054-2924ac58038b",
"handle":[
{
"payload":[
{
"id":"XXX",
"namespace":{
"code":"ECID"
}
}
],
"type":"identity:result"
},
{
"payload":[
{
"..."
},
{
"..."
}
],
"type":"personalization:decisions",
"eventIndex":0
}
]
}
用戶端要求
在用戶端頁面上， 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,
},
],
},
},
},
});
}
範例應用程式
為協助您實驗並深入了解此類個人化，我們提供範例應用程式，供您下載並用於測試。 您可以從以下網址下載應用程式，以及如何使用應用程式的詳細指示 GitHub存放庫.
Business.Adobe.com 資源
變更語言
