Distribuire le offerte tramite l’API Edge Decisioning edge-decisioning-api
Introduzione e prerequisiti edge-overview-and-prerequisites
Adobe Experience Platform Web SDK è una libreria JavaScript lato client che consente ai clienti Adobe Experience Cloud di interagire con i vari servizi dell'Experience Cloud tramite l'Edge Network dell'Experience Platform.
Experience Platform Web SDK supporta l’esecuzione di query sulle soluzioni di personalizzazione di Adobe, inclusa la gestione delle decisioni, e consente di recuperare ed eseguire il rendering delle offerte personalizzate create utilizzando le API o la libreria delle offerte. Per istruzioni più dettagliate, consulta la documentazione su creazione di un'offerta.
Esistono due modi per implementare la gestione delle decisioni con Platform Web SDK. Una modalità è rivolta agli sviluppatori e richiede la conoscenza dei siti web e della programmazione. L’altro modo consiste nell’utilizzare l’interfaccia utente di Adobe Experience Platform per configurare le offerte; a tale scopo è necessario fare riferimento solo a uno script di piccole dimensioni nell’intestazione della pagina HTML.
Per ulteriori informazioni su come distribuire offerte personalizzate tramite Adobe Experience Platform Web SDK, consulta la documentazione di Adobe Experience Platform sulla gestione delle decisioni.
Adobe Experience Platform Web SDK aep-web-sdk
Platform Web SDK sostituisce i seguenti SDK:
- Visitor.js
- AppMeasurement.js
- AT.js
- DIL.js
L’SDK non ha combinato queste librerie ed è una nuova implementazione da zero. Per utilizzarlo, devi prima seguire questi passaggi:
-
Assicurati che la tua organizzazione disponga delle autorizzazioni appropriate per utilizzare l’SDK e che le autorizzazioni siano state configurate correttamente.
-
Configura lo stream di dati nella scheda Raccolta dati del tuo account in Adobe Experience Cloud.
-
Installa l’SDK. Esistono diversi metodi per eseguire questa operazione, descritti in Installare la pagina SDK. Questa pagina continuerà con ogni diverso metodo di implementazione.
Per utilizzare l'SDK, è necessario definire uno schema e uno flusso di dati.
Per personalizzare le offerte, devi configurare separatamente la personalizzazione o i profili.
Per configurare l’SDK per la gestione delle decisioni, segui uno dei due passaggi seguenti:
Opzione 1: installare l’estensione tag e l’implementazione tramite Launch
Questa opzione è più intuitiva per le persone che potrebbero avere meno esperienza di codifica.
-
Installa e configura l’estensione Adobe Experience Platform Web SDK con lo stream di dati creato selezionando la configurazione dal menu a discesa "Stream di dati". Consulta la documentazione sulle estensioni.
-
Creare gli elementi dati necessari. È necessario creare almeno una mappa identità di Platform Web SDK e un elemento dati di oggetti XDM di Platform Web SDK.
-
Crea le regole:
Aggiungi un’azione Invia evento di Platform Web SDK e aggiungi gli ambiti decisionali pertinenti alla configurazione di tale azione
-
Crea e pubblica una libreria contenente tutte le regole, gli elementi dati e le estensioni pertinenti che hai configurato.
Opzione 2: implementazione manuale utilizzando la versione autonoma predefinita
Di seguito sono riportati i passaggi necessari per utilizzare la gestione delle decisioni utilizzando l’installazione autonoma predefinita dell’SDK web. Questa guida presuppone che sia la prima volta che implementi l’SDK, quindi tutti i passaggi potrebbero non essere applicabili. Questa guida presuppone anche un certo grado di esperienza di sviluppo.
Includi il seguente snippet JavaScript dall'opzione 2: la versione standalone predefinita in questa pagina nella sezione <head> della pagina HTML.
javascript
<script>
!function(n,o){o.forEach(function(o){n[o]||((n.__alloyNS=n.__alloyNS||
[]).push(o),n[o]=function(){var u=arguments;return new Promise(
function(i,l){n[o].q.push([i,l,u])})},n[o].q=[])})}
(window,["alloy"]);
</script>
<script src="https://cdn1.adoberesources.net/alloy/2.6.4/alloy.js" async></script>
Per configurare la configurazione SDK, dovrai disporre di due ID all’interno dell’account Adobe: edgeConfigId e orgId. Il valore edgeConfigId è uguale all’ID dello stream di dati, che avresti dovuto configurare nei Prerequisiti.
Per trovare il tuo edgeConfigID/ID dello stream di dati, vai a Raccolta dati e seleziona lo stream di dati. Per trovare il tuo orgId, vai al tuo profilo.
Configura l’SDK in JavaScript seguendo le istruzioni riportate in questa pagina. Utilizza sempre il tuo edgeConfigId e l’orgId nella funzione di configurazione. La documentazione descrive anche i parametri opzionali esistenti per la configurazione. La configurazione finale potrebbe avere un aspetto simile al seguente:
javascript
alloy("configure", {
"edgeConfigId": "12345678-0ABC-DEF-GHIJ-KLMNOPQRSTUV",
"orgId":"ABCDEFGHIJKLMNOPQRSTUVW@AdobeOrg",
"debugEnabled": true,
"edgeDomain": "edge.adobedc.net",
"clickCollectionEnabled": true,
"idMigrationEnabled": true,
"thirdPartyCookiesEnabled": true,
"defaultConsent":"in"
});
Installa l’estensione Debugger Chrome da utilizzare con il debug. Disponibile qui: https://chrome.google.com/webstore/detail/adobe-experience-platform/bfnnokhpnncpkdmbokanobigaccjkpob
Quindi, accedi al tuo account all’interno del debugger. Quindi, vai a Registri e assicurati di essere connesso all’area di lavoro corretta. Ora, copia la versione con codifica base64 dell’ambito di decisione dall’offerta.
Quando modifichi il tuo sito web, includi lo script con la configurazione e la funzione sendEvent per inviare l'ambito decisionale ad Adobe.
Esempio:
javascript
alloy("sendEvent", {
"decisionScopes":
[
"eyJ4ZG06YWN0aXZpdHlJZCI6Inhjb3JlOm9mZmVyLWFjdGl2aXR5OjE0ZWE4MDhhZjJjZDM1NzQiLCJ4ZG06cGxhY2VtZW50SWQiOiJ4Y29yZTpvZmZlci1wbGFjZW1lbnQ6MTRjNGFmZDI2OTXXXXXXXXXX"
]
});
Per un esempio su come gestire la risposta, consulta la sezione seguente:
javascript
alloy("sendEvent", {
"decisionScopes":
[
"eyJ4ZG06YWN0aXZpdHlJZCI6Inhjb3JlOm9mZmVyLWFjdGl2aXR5OjE0ZWE4MDhhZjJjZDM1NzQiLCJ4ZG06cGxhY2VtZW50SWQiOiJ4Y29yZTpvZmZlci1wbGFjZW1lbnQ6MTRjNGFmZDI2OTXXXXXXXXXX"
]
}).then(function(result) {
Object.entries(result).forEach(([key, value]) => {
console.log(key, value);
});
});
Puoi utilizzare il debugger per verificare di essersi connesso correttamente alla rete Edge.
Consulta come hai creato la tua offerta e la formattazione utilizzata. In base ai criteri soddisfatti nella decisione, all’utente verrà restituita un’offerta contenente le informazioni specificate al momento della creazione all’interno di Adobe Experience Platform.
In questo esempio, il JSON da restituire è:
json
{
"name":"ABC Test",
"description":"This is a test offer",
"link":"https://sampletesting.online/",
"image":"https://sample-demo-URL.png"
}
Gestisci l’oggetto di risposta e analizza i dati necessari. Poiché è possibile inviare più ambiti decisionali in una chiamata sendEvent, la risposta potrebbe essere leggermente diversa.
json
{
"id": "abrxgl843d913",
"scope": "eyJ4ZG06YWN0aXZpdHlJZCI6Inhjb3JlOm9mZmVyLWFjdGl2aXR5OjE0ZWE4MDhhZjJjZDM1NzQiLCJ4ZG06cGxhY2VtZW50SWQiOiJ4Y29yZTpvZmZlci1wbGFjZW1lbnQ6MTRjNGFmZDI2OTVlNWRmOSJ9",
"items":
[
{
"id": "xcore:fallback-offer:14ea7f1ea26ebd0a",
"etag": "1",
"schema": "https://ns.adobe.com/experience/offer-management/content-component-json",
"data": {
"id": "xcore:fallback-offer:14ea7f1ea26ebd0a",
"format": "application/json",
"language": [
"en-us"
],
"content": "{\"name\":\"ABC Test\",\"description\":\"This is a test offer\", \"link\":\"https://sampletesting.online/\",\"image\":\"https://sample-demo-URL.png\"}"
}
}
]
}
]
}
json
{
"propositions":
[
{
"renderAttempted": false,
"id": "e15ecb09-993e-4b66-93d8-0a4c77e3d913",
"scope": "eyJ4ZG06YWN0aXZpdHlJZCI6Inhjb3JlOm9mZmVyLWFjdGl2aXR5OjE0ZWE4MDhhZjJjZDM1NzQiLCJ4ZG06cGxhY2VtZW50SWQiOiJ4Y29yZTpvZmZlci1wbGFjZW1lbnQ6MTRjNGFmZDI2OTVlNWRmOSJ9",
"items":
[
{
"id": "xcore:fallback-offer:14ea7f1ea26ebd0a",
"etag": "1",
"schema": "https://ns.adobe.com/experience/offer-management/content-component-json",
"data": {
"id": "xcore:fallback-offer:14ea7f1ea26ebd0a",
"format": "application/json",
"language": [
"en-us"
],
"content": "{\"name\":\"Claire Hubacek Test\",\"description\":\"This is a test offer\", \"link\":\"https://sampletesting.online/\",\"image\":\"https://sample-demo-URL.png\"}"
}
}
]
}
]
}
In questo esempio, il percorso necessario per gestire e utilizzare i dettagli specifici dell'offerta nella pagina Web era: result['decisions'][0]['items'][0]['data']['content']
Per impostare le variabili JS:
javascript
const offer = JSON.parse(result['decisions'][0]['items'][0]['data']['content']);
let offerURL = offer['link'];
let offerDescription = offer['description'];
let offerImageURL = offer['image'];
document.getElementById("offerDescription").innerHTML = offerDescription;
document.getElementById('offerImage').src = offerImageURL;