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

Clone the AEM SPA Editor repo at https://github.com/adobe/aem-spa-project-archetype.

To create an AEM SPA editor archetype project, follow the readme instructions:

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 \

After 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.

Create an AEM Screens project. See Creating and Managing Projects for more details.

Create an Application Channel (preferably) (or 1x1 template, or multi-zone channel) in the Channels folder of your AEM Screens project.

Edit any sequence channel and drag and drop an embedded page component.

See Adding Components to a Channel for more details.

Click Edit from the action bar so you can edit the properties of the channel.

Drag and drop the Embedded Page component, or reuse the existing component in an application channel, and click the home page under the mysamplespa application, for example, /content/mysamplespa/en/home.

Assign the channel to a display.

Register a player against this project and assign it to the display. You can now see your interactive application running on AEM Screens.

See Device Registration for more information about registering a device.

Configure Adobe Analytics in AEM Screens.

See Configuring Adobe Analytics with AEM Screens for more information about 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 that you want to start emitting events).

On the click event or other event that you want to capture for your component, add the analytics information using the standard data model.

See Configuring Adobe Analytics with AEM Screens for more details.

Call the AEM Screens Analytics API so you can save the event offline and send it in bursts to Adobe Analytics.

For example,

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