Questa sezione descrive come incorporare un’applicazione interattiva a pagina singola utilizzando REACT (o un Angular) utilizzando l’editor SPA dell’AEM che può essere configurato dai professionisti del settore dell’AEM e come integrare l’applicazione interattiva con Adobe Analytics offline.
Per utilizzare l’Editor SPA dell’AEM, segui la procedura riportata di seguito:
Clona l’archivio dell’Editor SPA del AEM all’indirizzo https://github.com/adobe/aem-spa-project-archetype.
Questo archetipo crea un progetto Adobe Experience Manager minimo come punto di partenza per i tuoi progetti SPA. Le proprietà che devono essere fornite quando si utilizza questo archetipo consentono di denominare come desiderato tutte le parti del progetto.
Segui le istruzioni readme per creare un progetto di archetipo per l’editor SPA AEM:
mvn clean install archetype:update-local-catalog
mvn archetype:crawl
mvn archetype:generate \
-DarchetypeCatalog=internal \
-DarchetypeGroupId=com.adobe.cq.spa.archetypes \
-DarchetypeArtifactId=aem-spa-project-archetype \
-DarchetypeVersion=1.0.3-SNAPSHOT \
Utilizziamo GroupId as com.adobe.aem.screens e ArtifactId as SPA di esempio (impostazione predefinita). Puoi scegliere il tuo, se necessario.
Una volta creato il progetto, utilizza un IDE o un editor a tua scelta e importa il progetto Maven generato.
Implementare nell’istanza AEM locale utilizzando il comando mvn clean install -PautoInstallPackage.
Per modificare i contenuti nell’app REACT:
https://localhost:4502/editor.html/content/mysamplespa/en/home.html
(sostituisci il nome host, la porta e il nome del progetto, a seconda dei casi).Per aggiungere l’app REACT interattiva ad AEM Screens, segui i passaggi seguenti:
Crea un nuovo progetto AEM Screens. Fai riferimento a Creazione e gestione di progetti per ulteriori dettagli.
Crea un nuovo Canale applicazione (preferibilmente) (o modello 1x1 o canale multizona) nel Canali del progetto Screens.
Canali sequenza sono sconsigliati per questo caso d’uso, in quanto presentano una logica di presentazione intrinsecamente in conflitto con la natura interattiva dell’esperienza
Fai riferimento a Creazione e gestione dei canali per ulteriori dettagli.
Modifica un canale di sequenza e trascina e rilascia un componente di pagina incorporato.
Fai riferimento a Aggiunta di componenti a un canale per ulteriori dettagli.
Assicurati di aggiungere l’evento di interazione dell’utente quando assegni il canale alla visualizzazione.
Fai clic su Modifica dalla barra delle azioni per modificare le proprietà del canale.
Trascina la Pagina incorporata , o riutilizzare il componente esistente in un canale dell'applicazione, e selezionare la home page sotto l'applicazione mysamplespa, ad esempio, /content/mysamplespa/en/home.
Assegna il canale a una visualizzazione.
Assicurati di aggiungere l’evento di interazione dell’utente quando assegni il canale alla visualizzazione.
Registra un lettore per questo progetto e assegnalo al display. Ora dovresti essere in grado di vedere l’applicazione interattiva in esecuzione su AEM Screens.
Fai riferimento a Registrazione dispositivo per informazioni dettagliate sulla registrazione di un dispositivo.
Segui i passaggi seguenti per integrare l’SPA con Adobe Analytics con funzionalità offline tramite AEM Screens:
Configurare Adobe Analytics in AEM Screens.
Fai riferimento a Configurazione di Adobe Analytics con AEM Screens per scoprire come eseguire la sequenza in Adobe Analytics con AEM Screens e inviare eventi personalizzati utilizzando offline Adobe Analytics.
Modifica l’app React nell’IDE/editor che preferisci (in particolare il componente testo o un altro componente da cui vuoi iniziare a emettere eventi).
Aggiungi le informazioni di analisi utilizzando il modello dati standard all’evento di clic o a un altro evento che desideri acquisire per il componente.
Fai riferimento a Configurazione di Adobe Analytics con AEM Screenss per ulteriori dettagli.
Chiama l’API di AEM Screens Analytics per salvare l’evento offline e inviarlo in modalità burst ad Adobe Analytics.
Ad esempio:
handleClick() {
if ((window.parent) && (window.parent.CQ) && (window.parent.CQ.screens) && (window.parent.CQ.screens.analytics))
{
var analyticsEvent = {};
analyticsEvent['event.type'] = 'play'; // Type of event
analyticsEvent['event.coll_dts'] = new Date().toISOString(); // Start of collecting the event
analyticsEvent['event.dts_start'] = new Date().toISOString(); // Event start
analyticsEvent['content.type'] = 'Washing machine'; // Mime Type or product category
analyticsEvent['content.action'] = 'Path to the washing machine asset in AEM'; // Path in AEM to relevant asset
analyticsEvent['trn.product'] = 'Washing machine Model number'; // Product being explored
analyticsEvent['trn.amount'] = 1000; // Product pricing or other numeric value or weight
analyticsEvent['event.dts_end'] = new Date().toISOString(); // Event end
analyticsEvent['event.count'] = 100; // Numeric value that may count a number of clicks or keystrokes or wait time in seconds for example
analyticsEvent['event.value'] = 'My favorite analytics event';
analyticsEvent['trn.quantity'] = 10; // Quantity of product selection
analyticsEvent['event.subtype'] = 'end'; // Event subtype if applicable
window.parent.CQ.screens.analytics.sendTrackingEvent(analyticsEvent);
}
}
Il firmware del lettore aggiunge automaticamente ulteriori dettagli sul lettore e sul relativo ambiente di runtime ai dati di analisi personalizzati inviati. Di conseguenza, potrebbe non essere necessario acquisire i dettagli del sistema operativo o del dispositivo di basso livello, se non in caso di assoluta necessità. Devi solo concentrarti sui dati di analisi aziendale.