20.5 Configurare l'integrazione tra Stackchat e Adobe Experience Platform

Affinché Stackchat possa inviare e ricevere eventi da Adobe Experience Platform, devi creare e configurare un’integrazione in Stackchat Studio. Prima di configurare l'integrazione in Stackchat Studio, devi aver creato un progetto di Adobe I/O che ti consenta di interagire con le API Adobe Experience Platform.

20.5.1 Il tuo progetto Adobe I/O esistente

Nel modulo 3, durante l'esercizio 3.3.2 - Configurare il progetto Adobe I/O, hai creato un tuo progetto di Adobe I/O. Quando hai creato il progetto di Adobe I/O, è stata creata una coppia di certificati. Durante questo esercizio dovrai utilizzare la coppia di certificati. Se non lo hai più, segui i passaggi descritti in esercizio 3.3.2 - Configurare il progetto Adobe I/O per creare un nuovo progetto o semplicemente per generare una nuova coppia di certificati.

In entrambi i casi, prima di continuare è necessario avere questi file pronti:

• private.key
• certificate_pub.crt

Questi sono stati generati durante la configurazione del progetto di Adobe I/O e sono stati scaricati automaticamente nel computer in un file zip denominato config.zip.

Inoltre, dovrai aprire il progetto Adobe I/O per recuperare altre informazioni importanti sul tuo Account di servizio (JWT) come ID client, Segreto client e altro ancora.

Per farlo, vai a https://console.adobe.io/projects. Vedrete questo.

Vai a Progetti nella navigazione superiore. Cerca e quindi apri il progetto, che deve essere denominato Platform API ldap.

Dopo aver aperto il progetto, visualizzerai una visualizzazione simile. Fai clic su Account di servizio (JWT) per visualizzare le credenziali del progetto di Adobe I/O.

Vedrete questo. Tieni aperta questa schermata durante i successivi 2 passaggi, in quanto dovrai immettere queste credenziali nell’interfaccia utente di Stackchat Studio durante la configurazione dell’integrazione.

20.5.2 Aggiungi le tue credenziali I/O Adobi in Stackchat

In Stackchat Studio, fai clic su Integrazioni nel menu bot, quindi Aggiungi integrazione in alto a destra e

Successivamente, scegli Adobe Experience Platform dalla finestra modale:

Viene visualizzata la schermata di integrazione di Adobe Experience Platform vuota.

È ora necessario immettere i valori per tutti i campi nella scheda Autenticazione .

Campi dell’account del servizio JWT

I campi ID client, Segreto client, ID account tecnico e ID organizzazione IMS possono essere compilati copiando/incollando i valori dell’account del servizio JWT da questa pagina:

Dopo aver compilato questi valori, ora dovresti avere questo:

Chiave privata

La Chiave privata il campo deve contenere l'intero contenuto del private.key file generato come parte della configurazione del progetto di Adobe I/O. Apri private.key in un editor di testo e copia/incolla l’intero contenuto nell’input di testo Chiave privata.

Dopo aver incollato il tuo private.key in Stackchat Studio, ora dovresti avere questo:

ID connessione

L'ID connessione è l'ultima parte dell'ID di ingresso DCS, che è già stata salvata nell'ID di configurazione qui. Ma per salvare il clic, l’ID di ingresso DCS è il seguente:

--dcsInletId--

Ora devi solo copiare ogni carattere dopo il finale / nell’URL e incolla il valore nel ID connessione in Stackchat Studio, in questo esempio: 92b2eb1267c8fc7ee8b41a760a7d616714ca380b449d2d83e68adf692a0a28b1.

Quindi, fai clic su Verifica credenziali.

20.5.3 Configurare sandbox, schemi e set di dati

Stackchat invia due tipi di eventi a Adobe Experience Platform: eventi del profilo utente ed eventi di interazione comportamentale. Ogni tipo di evento richiede uno schema e un set di dati dedicati definiti in Adobe Experience Platform. In questo passaggio, dirai a Stackchat dove dovrebbe inviare i dati di profilo e interazione nella tua sandbox Adobe Experience Platform.

Se le tue credenziali nel passaggio precedente sono corrette, verrai automaticamente commutato in Routing dei dati scheda . Fai clic su Recupera sandbox.

Dopo aver recuperato le sandbox, cerca il nome della sandbox e selezionala. La sandbox da utilizzare è --aepSandboxId--. In questo esempio, la sandbox viene chiamata Abilitazione AEP FY21.

Attendi alcuni secondi durante il caricamento degli schemi e dei set di dati. Una volta caricata l’interfaccia utente, seleziona i seguenti valori:

• Schema del profilo: Sistema demo - Schema del profilo per Stackchat Chatbot (versione globale 1.1)
• Schema evento: Sistema demo - Schema evento per Stackchat Chatbot (versione globale 1.1)
• Set di dati del profilo: Sistema di demo - Set di dati profilo per Stackchat Chatbot (Global v1.1)
• Set di dati evento: Sistema demo - Set di dati evento per Stackchat Chatbot (Global v1.1)

Ora hit Salva configurazione quindi puoi passare al passaggio successivo.

20.5.4 Mappatura del profilo

In questa scheda successiva, mapperai gli slot Stackchat alle proprietà definite nello schema Adobe Experience Platform. Vedrai questo:

La prima mappatura da eseguire è la mappatura richiesta per l'ID Stackchat. Da Scegli una slot menu, seleziona ID utente.

Successivamente, devi aggiungere diverse mappature facoltative. Ecco una tabella di cosa mappare in più:

Per ciascuna mappatura, fai clic sul pulsante + per aggiungere una nuova mappatura.

Ad esempio, iniziamo mappando l'ID Experience Cloud dell'utente. Seleziona ECID dal Scegli una slot menu.

Stai andando alla grande! Ora ripeti questo processo per i seguenti slot creati in esercizio 20.2.2. Disporranno di proprietà dello schema corrispondenti configurate per voi.

La mappatura finale dovrebbe essere simile alla seguente:

Una volta mappati tutti questi, premi Mappatura degli aggiornamenti in alto a destra.

Mappatura eventi 20.5.5

In questa scheda, mapperai gli slot Stackchat agli eventi comportamentali che Stackchat invia a Adobe Experience Platform. Lo schema selezionato al passaggio 20.5.2 (Sistema demo - Schema evento per Stackchat Chatbot (versione globale 1.1)) ha --aepTenantId--.chatbotInteraction mixin che sarà popolato automaticamente da Stackchat con informazioni come il flusso di conversazione in cui l'utente è in, o quando una funzione cloud viene eseguita. Il tuo unico lavoro qui è mappare gli slot di identificazione in modo che Adobe Experience Platform possa attribuire questo comportamento all'utente corretto.

Aggiungi le seguenti mappature nella scheda Mappatura eventi .

La mappatura finale dovrebbe essere simile alla seguente:

Una volta mappati tutti questi, premi Mappatura degli aggiornamenti in alto a destra.

20.5.5 Invio di eventi di visualizzazione del prodotto a Adobe Experience Platform

Ci saranno situazioni in cui desideri inviare eventi a Adobe Experience Platform oltre al profilo utente e agli eventi comportamentali che Stackchat invia automaticamente. Quando si verifica questa situazione, è possibile inviare questi eventi speciali a Adobe Experience Platform tramite una funzione Stackchat Cloud.

In questa sezione, configureremo il tuo bot Luma per inviare Adobe Experience Platform Utente identificato eventi quando acquisiamo un indirizzo e-mail e Visualizzazione prodotto quando l'utente preme il pulsante ❤️ di una determinata scheda di prodotto.

Il pulsante ❤️ è già configurato come pulsante postback ciò significa che richiamerà una funzione cloud quando l'utente fa clic su di essa. Il pulsante ❤️ è configurato per richiamare l’ notifyAEPOfProductView funzione cloud e passa in un payload simile al seguente:

{
  name: result.name,
  imageUrl: result.image1.url,
  price: result.finalPrice,
  sku: result.SKU,
  pageUrl: BASE_PRODUCT_URL + result.productUrl
}

La notifyAEPOfProductView Il metodo è già configurato per creare un evento Adobe Experience Platform Product View da questo payload, ma deve conoscere l'ID della visualizzazione prodotto/schema identificato dall'utente dalla sandbox Adobe Experience Platform.

Torna all'ambiente Codice di Visual Studio e apri il file _constants.ts.

È ora necessario aggiornare queste tre righe di codice:

export const CUSTOM_EVENT_SCHEMA_ID = 'XXXX';   // For "product viewed" and "user identified" events
...
export const CUSTOM_EVENT_DATASET_ID = 'XXXX';
export const CUSTOM_EVENT_ORCHESTRATION_EVENT_ID = 'XXXX';

CUSTOM_EVENT_SCHEMA_ID

Per ottenere l'ID CUSTOM_EVENT_SCHEMA_ID, apri l'interfaccia utente di Adobe Experience Platform e vai alla Schemi pagina e ricerca Sistema demo - Schema evento per Stackchat Chatbot (versione globale 1.1) e fai clic su per aprire lo schema.

Per ottenere l’ID dello schema, copialo dall’URL, corrisponde al numero lungo alla fine della stringa di query, ad esempio fa8b21f33509e8ab9d5139b53652b61ec2b18dcea1388411.

Copia l’ID dello schema e incollalo in questo campo nel _constants.ts file:

export const CUSTOM_EVENT_SCHEMA_ID = 'fa8b21f33509e8ab9d5139b53652b61ec2b18dcea1388411';

Il tuo file _constants.ts dovrebbe ora essere così:

CUSTOM_EVENT_DATASET_ID

Ora facciamo lo stesso per il set di dati. Visualizza l’interfaccia utente di Adobe Experience Platform, apri la Set di dati pagina e cerca Sistema demo - Set di dati evento per Stackchat Chatbot (Global v1.1) e fai clic sul risultato risultante del set di dati.

Copia l’ID del set di dati dall’etichetta a destra e incollalo in questo campo nella sezione _constants.ts file:

export const CUSTOM_EVENT_DATASET_ID = 'paste-your-value-here';

Il tuo file _constants.ts dovrebbe ora essere così:

CUSTOM_EVENT_ORCHESTRATION_EVENT_ID

Un ultimo elemento rimanente: il tuo ID Journey Orchestration dal passaggio precedente! In 20.4 Utilizza il Journey Orchestration per attivare un follow-up e-mail dopo aver interagito con il tuo chatbot hai creato il tuo evento in Journey Orchestration. Copia l'ID evento orchestrazione creato e incollalo in questo campo nel _constants.ts file.

È possibile trovare l'ID evento orchestrazione qui:

In questo esempio, l'ID evento orchestrazione è bacd25051c871367b0e2d5e4a1af292c6b71673faf85aad776de0e010e0d88a

export const CUSTOM_EVENT_ORCHESTRATION_EVENT_ID = 'XXXX';

Il tuo file _constants.ts dovrebbe ora essere così. Salva le modifiche nel file _constants.ts

Siete pronti! Ora dobbiamo solo compilare il tuo codice e aggiornare le tue funzioni cloud in Stackchat Studio.

Innanzitutto, apri un terminale (Visualizza -> Terminale).

Verrà aperto un pannello nella parte inferiore della finestra Codice VS.

Crea le funzioni cloud eseguendo il seguente comando nel terminale: build di esecuzione npm e premere enter.

Verrà generata una cartella denominata ./dist che conterrà un singolo file denominato cloud-function.js.

Apri il file . cloud-function.js, copia tutto e incollalo nell'editor di funzioni cloud in Stackchat Studio, sostituendo il codice corrente, e premi il Salva pulsante .

Ottimo lavoro, ci sei quasi! Hit Pubblica nella parte inferiore della navigazione a sinistra e accarezzate una melodia nostalgica mentre aspettate la pubblicazione del vostro Luma Bot.

Al termine della pubblicazione del bot, apri il widget della chat e invia il messaggio /reset per cancellare la sessione di chat e ricominciare da capo.

Vedrete questo. Assegna il tuo nome e fai clic su Invia.

Quindi, seleziona la Ho bisogno di idee voce di menu.

Vedrete questo. Fai clic su Sì.

Quindi, fornisci il tuo indirizzo e-mail.

Conferma l’indirizzo e-mail facendo clic su Sì.

Vedrete che i prodotti Luma vengono visualizzati all’interno del chatbot.

Quindi, fai clic sul pulsante ❤️ su alcuni prodotti per generare eventi di visualizzazione dei prodotti e per attivare il tuo percorso nel Journey Orchestration.

Un paio di secondi dopo, dovresti ricevere un'e-mail da Adobe Experience Platform e Journey Orchestration con una promozione per l'elemento che ti è piaciuto.

La domanda successiva nel chatbot è se vi dispiacerebbe dare un feedback sulla vostra esperienza di chat. Fai clic su Sicuro.

Fai la tua scelta, in questo caso la scelta è Grande.

Fai clic su Felice!

Fornisci un feedback dettagliato aggiuntivo e fai clic su Invia.

Verifica ora l’acquisizione dei dati nel Profilo cliente in tempo reale di Adobe Experience Platform.

Vai a https://platform.adobe.com e passa a Profilo. Fai clic sul pulsante + Sfoglia pulsante . Vedrai questo:

Seleziona la Namespace Identity - E-mail e inserisci l'indirizzo email che hai inviato nella conversazione Stackchat. Fai clic su Visualizza quindi fai clic sul pulsante ID profilo del tuo profilo.

Verrà quindi visualizzata una panoramica di base del profilo del cliente in Adobe Experience Platform. Vai a Attributi.

In Attributi, vedrai cose come il tuo punteggio NPS e feedback dettagliato. Vai a Eventi.

In Eventi, vedrete tutte le interazioni che hanno avuto luogo. Se fai clic sul pulsante Visualizzare JSON pulsante, puoi vedere ancora più dettagli, come in questo caso, tutti i dettagli relativi all'evento di visualizzazione del prodotto sul prodotto Nadia Elements Shell.

Se hai ricevuto l’e-mail e sei stato in grado di visualizzare il tuo profilo in Adobe Experience Platform, la tua integrazione con Stackchat ora funziona bene e puoi continuare con il prossimo esercizio.

Passaggio successivo: 20.6 Testare il vostro chatbot sul sito web demo

Torna al modulo 20

Torna a tutti i moduli