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

Distribuisci nell'istanza AEM locale utilizzando il comando mvn clean install -PautoInstallPackage.

Crea un progetto AEM Screens. Per ulteriori dettagli, vedere Creazione e gestione di progetti.

Crea un Canale applicazione (preferibilmente) (o un modello 1x1 o un canale multizona) nella cartella Canali del progetto AEM Screens.

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

Per ulteriori dettagli, vedere Aggiunta di componenti a un canale.

Fai clic su Modifica nella barra delle azioni per modificare le proprietà del canale.

Trascina e rilascia il componente Pagina incorporata o riutilizza il componente esistente in un canale dell'applicazione, quindi fai 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.

Per ulteriori informazioni sulla registrazione di un dispositivo, vedere Registrazione 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.

Per ulteriori dettagli, vedere Configurazione di Adobe Analytics con AEM Screens.

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);
    }
}