9.3 Prepara ad Offer decisioning la proprietà client di raccolta dati di Adobe Experience Platform e la configurazione dell'SDK per web

NOTA

L’utilizzo di Offer Decisioning in Adobe Experience Platform Web SDK è attualmente disponibile in fase di accesso anticipato a determinati utenti. Questa funzionalità non è disponibile per tutte le organizzazioni IMS.

9.3.1 Aggiorna il tuo Datastream

In Esercizio 0.2, hai creato il tuo Datastream. Hai quindi utilizzato il nome --demoProfileLdap-- - Demo System Datastream.

In questo esercizio, devi configurare che Datastream per lavorare con Offer Decisioning.

Per farlo, vai a https://experience.adobe.com/#/data-collection/. Vedrete questo. Fai clic su Datastreams o Datastreams (Beta).

Nell’angolo in alto a destra dello schermo, seleziona il nome della sandbox, che deve essere --aepSandboxId--.

Fai clic sull’icona Configurazione bordo nella barra di navigazione a sinistra

Cerca il tuo Datastream, denominato --demoProfileLdap-- - Demo System Datastream. Fai clic su Datastream per aprirlo.

WebSDK

Vedrete questo. Fai clic su accanto a Adobe Experience Platform quindi fai clic su Modifica.

WebSDK

Per abilitare Offer Decisioning, seleziona la casella per Offer Decisioning. Fai clic su Salva.

WebSDK

Le Datastream è ora pronto per lavorare con Offer Decisioning.

WebSDK

9.3.2 Configura la proprietà client di raccolta dati di Adobe Experience Platform per richiedere offerte personalizzate

Vai a https://experience.adobe.com/#/data-collection/, a Client. Cerca le proprietà di raccolta dati, denominate --demoProfileLdap-- - Demo System (DD/MM/YYYY). Apri la proprietà del client di raccolta dati per il Web.

WebSDK

Nella tua proprietà, vai a Regole e apri la regola Visualizzazione a pagina.

WebSDK

Fai clic per aprire Azione AEP Web SDK - Evento di invio.

WebSDK

Vedrete questo. Noterai l'opzione di menu per Ambiti decisionali.

WebSDK

Per ogni richiesta inviata al server Edge e a Adobe Experience Platform, è possibile fornire uno o più Ambiti decisionali. A Campo di applicazione della decisione è una combinazione di due elementi:

  • ID decisione
  • ID posizionamento

Diamo un'occhiata dove potete trovare questi due elementi.

9.3.2.1 Recupera il tuo ID posizionamento

La ID posizionamento identifica la posizione e il tipo di risorsa richiesti. Ad esempio, l’immagine protagonista nella home page del sito web Luma corrisponde alla ID posizionamento per Web - Immagine.

NOTA

Come parte del modulo 6, hai già configurato un’attività di targeting delle esperienze Adobe Target che cambierà l’immagine della posizione dell’eroe sulla homepage, come puoi vedere nella schermata . Per l'esercizio, ora farà apparire le tue offerte sull'immagine sotto l'immagine protagonista come indicato nello screenshot.

WebSDK

Per trovare il ID posizionamento per Web - Immagine vai su Adobe Journey Optimizer andando a Adobe Experience Cloud. Fai clic su Journey Optimizer.

ACOP

Verrai reindirizzato al Pagina principale in Journey Optimizer. In primo luogo, assicurati di utilizzare la sandbox corretta. La sandbox da utilizzare è denominata --aepSandboxId--. Per passare da una sandbox all’altra, fai clic su PROD DI PRODUZIONE (VA7) e selezionate la sandbox dall’elenco. In questo esempio, la sandbox è denominata Abilitazione AEP FY22. Allora sarai nel Pagina principale visualizzazione della sandbox --aepSandboxId--.

ACOP

Quindi, vai a Componenti e poi a Posizionamenti. Fai clic sul pulsante Web - Immagine posizionamento per visualizzarne i dettagli.

WebSDK

Come puoi vedere nell’immagine precedente, in questo esempio il ID posizionamento è xcore:offer-placement:14bf09dc4190ebba. Annota la ID posizionamento per il tuo posizionamento Web - Immagine come ne avrete bisogno nel prossimo esercizio.

9.3.2.2 Recupera il tuo ID decisione

La ID decisione identifica la combinazione di Offerte personalizzate e Offerte di fallback che desideri utilizzare. Nell’esercizio precedente, hai creato la tua Decisione e lo ha chiamato --demoProfileLdap-- - Luma Decision.

Per trovare il ID decisione per --demoProfileLdap-- - Luma Decision, vai a https://platform.adobe.com.

Quindi, vai a Offerte e poi vai a Decisioni. Fai clic per selezionare il tuo Decisione, denominato --demoProfileLdap-- - Luma Decision.

WebSDK

Come puoi vedere nell’immagine precedente, in questo esempio il ID decisione è xcore:offer-activity:14c052382e1b6505. Annota la ID decisione per la vostra decisione --demoProfileLdap-- - Luma Decision come ne avrete bisogno nel prossimo esercizio.

Ora che hai recuperato i due elementi necessari per creare un Ambiti decisionali, puoi continuare con il passaggio successivo, che comporta la codifica dell’ambito decisionale.

Codifica 9.3.2.3 BASE64

La Campo di applicazione della decisione è necessario immettere una stringa codificata BASE64. Questa stringa codificata BASE64 è una combinazione della ID posizionamento e ID decisione, come potete vedere di seguito.

{
  "activityId":"xcore:offer-activity:14c052382e1b6505",
  "placementId":"xcore:offer-placement:14bf09dc4190ebba"
}

La Campo di applicazione della decisione può essere generato in due modi:

  • Utilizzare un servizio pubblico come https://www.base64encode.org/. Immetti il codice JSON come menzionato sopra, fai clic su Codifica e otterrai la tua stringa codificata BASE64 qui sotto.

    WebSDK

  • Recupera la stringa codificata BASE64 da Adobe Experience Platform. Vai a Decisioni e fai clic su per aprire Decisione, denominato --demoProfileLdap-- - Luma Decision.

    WebSDK

    Dopo l'apertura --demoProfileLdap-- - Luma DecisionLo vedrete. Individua il posizionamento Web - Immagine e fai clic su Copia pulsante . Quindi, fai clic su Ambito della decisione codificato. La Campo di applicazione della decisione viene ora copiato negli Appunti.

    WebSDK

Quindi, torna a Launch, alla tua azione AEP Web SDK - Evento di invio.

WebSDK

Incolla l’ambito decisionale codificato nel campo di input.

WebSDK

Salva le modifiche nell’azione. AEP Web SDK - Evento di invio facendo clic su Mantieni modifiche.

WebSDK

Quindi, fai clic su Salva o Salva nella libreria

WebSDK

In Raccolta dati di Adobe Experience Platform, vai a Flusso di pubblicazione e aprire il Libreria di sviluppo denominato Principale. Fai clic su + Aggiungi tutte le risorse modificate quindi fai clic su Salva e genera per sviluppo. Le modifiche verranno ora pubblicate sul sito web demo.

WebSDK

Ogni volta che carichi un Pagina Generale ora, come per esempio la homepage del sito web demo, Offer Decisioning valuterà quale sia l'offerta applicabile e restituirà una risposta al sito web con i dettagli dell'offerta da mostrare. La visualizzazione dell’offerta sul sito web richiede una configurazione aggiuntiva, che eseguirai nel passaggio successivo.

9.3.3 Configura la proprietà client di raccolta dati di Adobe Experience Platform per ricevere e applicare offerte personalizzate

Vai a https://experience.adobe.com/#/data-collection/, a Proprietà. Cerca le proprietà di raccolta dati, denominate --demoProfileLdap-- - Demo System (DD/MM/YYYY). Apri la proprietà Raccolta dati per il Web.

WebSDK

Nella tua proprietà, vai a Regole.

WebSDK

Cerca e apri la regola Decisione ricevuta.

WebSDK

Vedrete questo. Apri l’azione . Posiziona l’offerta sulla pagina.

WebSDK

Fai clic su Apri editor

WebSDK

Sovrascrivi il codice incollando il codice seguente nell'editor.

if(!Array.isArray(event.decisions)) {
  console.log('No decisions returned')
  return;
}
console.log("decision",event.decisions)

event.decisions.forEach(function(payload) {
  payload.items.forEach(function(item){
    console.log("Response from Offer Decisioning ", item.data.content);

    var element = document.querySelector("#root > div > div > div.app-content > div > section.feature_part.padding_top > div > div.row.align-items-center.justify-content-between > div.col-lg-7.col-sm-6.\\30  > div");
    if(!element){
      console.log("Offer Placement Area Selector not found")
      return;
    }
    if(!item.data){
      return
    }
    //check if offer already exists
    var offer = document.querySelector("#root > div > div > div.app-content > div > section.feature_part.padding_top > div > div.row.align-items-center.justify-content-between > div.col-lg-7.col-sm-6.\\30  > div");
    if(!offer){
      element.insertAdjacentHTML('afterbegin', item.data.content)
    }
    else {
      console.log("item.data.deliveryURL: " + item.data.deliveryURL)
      document.querySelector("#root > div > div > div.app-content > div > section.feature_part.padding_top > div > div.row.align-items-center.justify-content-between > div.col-lg-7.col-sm-6.\\30  > div").style.background="url('"+item.data.deliveryURL+"')";
      document.querySelector("#root > div > div > div.app-content > div > section.feature_part.padding_top > div > div.row.align-items-center.justify-content-between > div.col-lg-7.col-sm-6.\\30  > div").style.backgroundRepeat="no-repeat";
      document.querySelector("#root > div > div > div.app-content > div > section.feature_part.padding_top > div > div.row.align-items-center.justify-content-between > div.col-lg-7.col-sm-6.\\30  > div").style.backgroundPosition="center center";
      document.querySelector("#root > div > div > div.app-content > div > section.feature_part.padding_top > div > div.row.align-items-center.justify-content-between > div.col-lg-7.col-sm-6.\\30  > div").style.backgroundSize = "contain";
    }
  })
});

Le linee 26-27-28-29 applicheranno al sito web l'immagine restituita dall'Offer decisioning. Fai clic su Salva.

WebSDK

Fai clic su Mantieni modifiche.

WebSDK

Quindi, fai clic su Salva o Salva nella libreria

WebSDK

In Raccolta dati di Adobe Experience Platform, vai a Flusso di pubblicazione e aprire il Libreria di sviluppo denominato Principale. Fai clic su + Aggiungi tutte le risorse modificate quindi fai clic su Salva e genera per sviluppo. Le modifiche verranno ora pubblicate sul sito web demo.

WebSDK

Con questa modifica, questa regola in Adobe Experience Platform Data Collection sarà in ascolto della risposta dell’Offer decisioning che fa parte della risposta dell’SDK per web e, quando la risposta viene ricevuta, l’immagine dell’offerta verrà visualizzata nella home page.

Osservando il sito web dimostrativo, vedrai che questa immagine verrà sostituita ora:

NOTA

Come parte del modulo 6, hai già configurato un’attività di targeting delle esperienze Adobe Target che cambierà l’immagine della posizione dell’eroe sulla homepage, come puoi vedere nella schermata . Per l'esercizio, ora farà apparire le tue offerte sull'immagine sotto l'immagine protagonista come indicato nello screenshot.

WebSDK

E invece delle immagini predefinite del sito web Luma, ora vedrai un'offerta come questa. In questo caso, viene visualizzata l’offerta di fallback.

WebSDK

Ora hai configurato 2 tipi di personalizzazione:

  • 1 Attività di targeting delle esperienze con Adobe Target nel modulo 6
  • 1 Implementazione di Offer decisioning tramite la proprietà Raccolta dati

Nel prossimo esercizio vedrai come combinare le offerte e le decisioni create in Adobe Journey Optimizer con un’attività di targeting delle esperienze Adobe Target.

Passaggio successivo: 9.4 Combinare Adobe Target e Offer Decisioning

Torna al modulo 9

Torna a tutti i moduli

In questa pagina