Questa sezione descrive come incorporare un’applicazione interattiva a pagina singola utilizzando REACT (o Angular) utilizzando l’editor SPA AEM che può essere configurato dai professionisti aziendali in AEM e come integrare l’applicazione interattiva con Adobe Analytics offline.
Segui i passaggi riportati di seguito per utilizzare l’editor di SPA di AEM:
Clona il repository dell'editor SPA AEM in 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 per creare un progetto dell’archetipo di un editor di AEM 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 \
Utilizziamo il GroupId come com.adobe.aem.screens e il ObjectId come My Sample SPA (che sono i valori predefiniti). Puoi scegliere il tuo secondo necessità.
Una volta creato il progetto, utilizza un IDE o un editor di tua scelta e importa il progetto Maven generato.
Distribuisci nell'istanza AEM locale utilizzando il comando mvn clean install -PautoInstallPackage.
Per modificare il contenuto dell’app REACT:
https://localhost:4502/editor.html/content/mysamplespa/en/home.html
(sostituisci il nome host, la porta e il nome del progetto come applicabile).Per aggiungere l’app REACT interattiva ad AEM Screens, effettua le seguenti operazioni:
Crea un nuovo progetto AEM Screens. Per ulteriori informazioni, consulta Creazione e gestione di progetti .
Crea un nuovo Canale applicazione (preferibilmente) (o un modello 1x1 o un canale con più zone) nella cartella Canali del progetto Screens.
I canali di sequenza sono scoraggiati per questo caso d’uso poiché presentano una logica di presentazione in conflitto con la natura interattiva dell’esperienza
Per ulteriori informazioni, consulta Creazione e gestione di canali .
Modifica qualsiasi canale di sequenza e trascina e rilascia un componente di pagina incorporato.
Per ulteriori informazioni, consulta Aggiunta di componenti a un canale .
Assicurati di aggiungere l’evento di interazione dell’utente quando assegni il canale alla visualizzazione.
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 seleziona 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 rispetto a questo progetto e assegnalo alla visualizzazione. Ora dovresti essere in grado di visualizzare l’applicazione interattiva in esecuzione su AEM Screens.
Per informazioni dettagliate sulla registrazione di un dispositivo, consulta Registrazione dispositivo .
Segui i passaggi seguenti per integrare l’SPA con Adobe Analytics con funzionalità offline tramite AEM Screens:
Configura Adobe Analytics in AEM Screens.
Per informazioni su come eseguire la sequenza in Adobe Analytics con AEM Screens e inviare eventi personalizzati utilizzando Adobe Analytics offline, consulta Configurazione di Adobe Analytics con AEM Screens .
Modifica l’app react nell’IDE/editor desiderato (in particolare il componente di testo o un altro componente che desideri iniziare a emettere eventi).
Nell’evento clic o in un altro evento che desideri acquisire per il componente, aggiungi le informazioni di analisi utilizzando il modello dati standard.
Per ulteriori informazioni, consulta Configurazione di Adobe Analytics con AEM Screens🔗s .
Chiama l’API di AEM Screens Analytics per salvare l’evento offline e inviarlo in 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 suo ambiente di runtime ai dati di analisi personalizzati inviati. Pertanto 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.