Incorporer une application REACT à l’aide de l’éditeur d’applications monopages AEM et intégrer à 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 SPA 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 \

Après avoir créé le projet, 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. Pour plus d’informations, voir Création et gestion des projets.

Créez un Canal d’application (de préférence) (ou un modèle 1x1 ou un canal multizone) dans le dossier 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 en savoir plus.

Cliquez sur Modifier dans la barre d’actions pour modifier les propriétés du canal.

Faites un glisser-déposer du composant 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 pouvez maintenant voir votre application interactive s’exécuter sur AEM Screens.

Voir Enregistrement des appareils pour plus d’informations sur l’enregistrement d’un appareil.

Configuration d’Adobe Analytics dans AEM Screens.

Consultez Configuration d’Adobe Analytics avec AEM Screens pour savoir comment effectuer le séquencement dans Adobe Analytics avec AEM Screens et envoyer des événements personnalisés à l’aide d’Adobe Analytics hors ligne.

Modifiez votre application React dans l’IDE/l’éditeur de votre choix (en particulier le composant de texte ou tout autre composant avec lequel vous souhaitez commencer à émettre des événements).

Sur l’événement de clics 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.

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

Appelez l’API Analytics d’AEM Screens pour 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);
    }
}