Incorporation d’une application REACT à l’aide de l’éditeur d’applications monopages AEM et intégration à AEM Screens Analytics embedding-a-react-application-using-the-aem-spa-editor-and-integrating-with-aem-screens-analytics

Cliquez sur le rapport de l’éditeur d’applications monopages AEM à l’adresse https://github.com/adobe/aem-spa-project-archetype.

Pour créer un projet d’archétype de l’éditeur d’AEM, suivez les instructions du fichier Lisez-moi :

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 \

Une fois le projet créé, utilisez un IDE ou un éditeur de votre choix et importez le projet Maven généré.

Déployez sur votre instance AEM locale à l’aide de la commande mvn clean install -PautoInstallPackage.

Créez un projet AEM Screens. Voir Création et gestion de projets pour plus d’informations.

Créez un Canal d’application (de préférence) (modèle 1x1 ou canal multizone) dans la variable Canaux de votre projet AEM Screens.

Modifiez un canal de séquence et faites glisser et déposez un composant de page incorporé.

Voir Ajout de composants à un canal pour plus d’informations.

Cliquez sur Modifier à partir de la barre d’actions afin de pouvoir modifier les propriétés du canal.

Faites glisser et déposez le Page incorporée , ou réutilisez le composant existant dans un canal d’application, puis cliquez sur la page d’accueil sous l’application mysamplespa, par exemple : /content/mysamplespa/en/home.

Attribuez le canal à un affichage.

Enregistrez un lecteur sur ce projet et affectez-le à l’affichage. Vous devriez maintenant pouvoir voir votre application interactive s’exécuter sur AEM Screens.

Voir Enregistrement de périphérique pour plus d’informations sur l’enregistrement d’un périphérique.

Configuration d’Adobe Analytics dans AEM Screens.

Voir Configuration d’Adobe Analytics avec AEM Screens pour plus d’informations sur l’exécution du séquencement dans Adobe Analytics avec AEM Screens et l’envoi d’événements personnalisés à l’aide d’Adobe Analytics hors ligne.

Modifiez votre application de réaction dans l’IDE/l’éditeur de votre choix (en particulier le composant de texte ou tout autre composant dont vous souhaitez qu’il commence à émettre des événements).

Sur l’événement click ou tout autre événement que vous souhaitez capturer pour votre composant, ajoutez les informations d’analyse à l’aide du modèle de données standard.

Voir Configuration d’Adobe Analytics avec AEM Screens pour plus d’informations.

Appelez l’API AEM Screens Analytics afin de pouvoir enregistrer l’événement hors ligne et l’envoyer en rafales à Adobe Analytics.

Par exemple :

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