Esempi di metodi di implementazione basati su codice implementation-samples

L’esperienza basata su codice supporta qualsiasi tipo di implementazione del cliente. In questa pagina puoi trovare esempi per ciascun metodo di implementazione:

IMPORTANT
Segui questo collegamento per trovare implementazioni di esempio per diversi casi d'uso di personalizzazione e sperimentazione. Eseguile ed eseguili per comprendere meglio quali sono i passaggi di implementazione necessari e come funziona il flusso di personalizzazione end-to-end.

Implementazione lato client client-side-implementation

Se disponi di un’implementazione lato client, puoi utilizzare uno degli SDK client AEP: AEP Web SDK o AEP Mobile SDK.

  • I passaggi riportati di seguito descrivono il processo di recupero del contenuto pubblicato sul server Edge dai percorsi di esperienza e dalle campagne basate su codice in un'implementazione Web SDK di esempio e la visualizzazione del contenuto personalizzato.

  • I passaggi per implementare un canale basato su codice utilizzando Mobile SDK sono descritti in questa esercitazione.

    note note
    NOTE
    Implementazioni di esempio per casi d'uso per dispositivi mobili sono disponibili per app iOS e app Android.

Come funziona - SDK per web client-side-how

  1. Web SDK è incluso nella pagina.

  2. È necessario utilizzare il comando sendEvent e specificare l'URI di superficie per recuperare il contenuto di personalizzazione.

    code language-javascript
    alloy("sendEvent", {
    renderDecisions: true,
    personalization: {
        surfaces: ["#sample-json-content"],
    },
    }).then(applyPersonalization("#sample-json-content"));
    
  3. Gli elementi esperienza basati su codice devono essere applicati manualmente dal codice di implementazione (utilizzando il metodo applyPersonalization) per aggiornare il DOM in base alla decisione.

  4. Per percorsi di esperienza e campagne basati su codice, gli eventi di visualizzazione devono essere inviati manualmente per indicare quando è stato visualizzato il contenuto. Questa operazione viene eseguita tramite il comando sendEvent.

    code language-javascript
    function sendDisplayEvent(decision) {
      const { id, scope, scopeDetails = {} } = decision;
    
      alloy("sendEvent", {
    
        xdm: {
          eventType: "decisioning.propositionDisplay",
          _experience: {
            decisioning: {
              propositions: [
                {
                  id: id,
                  scope: scope,
                  scopeDetails: scopeDetails,
                },
              ],
            },
          },
        },
      });
    }
    
  5. Per percorsi di esperienza e campagne basati su codice, gli eventi di interazione devono essere inviati manualmente per indicare quando un utente ha interagito con il contenuto. Questa operazione viene eseguita tramite il comando sendEvent.

    code language-javascript
    function sendInteractEvent(label, proposition) {
      const { id, scope, scopeDetails = {} } = proposition;
    
      alloy("sendEvent", {
    
        xdm: {
          eventType: "decisioning.propositionInteract",
          _experience: {
            decisioning: {
              propositions: [
                {
                  id: id,
                  scope: scope,
                  scopeDetails: scopeDetails,
                },
              ],
              propositionEventType: {
                interact: 1
              },
              propositionAction: {
                label: label
              },
            },
          },
        },
      });
    }
    

Osservazioni chiave

Cookie

I cookie vengono utilizzati per rendere persistenti l’identità dell’utente e le informazioni sul cluster. Quando si utilizza un’implementazione lato client, Web SDK gestisce automaticamente l’archiviazione e l’invio di questi cookie durante il ciclo di vita della richiesta.

Cookie
Scopo
Archiviato da
Inviato da
kndctr_AdobeOrg_identity
Contiene i dettagli dell’identità utente
Web SDK
Web SDK
kndctr_AdobeOrg_cluster
Indica quale cluster di Experience Edge deve essere utilizzato per soddisfare le richieste
Web SDK
Web SDK

Posizionamento richiesta

Le richieste all’API di Adobe Experience Platform sono necessarie per ottenere proposte e inviare una notifica di visualizzazione. Quando si utilizza un'implementazione lato client, Web SDK effettua queste richieste quando si utilizza il comando sendEvent.

Richiesta
Creato da
richiesta di interazione per ottenere proposte
Web SDK tramite il comando sendEvent
richiesta di interazione per inviare notifiche di visualizzazione
Web SDK tramite il comando sendEvent

Diagramma di flusso

Implementazione lato server server-side-implementation

Se disponi di un’implementazione lato server, puoi utilizzare una delle API Edge Network di AEP.

I passaggi seguenti descrivono il processo di recupero dei contenuti pubblicati sul server Edge dai percorsi di esperienza e dalle campagne basate su codice, in un Edge Network di implementazione API per una pagina web, e di visualizzazione dei contenuti personalizzati.

Come funziona

  1. La pagina Web è richiesta e sono inclusi tutti i cookie precedentemente memorizzati dal browser con prefisso kndctr_.

  2. Quando la pagina viene richiesta dal server app, viene inviato un evento all'endpoint di raccolta dati interattiva per recuperare il contenuto di personalizzazione. Questa app di esempio utilizza alcuni metodi di supporto per semplificare la creazione e l'invio di richieste all'API (vedi aepEdgeClient.js). Ma la richiesta è semplicemente un POST con un payload che contiene un evento e una query. I cookie (se disponibili) del passaggio precedente sono inclusi nella richiesta nell'array meta>state>entries.

    code language-javascript
    fetch(
      "https://edge.adobedc.net/ee/v2/interact?dataStreamId=abc&requestId=123",
      {
        headers: {
          accept: "*/*",
          "accept-language": "en-US,en;q=0.9",
          "cache-control": "no-cache",
          "content-type": "text/plain; charset=UTF-8",
          pragma: "no-cache",
          "sec-fetch-dest": "empty",
          "sec-fetch-mode": "cors",
          "sec-fetch-site": "cross-site",
          "sec-gpc": "1",
          "Referrer-Policy": "strict-origin-when-cross-origin",
          Referer: "https://localhost/",
        },
        body: JSON.stringify({
          event: {
            xdm: {
              eventType: "decisioning.propositionFetch",
              web: {
                webPageDetails: {
                  URL: "https://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",
              ],
              surfaces: ["web://localhost/","web://localhost/#sample-json-content"],
            },
          },
          meta: {
            state: {
              domain: "localhost",
              cookiesEnabled: true,
              entries: [
                {
                  key: "kndctr_XXX_AdobeOrg_identity",
                  value: "abc123",
                },
                {
                  key: "kndctr_XXX_AdobeOrg_cluster",
                  value: "or2",
                },
              ],
            },
          },
        }),
        method: "POST",
      }
    ).then((res) => res.json());
    
  3. L’esperienza JSON dai percorsi di esperienza e dalla campagna basati sul codice viene letta dalla risposta e utilizzata durante la produzione della risposta del HTML.

  4. Per percorsi di esperienza e campagne basati su codice, gli eventi di visualizzazione devono essere inviati manualmente nell’implementazione per indicare quando è stato visualizzato il contenuto del percorso o della campagna. In questo esempio, la notifica viene inviata lato server durante il ciclo di vita della richiesta.

    code language-javascript
    function sendDisplayEvent(aepEdgeClient, req, propositions, cookieEntries) {
      const address = getAddress(req);
    
      aepEdgeClient.interact(
        {
          event: {
            xdm: {
              web: {
                webPageDetails: { URL: address },
                webReferrer: { URL: "" },
              },
              timestamp: new Date().toISOString(),
              eventType: "decisioning.propositionDisplay",
              _experience: {
                decisioning: {
                  propositions: propositions.map((proposition) => {
                    const { id, scope, scopeDetails } = proposition;
    
                    return {
                      id,
                      scope,
                      scopeDetails,
                    };
                  }),
                },
              },
            },
          },
          query: { identity: { fetch: ["ECID"] } },
          meta: {
            state: {
              domain: "",
              cookiesEnabled: true,
              entries: [...cookieEntries],
            },
          },
        },
        {
          Referer: address,
        }
      );
    }
    
  5. Quando viene restituita la risposta del HTML, i cookie di identità e cluster vengono impostati nella risposta dal server applicazioni.

Osservazioni chiave

Cookie

I cookie vengono utilizzati per rendere persistenti l’identità dell’utente e le informazioni sul cluster. Quando si utilizza un’implementazione lato server, il server applicazioni deve gestire l’archiviazione e l’invio di questi cookie durante il ciclo di vita della richiesta.

Cookie
Scopo
Archiviato da
Inviato da
kndctr_AdobeOrg_identity
Contiene i dettagli dell’identità utente
server applicazioni
server applicazioni
kndctr_AdobeOrg_cluster
Indica quale cluster di Experience Edge deve essere utilizzato per soddisfare le richieste
server applicazioni
server applicazioni

Posizionamento richiesta

Le richieste all’API di Adobe Experience Platform sono necessarie per ottenere proposte e inviare una notifica di visualizzazione. Quando si utilizza un'implementazione lato client, Web SDK effettua queste richieste quando si utilizza il comando sendEvent.

Richiesta
Creato da
richiesta di interazione per ottenere proposte
server applicazioni che chiama l'API Adobe Experience Platform
richiesta di interazione per inviare notifiche di visualizzazione
server applicazioni che chiama l'API Adobe Experience Platform

Diagramma di flusso

Implementazione ibrida hybrid-implementation

Se disponi di un’implementazione ibrida, consulta i collegamenti riportati di seguito.

recommendation-more-help
b22c9c5d-9208-48f4-b874-1cefb8df4d76