Incorporation d’une application REACT à l’aide de l’éditeur d’applications monopages AEM et intégration à AEM Screens Analytics

Cette section décrit comment incorporer une application interactive monopage en utilisant REACT (ou Angular) à l’aide de l’éditeur d’applications monopages AEM qui peut être configuré par des professionnels dans AEM et comment intégrer votre application interactive à Adobe Analytics hors ligne.

Utilisation de l’éditeur d’applications monopages AEM

Suivez les étapes ci-dessous pour utiliser l’éditeur d’applications monopages AEM :

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

   REMARQUE

   Cet archétype crée un projet Adobe Experience Manager minimal qui s’appuie sur des bonnes pratiques pour que vous puissiez démarrer vos propres projets d’application monopage (SPA). Les propriétés qui doivent être fournies lors de l’utilisation de cet archétype permettent de nommer comme vous le souhaitez toutes les parties de ce projet.

2. Suivez les instructions du fichier Lisez-moi pour créer un projet d’archétype d’éditeur SPA AEM :

   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 \
   

   REMARQUE

   Nous utilisons comme GroupId com.adobe.aem.screens et comme ArtifactId My Sample SPA (valeur par défaut). Vous pouvez choisir les vôtres selon vos besoins.

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

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

Modification de contenu dans l’application REACT

Pour modifier le contenu dans l’application REACT :

1. Accédez à https://localhost:4502/editor.html/content/mysamplespa/en/home.html (remplacez le nom d’hôte, le port et le nom du projet, selon le cas).
2. Vous devez pouvoir modifier le texte affiché dans l’application Hello world.

Ajout de l’application interactive REACT à AEM Screens

Suivez les étapes ci-dessous pour ajouter l’application interactive REACT à AEM Screens :

1. Créez un projet AEM Screens. Voir Création et gestion de projets pour en savoir plus.

2. 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 Screens.

   REMARQUE

   Les canaux de séquence sont déconseillés pour ce cas d’utilisation, car ils sont intrinsèquement accompagnés d’une logique de diaporama qui va entrer en conflit avec la nature interactive de l’expérience.
   Voir Création et gestion des canaux pour plus d’informations.

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

   REMARQUE

   Veillez à ajouter l’événement d’interaction utilisateur lors de l’attribution du canal à l’affichage.

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

   

5. Faites un glisser-déposer du composant Page incorporée ou réutilisez le composant existant dans un canal d’application, puis sélectionnez la page d’accueil sous l’application mysamplespa, par exemple /content/mysamplespa/en/home.

   

6. Attribuez le canal à un affichage.

   REMARQUE

   Veillez à ajouter l’événement d’interaction utilisateur lors de l’attribution du canal à l’affichage.

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

   Reportez-vous à la section Enregistrement du périphérique pour en savoir plus sur l’enregistrement d’un périphérique.

Intégration de l’application monopage avec Adobe Analytics avec la fonctionnalité hors ligne via AEM Screens

Suivez les étapes ci-dessous pour intégrer l’application monopage à Adobe Analytics avec la fonctionnalité hors ligne via AEM Screens :

1. Configuration d’Adobe Analytics dans AEM Screens.

   Reportez-vous à la section 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.

2. 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).

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

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

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

   REMARQUE

   Le micrologiciel du lecteur ajoute automatiquement plus de détails sur le lecteur et son environnement d’exécution aux données d’analyse personnalisées que vous envoyez. Il se peut donc que vous n’ayez pas à capturer les détails du système d’exploitation/du périphérique de bas niveau, sauf si cela est absolument nécessaire. Vous devez simplement vous concentrer sur les données d’analyse de l’entreprise.