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.
Suivez les étapes ci-dessous pour utiliser l’éditeur d’applications monopages AEM :
Cliquez sur le rapport de l’éditeur d’applications monopages AEM à l’adresse https://github.com/adobe/aem-spa-project-archetype.
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.
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 \
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.
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.
Pour modifier le contenu dans l’application REACT :
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).Suivez les étapes ci-dessous pour ajouter l’application interactive REACT à AEM Screens :
Créez un projet AEM Screens. Voir Création et gestion de projets pour en savoir plus.
Créez un Canal de séquence lors de la création d’un canal dans le dossier Canaux de votre projet Screens.
Voir Création et gestion des canaux pour plus d’informations.
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.
Veillez à ajouter l’événement d’interaction utilisateur lors de l’attribution du canal à l’affichage.
Cliquez sur Modifier dans la barre d’actions pour modifier les propriétés du canal de séquence.
Faites glisser et déposez le composant Page incorporée et sélectionnez la page d’accueil sous l’application mysamplespa, par exemple /content/mysamplespa/en/home.
Enregistrez un lecteur sur ce projet. Vous devriez maintenant 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.
Suivez les étapes ci-dessous pour intégrer l’application monopage à Adobe Analytics avec la fonctionnalité hors ligne via AEM Screens :
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.
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.
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);
}
}
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.