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.

Stackchat

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

Stackchat

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.

Stackchat

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.

Stackchat

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

Integrazione Stackchat Adobe Experience Platform

Successivamente, scegli Adobe Experience Platform dalla finestra modale:

Integrazione Stackchat Adobe Experience Platform

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

Integrazione Stackchat Adobe Experience Platform

È 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:

Stackchat

Dopo aver compilato questi valori, ora dovresti avere questo:

Stackchat

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.

Stackchat

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

Stackchat

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.

Integrazione Stackchat Adobe Experience Platform

NOTA

Se ottieni un Credenziali AEP non valide errore, verifica di aver copiato/incollato correttamente tutto.

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.

Integrazione Stackchat Adobe Experience Platform

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.

Integrazione Stackchat Adobe Experience Platform

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.

Integrazione Stackchat Adobe Experience Platform

20.5.4 Mappatura del profilo

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

Integrazione Stackchat Adobe Experience Platform

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

Integrazione Stackchat Adobe Experience Platform

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

Nome slot Mappatura schema
ECID --aepTenantId--.identity.core.ecid
E-mail --aepTenantId--.identity.core.email
Nome person.name.firstName
NpsScore --aepTenantId--.customerSatisfactionScore.score
NpsFeedback --aepTenantId--.customerSatisfactionScore.feedback
NPSFeedbackText --aepTenantId--.customerSatisfactionScore.detailFeedback

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

Integrazione Stackchat Adobe Experience Platform

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

Integrazione Stackchat Adobe Experience Platform

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:

Integrazione Stackchat Adobe Experience Platform

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 .

Nome slot Mappatura schema
ID utente --aepTenantId--.identity.core.stackchatId
ECID --aepTenantId--.identity.core.ecid
E-mail --aepTenantId--.identity.core.email

La mappatura finale dovrebbe essere simile alla seguente:

Integrazione Stackchat Adobe Experience Platform

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.

Integrazione Stackchat Adobe Experience Platform

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.

VSC

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

VSC

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

VSC

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ì:

VSC

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:

VSC

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

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

VSC

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:

ACOP

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

VSC

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

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

vs_terminale-aperto

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

NOTA

Assicurati di lavorare nella directory corretta. Per i seguenti passaggi dovremo lavorare all’interno di /funzioni cloud directory. Per confermare questo tipo pwd (stampare la directory di lavoro) all'interno del terminale e premere enter. Se il percorso stampato termina con /funzioni cloud allora sei tutto pronto, se non provi a correre funzioni cloud cd per impostare la directory corretta. Ora, riesegui pwd, ora dovresti vedere la fine del percorso con /funzioni cloud.

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

vs_terminale-aperto

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

funzioni vs-dist-cloud

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 .

ui_cloud-features-update

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.

Integrazione Stackchat Adobe Experience Platform

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.

demo

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

demo

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

demo

Vedrete questo. Fai clic su .

demo

Quindi, fornisci il tuo indirizzo e-mail.

demo

Conferma l’indirizzo e-mail facendo clic su .

demo

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

demo

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.

demo

NOTA

Noterai che se ora ripeti la Ho bisogno di idee flow, Luma Bot ricorda i prodotti che ti erano piaciuti in precedenza e li mostrerà come consiglio. A tale scopo, recupera le prodotto visualizzato eventi da Adobe Experience Platform.

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

demo

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

demo

Fai clic su Felice!

demo

Fornisci un feedback dettagliato aggiuntivo e fai clic su Invia.

demo

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:

demo

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.

demo

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

demo

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

demo

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.

demo

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

In questa pagina