Incorporazione di un'applicazione REACT utilizzando l'editor SPA AEM e Integrazione con AEM Screens Analytics

Questa sezione descrive come incorporare un’applicazione interattiva a pagina singola tramite REACT (o Angular) utilizzando l’editor SPA AEM che può essere configurato da professionisti aziendali AEM e come integrare l’applicazione interattiva con Adobe Analytics offline.

Utilizzo dell'editor SPA AEM

Per usare l’editor SPA AEM, effettuate le operazioni seguenti:

  1. Clonare il repo dell'editor SPA AEM su https://github.com/adobe/aem-spa-project-archetype.

    NOTA

    Questo archetipo crea un progetto Adobe Experience Manager minimo come punto di partenza per i vostri progetti SPA. Le proprietà che devono essere fornite quando si utilizza questo archetipo consentono di assegnare i nomi desiderati a tutte le parti del progetto.

  2. Seguite le istruzioni per creare un progetto archetype AEM editor SPA:

    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 \
    NOTA

    Utilizziamo GroupId come com.adobe.aem.screens e ArtifactId come My Sample SPA (che è l'impostazione predefinita). Potete scegliere il vostro secondo necessità.

  3. Una volta creato il progetto, utilizzate un IDE o un editor di vostra scelta e importate il progetto Maven generato.

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

Modifica del contenuto nell'app REACT

Per modificare il contenuto nell'app REACT:

  1. Andate a https://localhost:4502/editor.html/content/mysamplespa/en/home.html (sostituite il nome host, la porta e il nome del progetto come applicabile).
  2. Dovrebbe essere possibile modificare il testo visualizzato nell'applicazione Hello world.

Aggiunta dell'app REACT interattiva a AEM Screens

Per aggiungere l’app REACT interattiva a AEM Screens, effettuate le seguenti operazioni:

  1. Crea un nuovo progetto AEM Screens . Per ulteriori informazioni, consultare Creazione e gestione di progetti.

    NOTA

    Crea un canale Sequenza durante la creazione di un canale nella cartella Canali del progetto Screens.

    Per ulteriori informazioni, fare riferimento a Creazione e gestione di canali.

    screen_shot_2019-02-15at100330 am

  2. Modificate i canali di sequenza e trascinate e rilasciate un componente di pagina incorporato.

    Per ulteriori informazioni, fare riferimento a Aggiunta di componenti a un canale.

    NOTA

    Accertatevi di aggiungere l'evento di interazione utente quando assegnate il canale al display.

  3. Fare clic su Modifica nella barra delle azioni per modificare le proprietà del canale della sequenza.

    screen_shot_2019-02-15at100555am

  4. Trascinare il componente Pagina incorporata e selezionare la pagina principale sotto l'applicazione mysamplespa, ad esempio /content/mysamplespa/en/home.

    screen_shot_2019-02-15at101104am

  5. Registra un lettore rispetto a questo progetto e dovresti essere in grado di visualizzare l'applicazione interattiva in esecuzione su AEM Screens.

    Fare riferimento a Registrazione dispositivo per informazioni dettagliate sulla registrazione di un dispositivo.

Integrazione del SPA con Adobe Analytics con funzionalità offline tramite AEM Screens

Per integrare il SPA con Adobe Analytics con funzionalità offline tramite AEM Screens, effettuate le seguenti operazioni:

  1. Configurare Adobe Analytics in AEM Screens.

    Fare riferimento alla sezione Configurazione Adobe Analytics con AEM Screens per informazioni su come eseguire la sequenza Adobe Analytics con AEM Screens e inviare eventi personalizzati utilizzando Adobe Analytics offline.

  2. Modificate l'app di reazione nell'IDE/nell'editor desiderato (in particolare il componente di testo o altro componente che desiderate avviare con gli eventi di emissione).

  3. Nell'evento click o in un altro evento che si desidera acquisire per il componente, aggiungere le informazioni di analisi utilizzando il modello dati standard.

    Per ulteriori informazioni, consultare Configurazione Adobe Analytics con AEM Screenss.

  4. Chiamate l'API di AEM Screens Analytics per salvare l'evento offline e inviarlo in Burst a Adobe Analytics.

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

    Il firmware del lettore aggiunge automaticamente ulteriori dettagli sul lettore e il relativo ambiente di runtime ai dati di analisi personalizzati inviati. Di conseguenza, potrebbe non essere necessario acquisire i dettagli del sistema operativo/dispositivo di basso livello, a meno che non sia assolutamente necessario. Devi solo concentrarti sui dati di analisi aziendale.

In questa pagina