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
Du kan bädda in ett interaktivt enkelsidigt program med REACT (eller Angular). Det gör du med den AEM SPA redigeraren som affärskommunikation AEM konfigurerar. Du kan också lära dig hur du integrerar dina interaktiva program med offline-Adobe Analytics.
Använda AEM SPA Editor using-the-aem-spa-editor
Följ stegen nedan för att använda AEM SPA Editor:
-
Klona AEM SPA Editor på https://github.com/adobe/aem-spa-project-archetype.
note note NOTE Denna arkityp skapar ett minimalt Adobe Experience Manager-projekt som utgångspunkt för dina egna SPA. Med egenskaperna som måste anges när du använder den här typen av arkivtyp kan du namnge alla delar av projektet som du vill. -
Om du vill skapa ett AEM SPA redigeringsprojekt följer du Viktigt-instruktionerna:
code language-none 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 \
note note NOTE I den här dokumentationen används GroupId som com.adobe.aem.screens och ArtifactId som My Sample SPA (som är standardvärdena). Du kan välja egna efter behov. -
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.
Redigera innehåll i REACT-appen editing-content-in-the-react-app
Så här redigerar du innehållet i REACT-appen:
- Navigera till
https://localhost:4502/editor.html/content/mysamplespa/en/home.html
(ersätt värdnamnet, porten och projektnamnet efter behov). - Du kan redigera texten som visas i programmet Hello World.
Lägga till den interaktiva REACT-appen i AEM Screens adding-the-interactive-react-app-to-aem-screens
Följ stegen nedan för att lägga till den interaktiva REACT-appen i AEM Screens:
-
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.
note note NOTE Sekvenskanaler rekommenderas inte för det här användningsfallet eftersom de har en bildspelslogik som är i konflikt med upplevelsens interaktiva karaktär.
Mer information finns i Skapa och hantera kanaler. -
Redigera valfri sekvenskanal och dra och släpp en inbäddad sidkomponent.
Mer information finns i Lägga till komponenter i en kanal.
note note NOTE Se till att du lägger till användarinteraktionshändelsen när du tilldelar kanalen till visningen. -
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.
note note NOTE Se till att du lägger till användarinteraktionshändelsen när du tilldelar kanalen till visningen. -
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.
Integrera SPA med Adobe Analytics med offlinefunktioner via AEM Screens integrating-the-spa-with-adobe-analytics-with-offline-capability-through-aem-screens
Följ stegen nedan för att integrera SPA med Adobe Analytics med offlinefunktioner via AEM Screens:
-
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:
code language-none 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); } }
note note NOTE Den inbyggda spelarprogramvaran lägger automatiskt till mer information om spelaren och dess körningsmiljö till de anpassade analysdata som du skickar. Om det inte behövs kan du behöva hämta information om operativsystem/enheter på låg nivå. Fokusera på affärsanalysdata.