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:
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
-
Web SDK è incluso nella pagina.
-
È 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"));
-
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. -
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, }, ], }, }, }, }); }
-
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.
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
.
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
-
La pagina Web è richiesta e sono inclusi tutti i cookie precedentemente memorizzati dal browser con prefisso
kndctr_
. -
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'arraymeta>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());
-
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.
-
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, } ); }
-
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.
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
.
Diagramma di flusso
Implementazione ibrida hybrid-implementation
Se disponi di un’implementazione ibrida, consulta i collegamenti riportati di seguito.
- Blog di Adobe Tech: Personalization ibrido nell'SDK Web per Adobe Experience Platform
- Documentazione SDK: Personalizzazione ibrida tramite Web SDK e Edge Network Server API