Bädda in ett REACT-program med AEM SPA Editor och Integrera med AEM Screens Analytics embedding-a-react-application-using-the-aem-spa-editor-and-integrating-with-aem-screens-analytics

Klona AEM SPA Editor på https://github.com/adobe/aem-spa-project-archetype.

Om du vill skapa ett AEM SPA redigeringsprojekt följer du Viktigt-instruktionerna:

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 \

När projektet har skapats kan du antingen använda en utvecklingsmiljö eller en redigerare och importera det genererade Maven-projektet.

Distribuera till den lokala AEM med kommandot mvn clear install -PautoInstallPackage.

Skapa ett AEM Screens-projekt. Mer information finns i Skapa och hantera projekt.

Skapa en programkanal (helst) (eller mall 1x1 eller kanal med flera zoner) i mappen Kanaler i ditt AEM Screens-projekt.

Redigera valfri sekvenskanal och dra och släpp en inbäddad sidkomponent.

Mer information finns i Lägga till komponenter i en kanal.

Klicka på Redigera i åtgärdsfältet så att du kan redigera kanalens egenskaper.

Dra och släpp komponenten Inbäddad sida eller återanvänd den befintliga komponenten i en programkanal och klicka på startsidan under mysamplespa-programmet, till exempel /content/mysamplespa/en/home .

Tilldela kanalen till en skärm.

Registrera en spelare för det här projektet och tilldela den till visningen. Nu kan du se hur ditt interaktiva program körs på AEM Screens.

Mer information om hur du registrerar en enhet finns i Enhetsregistrering.

Konfigurera Adobe Analytics i AEM Screens.

Mer information om hur du utför sekvensering i Adobe Analytics med AEM Screens och skickar anpassade händelser med Adobe Analytics offline finns i Konfigurera Adobe Analytics med AEM Screens .

Redigera din reaktionsapp i den utvecklingsmiljö/redigerare du väljer (särskilt textkomponenten eller någon annan komponent som du vill börja skicka händelser för).

Lägg till analysinformationen med standarddatamodellen i klickhändelsen eller i någon annan händelse som du vill hämta för komponenten.

Mer information finns i Konfigurera Adobe Analytics med AEM Screens.

Anropa AEM Screens Analytics API så att du kan spara händelsen offline och skicka den i bursts till Adobe Analytics.

Exempel:

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