Hybrid-personalisering med Web SDK och Edge Network Server API
Översikt overview
Hybridanpassning beskriver processen att hämta innehåll på serversidan för personalisering med Edge Network Server-API och återge den på klientsidan med Web SDK.
Du kan använda hybridpersonalisering med personaliseringslösningar som Adobe Target, Adobe Journey Optimizer eller Offer decisioning. Skillnaden är innehållet i Server API-nyttolasten.
Förhandskrav prerequisites
Innan du implementerar hybridanpassning på dina webbegenskaper måste du se till att du uppfyller följande villkor:
- Ni har bestämt vilken personaliseringslösning ni vill använda. Detta påverkar innehållet i nyttolasten Server API.
- Du har åtkomst till en programserver som du kan använda för att ringa Server API-anropen.
- Du har åtkomst till Edge Network Server-API.
- Du har konfigurerat korrekt och distribuerat Web SDK på de sidor som du vill anpassa.
Flödesdiagram flow-diagram
Flödesdiagrammet nedan beskriver ordningen för de steg som vidtas för att leverera hybridpersonalisering.
- Alla befintliga cookies som tidigare lagrats av webbläsaren, med prefixet
kndctr_
, ingår i webbläsarbegäran. - Klientens webbläsare begär webbsidan från programservern.
- När programservern tar emot sidbegäran görs en
POST
-begäran till den interaktiva datainsamlingsslutpunkten för Server APIför att hämta personaliseringsinnehåll.POST
-begäran innehåller enevent
och enquery
. Cookies från föregående steg, om de är tillgängliga, ingår imeta>state>entries
-arrayen. - Server-API:t returnerar personaliseringsinnehållet till programservern.
- Programservern returnerar ett HTML-svar till klientwebbläsaren som innehåller identitets- och klustercookies.
- På klientsidan anropas kommandot Web SDK
applyResponse
som skickar sidhuvuden och brödtexten i Server API-svaret från föregående steg. - Web SDK återger mål Visual Experience Composer (VEC)-erbjudanden och Journey Optimizer Web Channel-objekt automatiskt, eftersom flaggan
renderDecisions
är inställd påtrue
. - Målformulärbaserade HTML/JSON-erbjudanden och kodbaserade Journey Optimizer-upplevelser tillämpas manuellt med metoden
applyProposition
för att uppdatera DOM baserat på personaliseringsinnehållet i förslaget. - För målformulärbaserade HTML/JSON-erbjudanden och kodbaserade Journey Optimizer-upplevelser måste visningshändelser skickas manuellt för att ange när det returnerade innehållet har visats. Detta görs via kommandot
sendEvent
.
Cookies cookies
Cookies används för att bevara användaridentitet och klusterinformation. När du använder en hybridimplementering hanterar webbprogramservern lagringen och sändningen av dessa cookies under livscykeln för begäran.
kndctr_AdobeOrg_identity
kndctr_AdobeOrg_cluster
Begär placering request-placement
Server-API-begäranden krävs för att hämta förslag och skicka ett visningsmeddelande. När du använder en hybridimplementering skickar programservern dessa begäranden till Server-API:t.
Analysens konsekvenser analytics
När ni implementerar hybridpersonalisering måste ni vara särskilt uppmärksamma på att sidträffar inte räknas flera gånger i Analytics.
När du konfigurerar en datastream för Analytics vidarebefordras händelser automatiskt så att sidträffar hämtas.
Exemplet från den här implementeringen använder två olika datastreams:
- En datastream har konfigurerats för Analytics. Datastream används för Web SDK-interaktioner.
- En andra datastream utan någon Analytics-konfiguration. Den här datastream används för Server-API-begäranden. Du måste konfigurera denna datastream med samma målkonfiguration som den datastream som du konfigurerade för Analytics.
På så sätt registreras inga Analytics-händelser i serversidans begäran, men det gör klientsidans begäranden. Detta leder till att Analytics-förfrågningar räknas korrekt.
Serverbegäran server-side-request
Exemplet nedan visar en Server API-begäran som din programserver kan använda för att hämta personaliseringsinnehållet.
API-format
POST /ee/v2/interact
Begäran 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
Serversidans svar server-response
Exemplet nedan visar hur Server-API-svaret kan se ut.
{
"requestId":"5c539bd0-33bf-43b6-a054-2924ac58038b",
"handle":[
{
"payload":[
{
"id":"XXX",
"namespace":{
"code":"ECID"
}
}
],
"type":"identity:result"
},
{
"payload":[
{
"..."
},
{
"..."
}
],
"type":"personalization:decisions",
"eventIndex":0
}
]
}
Begäran på klientsidan client-request
På klientsidan anropas kommandot Web SDK applyResponse
som skickar sidhuvuden och brödtext för svaret på serversidan.
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"));
Formulärbaserade JSON-erbjudanden tillämpas manuellt med metoden applyPersonalization
för att uppdatera DOM baserat på personaliseringserbjudandet. För formulärbaserade aktiviteter måste visningshändelser skickas manuellt för att ange när erbjudandet har visats. Detta görs via kommandot 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
}
}
}
}
});
}
Exempelprogram sample-app
För att du ska kunna experimentera och lära dig mer om den här typen av personalisering tillhandahåller vi ett exempelprogram som du kan hämta och använda för testning. Du kan hämta programmet tillsammans med detaljerade anvisningar om hur du använder det från den här GitHub-databasen.