Personalizzazione ibrida tramite SDK per web e API server di rete Edge

Panoramica

La personalizzazione ibrida descrive il processo di recupero del contenuto di personalizzazione lato server tramite l’ API server di rete Edge, e eseguirne il rendering lato client, utilizzando SDK per web.

Puoi utilizzare la personalizzazione ibrida con soluzioni di personalizzazione come Adobe Target o Offer Decisioning, con la differenza che i contenuti sono API server carico utile.

Prerequisiti

Prima di implementare la personalizzazione ibrida sulle proprietà web, assicurati di soddisfare le seguenti condizioni:

• Hai deciso quale soluzione di personalizzazione desideri utilizzare. Questo avrà un impatto sui contenuti del API server carico utile.
• È possibile accedere a un server applicazioni che è possibile utilizzare per API server chiamate.
• Hai accesso al API server di rete Edge.
• Hai corretto configurati e distribuiti SDK per web sulle pagine che desideri personalizzare.

Diagramma di flusso

Il diagramma di flusso seguente descrive l’ordine dei passaggi effettuati per distribuire la personalizzazione ibrida.

1. Eventuali cookie esistenti precedentemente memorizzati dal browser, con prefisso kndctr_, sono inclusi nella richiesta del browser.
2. Il browser Web client richiede la pagina Web dal server applicazioni.
3. Quando l'application server riceve la richiesta di pagina, effettua un POST richiesta al Endpoint di raccolta dati interattivi API server per recuperare il contenuto della personalizzazione. La POST la richiesta contiene un event e query. I cookie del passaggio precedente, se disponibili, sono inclusi nella meta>state>entries array.
4. L’API server restituisce il contenuto di personalizzazione al server delle applicazioni.
5. Il server applicazioni restituisce una risposta HTML al browser client, contenente il cookie di identità e cluster.
6. Nella pagina del client, il Web SDK applyResponse viene chiamato, passando le intestazioni e il corpo del API server risposta dal passaggio precedente.
7. La Web SDK esegue il rendering del caricamento della pagina Visual Experience Composer (VEC) offre automaticamente, perché renderDecisions flag impostato su true.
8. Basato su modulo JSON le offerte vengono applicate manualmente tramite applyPersonalization per aggiornare DOM in base all’offerta di personalizzazione.
9. Per le attività basate su moduli, è necessario inviare manualmente gli eventi di visualizzazione per indicare quando l’offerta è stata visualizzata. Questo avviene tramite il sendEvent comando.

Cookie

I cookie vengono utilizzati per mantenere l'identità utente e le informazioni sui cluster. Quando si utilizza un'implementazione ibrida, il server dell'applicazione Web gestisce la memorizzazione e l'invio di questi cookie durante il ciclo di vita della richiesta.

Inserimento di richieste

Le richieste API del server sono necessarie per ottenere le proposte e inviare una notifica di visualizzazione. Quando si utilizza un'implementazione ibrida, il server applicazioni effettua queste richieste all'API server.

Implicazioni di Analytics

Quando implementi la personalizzazione ibrida, devi prestare particolare attenzione affinché gli hit di pagina non vengano conteggiati più volte in Analytics.

Quando configurare un datastream per Analytics, gli eventi vengono inoltrati automaticamente in modo da acquisire gli hit di pagina.

L'esempio di questa implementazione utilizza due diversi datastreams:

• Un datastream configurato per Analytics. Questo datastream viene utilizzato per le interazioni SDK per web.
• Un secondo datastream senza una configurazione Analytics. Questo datastream viene utilizzato per le richieste API del server.

In questo modo, la richiesta lato server non registra eventi di Analytics, ma le richieste lato client sì. Questo fa sì che le richieste di Analytics vengano conteggiate con precisione.

Richiesta lato server

La richiesta di esempio riportata di seguito illustra una richiesta API server che il server applicazioni potrebbe utilizzare per recuperare il contenuto di personalizzazione.

Formato API

POST /ee/v2/interact

Richiesta

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"
            }
         ]
      }
   }
}'

Risposta lato server

La risposta di esempio seguente mostra l'aspetto della risposta API server.

{
   "requestId":"5c539bd0-33bf-43b6-a054-2924ac58038b",
   "handle":[
      {
         "payload":[
            {
               "id":"XXX",
               "namespace":{
                  "code":"ECID"
               }
            }
         ],
         "type":"identity:result"
      },
      {
         "payload":[
            {
               "..."
            },
            {
               "..."
            }
         ],
         "type":"personalization:decisions",
         "eventIndex":0
      }
   ]
}

Richiesta lato client

Nella pagina del client, il Web SDK applyResponse viene chiamato , passando le intestazioni e il corpo della risposta lato server.

   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"));

Basato su modulo JSON le offerte vengono applicate manualmente tramite applyPersonalization per aggiornare DOM in base all’offerta di personalizzazione. Per le attività basate su moduli, è necessario inviare manualmente gli eventi di visualizzazione per indicare quando l’offerta è stata visualizzata. Questo avviene tramite il sendEvent comando.

function sendDisplayEvent(decision) {
    const { id, scope, scopeDetails = {} } = decision;

    alloy("sendEvent", {
        xdm: {
            eventType: "decisioning.propositionDisplay",
            _experience: {
                decisioning: {
                    propositions: [
                        {
                            id: id,
                            scope: scope,
                            scopeDetails: scopeDetails,
                        },
                    ],
                },
            },
        },
    });
}

Applicazione di esempio

Per aiutarti a sperimentare e scoprire di più su questo tipo di personalizzazione, forniamo un’applicazione di esempio che puoi scaricare e utilizzare per i test. È possibile scaricare l'applicazione, insieme a istruzioni dettagliate su come usarla, da questo Archivio GitHub.

Risorse Business.Adobe.com