Distribuire le offerte tramite l’API Edge Decisioning edge-decisioning-api

Introduzione e prerequisiti edge-overview-and-prerequisites

Il Adobe Experience Platform Web SDK è una libreria JavaScript lato client che consente ai clienti di Adobe Experience Cloud di interagire con i vari servizi dell’Experience Cloud tramite la rete Edge di Experienci Platform.

Experienci 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.

Consulta la documentazione di Adobe Experience Platform su gestione delle decisioni per ulteriori informazioni su come distribuire offerte personalizzate utilizzando Adobe Experience Platform Web SDK.

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:

  1. Assicurati che la tua organizzazione disponga delle autorizzazioni appropriate per utilizzare l’SDK e che le autorizzazioni siano state configurate correttamente.

  2. Configurare lo stream di dati nella scheda Data Collection del tuo account in Adobe Experience Cloud.

  3. Installa l’SDK. Esistono diversi metodi per farlo, descritti nel Installare la pagina SDK. Questa pagina continuerà con ogni diverso metodo di implementazione.

Per utilizzare l’SDK, è necessario disporre di un’ schema e un flusso di dati definito.

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.

  1. Creare una proprietà tag

  2. Aggiungere il codice di incorporamento

  3. 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 su estensioni.

    Adobe Experience Platform Web SDK

    Configura estensione

  4. Creare il necessario Elementi dati. È necessario creare almeno una mappa identità di Platform Web SDK e un elemento dati di oggetti XDM di Platform Web SDK.

    Mappa identità

    Oggetto XDM

  5. Crea Regole:

    Aggiungi un’azione Invia evento di Platform Web SDK e aggiungi gli ambiti decisionali pertinenti alla configurazione di tale azione

    Rendering offerta

    Richiedi offerta

  6. Creare e pubblicare 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 pregenerata su questa pagina nel <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 di Chrome da utilizzare con il debug. Puoi trovarlo 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 sito web, includi lo script con la configurazione e il sendEvent funzione per inviare l’ambito della decisione all’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.

NOTE
Se nei registri non trovi una connessione al server Edge di, potresti dover disattivare il Ad Blocker.

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é puoi inviare più ambiti decisionali in uno sendEvent chiamata, 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;
recommendation-more-help
b22c9c5d-9208-48f4-b874-1cefb8df4d76