Incorporare un’applicazione REACT utilizzando l’editor SPA dell’AEM e Integrare con AEM Screens Analytics embedding-a-react-application-using-the-aem-spa-editor-and-integrating-with-aem-screens-analytics

Clona l’archivio dell’Editor SPA del AEM all’indirizzo https://github.com/adobe/aem-spa-project-archetype.

Per creare un progetto dell’archetipo dell’editor SPA dell’AEM, segui le istruzioni riportate di seguito:

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 \

Dopo la creazione del 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.

Crea un progetto AEM Screens. Consulta Creazione e gestione di progetti per ulteriori dettagli.

Creare un Canale applicazione (preferibilmente) (o modello 1x1 o canale multizona) nel Canali del progetto AEM Screens.

Modifica un canale di sequenza e trascina e rilascia un componente di pagina incorporato.

Consulta Aggiunta di componenti a un canale per ulteriori dettagli.

Clic Modifica dalla barra delle azioni, in modo da poter modificare le proprietà del canale.

Trascina la Pagina incorporata o riutilizzare il componente esistente in un canale dell'applicazione e fare clic sulla home page sotto l'applicazione mysamplespa, ad esempio, /content/mysamplespa/en/home.

Assegna il canale a una visualizzazione.

Registra un lettore per questo progetto e assegnalo al display. Ora puoi vedere la tua applicazione interattiva in esecuzione su AEM Screens.

Consulta Registrazione dispositivo per ulteriori informazioni sulla registrazione di un dispositivo.

Configurare Adobe Analytics in AEM Screens.

Consulta Configurazione di Adobe Analytics con AEM Screens per ulteriori informazioni su 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 all’altro evento che desideri acquisire per il componente.

Consulta Configurazione di Adobe Analytics con AEM Screens per ulteriori dettagli.

Chiama l’API di AEM Screens Analytics in modo da poter 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);
    }
}