Personalização híbrida usando o SDK da Web e a API do servidor de rede de borda

Visão geral

A personalização Hybdrid descreve o processo de recuperação do conteúdo de personalização no lado do servidor, usando o API do Servidor de Rede de Bordae renderizando no lado do cliente, usando o Web SDK.

Você pode usar a personalização híbrida com soluções de personalização como o Adobe Target ou o Offer Decisioning, sendo a diferença o conteúdo da variável API do servidor carga.

Pré-requisitos

Antes de implementar a personalização híbrida em suas propriedades da Web, verifique se você atende às seguintes condições:

  • Você decidiu qual solução de personalização deseja usar. Isso terá impacto no conteúdo da variável API do servidor carga.
  • Você tem acesso a um servidor de aplicativos que pode ser usado para fazer o API do servidor chamadas .
  • Você tem acesso ao API do Servidor de Rede de Borda.
  • Você possui corretamente configurado e implantado SDK da Web nas páginas que você deseja personalizar.

Diagrama de fluxo

O diagrama de fluxo abaixo descreve a ordem das etapas tomadas para fornecer personalização híbrida.

O diagrama do fluxo visual mostrando a ordem das etapas tomadas para fornecer personalização híbrida.

  1. Todos os cookies existentes armazenados anteriormente pelo navegador, com o prefixo kndctr_, estão incluídos na solicitação do navegador.
  2. O navegador da Web cliente solicita a página da Web do servidor de aplicativos.
  3. Quando o servidor de aplicativos recebe a solicitação de página, ele faz uma POST à Ponto de extremidade da coleta de dados interativa da API do servidor para buscar conteúdo de personalização. O POST a solicitação contém um event e query. Os cookies da etapa anterior, se disponíveis, são incluídos na variável meta>state>entries matriz.
  4. A API do servidor retorna o conteúdo de personalização para o servidor de aplicativos.
  5. O servidor de aplicativos retorna uma resposta de HTML para o navegador cliente, contendo a variável cookies de identidade e cluster.
  6. Na página do cliente, a variável Web SDK applyResponse é chamado, transmitindo os cabeçalhos e o corpo do API do servidor da etapa anterior.
  7. O Web SDK renderiza o carregamento da página Visual Experience Composer (VEC) O oferece automaticamente, pois a variável renderDecisions sinalizador está definido como true.
  8. Baseado em formulário JSON as ofertas são aplicadas manualmente por meio da variável applyPersonalization , para atualizar a DOM com base na oferta de personalização.
  9. Para atividades baseadas em formulário, os eventos de exibição devem ser enviados manualmente para indicar quando a oferta foi exibida. Isso é feito por meio da variável sendEvent comando.

Cookies

Os cookies são usados para persistir a identidade do usuário e as informações do cluster. Ao usar uma implementação híbrida, o servidor de aplicativos Web manipula o armazenamento e o envio desses cookies durante o ciclo de vida da solicitação.

Cookie Propósito Armazenado por Enviado por
kndctr_AdobeOrg_identity Contém detalhes de identidade do usuário. Servidor de aplicativos Servidor de aplicativos
kndctr_AdobeOrg_cluster Indica qual cluster de Rede de Borda deve ser usado para atender às solicitações. Servidor de aplicativos Servidor de aplicativos

Solicitar posicionamento

As solicitações da API do servidor são necessárias para obter apresentações e enviar uma notificação de exibição. Ao usar uma implementação híbrida, o servidor de aplicativos faz essas solicitações à API do Servidor.

Solicitação Feito por
Solicitação de interação para recuperar apresentações Servidor de aplicativos
Solicitação de interação para enviar notificações de exibição Servidor de aplicativos

Implicações do Analytics

Ao implementar a personalização híbrida, você deve prestar atenção especial para que as ocorrências de página não sejam contadas várias vezes no Analytics.

Quando você configurar um conjunto de dados para o Analytics, os eventos são encaminhados automaticamente para que as ocorrências de página sejam capturadas.

O exemplo dessa implementação usa dois conjuntos de dados diferentes:

  • Um conjunto de dados configurado para o Analytics. Esse armazenamento de dados é usado para interações com o SDK da Web.
  • Um segundo armazenamento de dados sem uma configuração do Analytics. Esse armazenamento de dados é usado para solicitações de API do servidor.

Dessa forma, a solicitação do lado do servidor não registra nenhum evento do Analytics, mas as solicitações do lado do cliente registram. Isso faz com que as solicitações do Analytics sejam contadas com precisão.

Solicitação do lado do servidor

A solicitação de exemplo abaixo ilustra uma solicitação de API de servidor que o servidor de aplicativos pode usar para recuperar o conteúdo de personalização.

IMPORTANTE

Essa solicitação de exemplo usa o Adobe Target como uma solução de personalização. Sua solicitação pode variar de acordo com a solução de personalização escolhida.

Formato da API

POST /ee/v2/interact

Solicitação

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"
            }
         ]
      }
   }
}'
Parâmetro Tipo Obrigatório Descrição
dataStreamId String Sim. A ID do armazenamento de dados que você usa para transmitir as interações para a Rede de borda. Consulte a visão geral dos datastreams para saber como configurar um armazenamento de dados.
requestId String Não Uma ID aleatória para correlacionar solicitações internas do servidor. Se nenhum for fornecido, a Edge Network gerará um e o retornará na resposta.

Resposta do lado do servidor

O exemplo de resposta abaixo mostra como a resposta da API do servidor pode ser.

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

Solicitação do lado do cliente

Na página do cliente, a variável Web SDK applyResponse é chamado, transmitindo os cabeçalhos e o corpo da resposta do lado do servidor.

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

Baseado em formulário JSON as ofertas são aplicadas manualmente por meio da variável applyPersonalization , para atualizar a DOM com base na oferta de personalização. Para atividades baseadas em formulário, os eventos de exibição devem ser enviados manualmente para indicar quando a oferta foi exibida. Isso é feito por meio da variável 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,
                        },
                    ],
                },
            },
        },
    });
}

Exemplo de aplicativo

Para ajudar você a testar e saber mais sobre esse tipo de personalização, fornecemos um aplicativo de amostra que pode ser baixado e usado para testes. Você pode baixar o aplicativo, juntamente com instruções detalhadas sobre como usá-lo, a partir desta Repositório GitHub.

Nesta página