Einbetten einer REACT-Anwendung mit dem AEM SPA Editor und Integration mit AEM Screens Analytics embedding-a-react-application-using-the-aem-spa-editor-and-integrating-with-aem-screens-analytics

Klonen Sie die AEM SPA Editor-Repo unter https://github.com/adobe/aem-spa-project-archetype.

Gehen Sie wie folgt vor, um ein AEM Archetypprojekt SPA Editor zu erstellen:

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 \

Nachdem das Projekt erstellt wurde, verwenden Sie entweder eine IDE oder einen Editor Ihrer Wahl und importieren Sie das generierte Maven-Projekt.

Stellen Sie in Ihrer lokalen AEM-Instanz mit dem Befehl mvn clean install -PautoInstallPackage bereit.

Erstellen Sie ein AEM Screens-Projekt. Siehe Erstellen und Verwalten von Projekten für weitere Details.

Erstellen Sie eine Anwendungskanal (vorzugsweise) (oder 1x1-Vorlage oder Mehrzonen-Kanal) im Kanäle Ordner Ihres AEM Screens-Projekts.

Bearbeiten Sie einen beliebigen Sequenzkanal und ziehen Sie eine eingebettete Seitenkomponente per Drag-and-Drop.

Siehe Hinzufügen von Komponenten zu Kanälen für weitere Details.

Klicks Bearbeiten in der Aktionsleiste, damit Sie die Eigenschaften des Kanals bearbeiten können.

Ziehen Sie die Eingebettete Seite Komponente verwenden oder die vorhandene Komponente in einem Anwendungskanal wiederverwenden und auf die Startseite unter der Anwendung mysamplespa klicken, z. B. /content/mysamplespa/en/home.

Weisen Sie den Kanal einer Anzeige zu.

Registrieren Sie einen Player für dieses Projekt, und weisen Sie ihn der Anzeige zu. Jetzt sollte Ihre interaktive Anwendung in AEM Screens ausgeführt werden.

Siehe Geräteregistrierung für weitere Informationen zur Registrierung eines Geräts.

Konfigurieren Sie Adobe Analytics in AEM Screens.

Siehe Konfigurieren von Adobe Analytics mit AEM Screens Weitere Informationen zum Ausführen der Sequenzierung in Adobe Analytics mit AEM Screens und zum Senden benutzerdefinierter Ereignisse mit Offline-Adobe Analytics.

Bearbeiten Sie Ihre React-App in der IDE/dem Editor Ihrer Wahl (insbesondere die Textkomponente oder eine andere Komponente, die Sie zum Ausgeben von Ereignissen verwenden möchten).

Fügen Sie beim Klick- oder anderen Ereignis, das Sie für Ihre Komponente erfassen möchten, die Analyseinformationen mit dem Standarddatenmodell hinzu.

Siehe Konfigurieren von Adobe Analytics mit AEM Screens für weitere Details.

Rufen Sie die AEM Screens Analytics-API auf, damit Sie das Ereignis offline speichern und in Bursts an Adobe Analytics senden können.

Beispiel:

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