Embedding a REACT application using the AEM SPA Editor and Integrating with AEM Screens Analytics embedding-a-react-application-using-the-aem-spa-editor-and-integrating-with-aem-screens-analytics
This section describes how to embed an interactive single page application using REACT (or Angular) using the AEM SPA editor that can be configured by business professionals in AEM and also how to integrate your interactive application with offline Adobe Analytics.
Using the AEM SPA Editor using-the-aem-spa-editor
Follow the steps below to use the AEM SPA Editor:
-
Clone the AEM SPA Editor repo at https://github.com/adobe/aem-spa-project-archetype.
note note NOTE This archetype creates a minimal Adobe Experience Manager project as a starting point for your own SPA projects. The properties that must be provided when using this archetype allow to name as desired all parts of this project. -
Follow the readme instructions to create an AEM SPA editor archetype project:
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 We use the GroupId as com.adobe.aem.screens and the ArtifactId as My Sample SPA (which is the defaults). You can choose your own as needed. -
Once the project is created, either use an IDE or editor of your choice and import the generated Maven project.
-
Deploy to your local AEM instance using the command mvn clean install -PautoInstallPackage.
Editing content in the REACT app editing-content-in-the-react-app
To edit the contents in the REACT app:
- Navigate to
https://localhost:4502/editor.html/content/mysamplespa/en/home.html
(replace the hostname, port and project name as applicable). - You should be able to edit the text being displayed in the Hello world application.
Adding the interactive REACT app to AEM Screens adding-the-interactive-react-app-to-aem-screens
Follow the steps below to add the interactive REACT app to AEM Screens:
-
Create a new AEM Screens project. Refer to Creating and Managing Projects for more details.
-
Create a new Application Channel (preferably) (or 1x1 template, or multi-zone channel) in the Channels folder of your Screens project.
note note NOTE Sequence Channels are discouraged for this use case sine they inherently come with a slideshow logic that will conflict with the interactive nature of the experience
Refer to Creating and Managing Channels for more details. -
Edit any sequence channel and drag and drop an embedded page component.
Refer to Adding Components to a Channel for more details.
note note NOTE Make sure you add the user interaction event when assigning the channel to the display. -
Click on Edit from the action bar to edit the properties of the channel.
-
Drag and drop the Embedded Page component , or re-use the existing component in an application channel, and select the home page under the mysamplespa application for example, /content/mysamplespa/en/home.
-
Assign the channel to a display.
note note NOTE Make sure you add the user interaction event when assigning the channel to the display. -
Register a player against this project and assign it to the display. You should now be able to see your interactive application running on AEM Screens.
Refer to Device Registration to learn in detail about registering a device.
Integrating the SPA with Adobe Analytics with Offline Capability through AEM Screens integrating-the-spa-with-adobe-analytics-with-offline-capability-through-aem-screens
Follow the steps below to integrate the SPA with Adobe Analytics with offline capability through AEM Screens:
-
Configure Adobe Analytics in AEM Screens.
Refer to Configuring Adobe Analytics with AEM Screens to learn how to perform sequencing in Adobe Analytics with AEM Screens and send custom events using offline Adobe Analytics.
-
Edit your react app in the IDE/editor of your choice (especially the text component or other component which you wish to start emitting events).
-
On the click event or other event that you wish to capture for your component, add the analytics information using the standard data model.
Refer to Configuring Adobe Analytics with AEM Screenss for more details.
-
Call the AEM Screens Analytics API to save the event offline and send it in bursts to Adobe Analytics.
For example,
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 The player firmware automatically adds more details about the player and its runtime environment to the custom analytics data that you send. Hence you may not need to capture low level OS/device details unless absolutely necessary. You just need to focus on the business analytics data.