22.4 Connetti la raccolta dati EXP News al tuo dashboard in tempo reale EXP News

Obiettivi

• Scopri come collegare il nostro Project Firefly EXP News Realtime applicazione dashboard alle informazioni in tempo reale, dal sito web EXP News, utilizzando Adobe Experience Platform Data Collection Server Side Forwarding.

Prerequisiti

Prima di avviare questo esercizio, assicurati di aver installato e configurato NodeJS e Adobe I/O CLI sul computer. Vedi Esercizio 22.1 - Configurazione dell'ambiente per i dettagli.

22.4.1 Scopri il webhook dell’app Project Firefly

Dobbiamo capire il webhook che possiamo collegare gli eventi di streaming dal sito web EXP News alla nostra applicazione dashboard. In realtà, avresti già dovuto notarlo come output del tuo aio app deploy dall’esercizio 22.3.2. Puoi copiarlo direttamente da qui; è la prima riga dell'elenco di Azione distribuita; l'unico finale con gancio. Ad esempio https://133309-rmaurexpnews-development.adobeio-static.net/api/v1/web/poc-platform-realtime-0.0.1/webhook. Copia l’URL per gancio e salvalo da qualche parte in modo da poterlo utilizzare in un secondo momento.

22.4.2 Configurare Adobe Experience Platform Data Collection Server Side Forwarding

Ora configureremo l'inoltro lato server per la nostra app Dashboard di Project Firefly EXP News Firefly utilizzando il webhook scoperto nell'esercizio precedente.

Vai a https://experience.adobe.com/#/data-collection/. Verifica di essere nell’organizzazione corretta, nell’angolo in alto a destra: --envName--.

Nel menu a sinistra, fai clic su Server. Viene visualizzata una panoramica delle proprietà del server.

Cerca la proprietà lato server creata come parte del modulo 21 (ad es. vangeluw - Demo System (24/04/2021) (Edge)) e fai clic su per aprirla.

Fai clic su Elementi dati nella barra a sinistra, quindi fai clic su Aggiungi elemento dati per aggiungere un nuovo elemento dati. Nella schermata di definizione dell’elemento dati fornisci le seguenti informazioni:

• Nome: brandName
• Estensione: select Core dall'elenco.
• Tipo di elemento dati: select Path dall'elenco.
• Percorso (obbligatorio): arc.event.xdm.--aepTenantId--.demoEnvironment.brandName

Fai clic su Salva per salvare l’elemento dati.

Fai clic su Regole nella barra a sinistra. Viene visualizzata una panoramica delle regole create per questa proprietà, con Tutte le pagine Regola dall'esercizio 21 elencato. Fai clic su Aggiungi regola.

In Crea regola schermo:

Fornisci un Nome ad esempio All Pages EXP News. Fai clic su + Aggiungi per aggiungere una nuova condizione .

In Configurazione condizione e fornire le seguenti informazioni:

• Tipo di logica: select Regular
• Estensione: select Core
• Condizione Tipo: select Value Comparison
• Nome: Core - Value Comparison
• Operando a sinistra (obbligatorio): select brandName dalla finestra di dialogo visualizzata facendo clic sull'icona dei tre cilindri. Il campo viene compilato con {{brandName}}.
• Operatore: select Equals
• Opera destra: type EXP News.

Fai clic su Mantieni modifiche per tornare al Crea regola schermo. Tornerai qui, fai clic su + Aggiungi per aggiungere una nuova azione.

In Configurazione azione forniscono le seguenti informazioni nel pannello a sinistra.

• Estensione: select Adobe Cloud Connector
• Tipo di azione: select Make Fetch Call
• Nome: Adobe Cloud Connector - Make Fetch Call
• Metodo (obbligatorio): select POST
• URL (obbligatorio): incolla qui il webhook che hai copiato e salvato dall'esercizio 22.4.1, ad esempio https://133309-rmaurexpnews-development.adobeio-static.net/api/v1/web/poc-platform-realtime-0.0.1/webhook

Fai clic su Corpo.

Assicura la Corpo si presenta così:

• Assicurati Raw è selezionato come Formato del corpo
• select Evento XDM dalla finestra di dialogo visualizzata quando si fa clic sull'icona dei tre cilindri dietro il campo sottostante Corpo (grezzo). Questo verrà inserito {{XDM Event}}.

Fai clic su Mantieni modifiche. Lo schermo dovrebbe avere questo aspetto. Fai clic su Salva.

Fai clic su Flusso di pubblicazione a sinistra per distribuire le modifiche nella configurazione di Adobe Experience Platform Data Collection Server.
Fai clic su … a destra v1 nel tuo Sviluppo e fai clic su Modifica.

In Modifica libreria schermata, fai clic su Aggiungi tutte le risorse modificate. Viene visualizzata una panoramica delle ultime modifiche. Fai clic su Salva e genera per sviluppo.

Dopo un po' tornerai alla schermata precedente. Attendere che il cerchio prima v1 smette di girare e diventa verde solido. Le regole di inoltro lato server aggiornate per le pagine EXP News sono state distribuite.

22.4.3 Mostra il dashboard in tempo reale di EXP News

Ora dimostreremo come le interazioni nel sito web EXP News verranno aggiornate in tempo reale nella nostra app Dashboard EXP News.

Per effettuare questo collegamento:

Vai su https://public.aepdemo.net.

Immetti l'ID di configurazione e fai clic su Carica configurazione.

Nella parte inferiore della pagina, fai clic su Salva configurazione

Fai clic su Seleziona LDAP e scegliere il nome LDAP dall'elenco. Fai clic su Salva.

Fai clic su Seleziona marchio e seleziona EXP News (Demo brand for mediaent) dall'elenco.

Fai clic su Salva.

Da Stato dell'ambiente screen

Fai clic sul logo EXP News. Questo ti porterà al sito web EXP News.!

Sul sito web EXP News, clicca qui per leggere gli articoli e guardare i video.

Torna alla tua app EXP News Real-time Dashboard Firefly; dovrebbe aggiornare le vostre interazioni con il sito EXP News in tempo reale.

Divertiti a esplorare ulteriormente questo. Se sei uno sviluppatore più avventuroso e hai tempo libero, esplora il codice sorgente dell’app dashboard e apporta le modifiche che ritieni opportune.

Questo esercizio e questo modulo sono stati completati.

Passaggio successivo: Riepilogo e vantaggi

Torna al modulo 22

Torna a tutti i moduli