Hybrid-personalisering med Web SDK och Edge Network API

Översikt overview

Hybrid-personalisering beskriver processen att hämta innehåll på serversidan för personalisering med Edge Network 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 Edge Network API-nyttolasten.

Förhandskrav prerequisites

Innan du implementerar hybridanpassning på dina webbegenskaper måste du se till att du uppfyller följande villkor:

Flödesdiagram flow-diagram

Flödesdiagrammet nedan beskriver ordningen för de steg som vidtas för att leverera hybridpersonalisering.

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.

Begär placering request-placement

Edge Network API-begäranden krävs för att få förslag och skicka ett visningsmeddelande. När du använder en hybridimplementering skickar programservern dessa begäranden till Edge Network API.

Upprätta Edge Network regionala värd regional-host

Om du vill etablera den regionala Edge Network-värden läser du först platstipset från cookien kndctr_<orgId>_AdobeOrg_cluster som kan ha följande värden:

Exempel: kndctr_53A16ACB5CC1D3760A495C99_AdobeOrg_cluster: va6

Edge Network regionala värd har följande format:<location_hint>.server.adobedc.net och kan ha följande värden:

Genom att använda dessa specifika värdar dirigeras förfrågningarna till samma Edge Network-plats som användaren besökte tidigare, och systemet kommer att kunna erbjuda den bästa upplevelsen när användardata finns där.

Om det inte finns något platstips (d.v.s. ingen cookie) använder du standardvärden: server.adobedc.net.

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:

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.

Bygg begäran på serversidan server-side-request

Exemplet nedan visar en Edge Network 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_53A16ACB5CC1D3760A495C99_AdobeOrg_identity",
           "value":"CiY0NzE0NzkwMTUyMzYzMzI4NDAxMjc3NDcwNzA2NTcxMjI3OTI1NVIRCJ_S-uCRMRABGAEqBElSTDHwAZ_S-uCRMQ=="
         }, {
           "key": "kndctr_53A16ACB5CC1D3760A495C99_AdobeOrg_consent",
           "value": "general=in"
         }, {
            "key": "kndctr_53A16ACB5CC1D3760A495C99_AdobeOrg_cluster",
            "value": "va6"
         }]
      }
   }
}'

Proxyrubriker proxy-headers

Följande huvuden krävs för att begäran ska kunna behandlas korrekt.

Se till att ställa in dessa korrekt så att de pekar på den faktiska klientinformationen. Rubriken X-Forwarded-For bör till exempel innehålla klient-IP för att rätt geopositionering ska kunna utföras.

Rubriker för användaragent user-agent-headers

Använd följande användaragentrubriker för att behandla begäran korrekt.

Standard

Låg entropi (obligatoriskt):

Hög entropi (valfritt):

Begäran måste skickas så som visas i Edge Network API-specifikationen. Se personaliseringsdokumentationen om ditt användningsexempel kräver det.

Serversidans svar server-response

Edge Network-svaret innehåller state:store instruktioner som ska omformas i Set-Cookie rubriker. De sparas i webbläsaren och de kan användas i Web SDK-implementeringen.

Cookies bör anges på den översta domänen så att de skickas tillsammans med begäranden till serverimplementeringen samt klientens. (Eller minst en gemensam underdomän som används av båda implementeringarna)

Exempel:

Cookies bör anges på .example.com så att de delas i båda fallen.

Serversidans svar är organiserat i fragment som kallas Handles, som genereras beroende på datastream-konfigurationen. Realtidspersonaliseringsmotorer returnerar till exempel personalization:decisions handtag medan aktiveringsmotorn i realtid skapar activation:pull handtag.

Exemplet nedan visar hur Edge Network 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.