AEM SPA Incrustación de una aplicación REACT mediante el Editor de e Integración con AEM Screens Analytics embedding-a-react-application-using-the-aem-spa-editor-and-integrating-with-aem-screens-analytics
En esta sección se describe cómo incrustar una aplicación interactiva de una sola página mediante REACT (o Angular AEM SPA AEM) utilizando el editor de que pueden configurar los profesionales del negocio en la aplicación de y también cómo integrar la aplicación interactiva con Adobe Analytics sin conexión.
AEM SPA Uso del Editor de using-the-aem-spa-editor
AEM SPA Siga los pasos a continuación para utilizar el Editor de:
-
AEM SPA Clonar el repositorio del Editor de la en https://github.com/adobe/aem-spa-project-archetype.
note note NOTE Este tipo de archivo crea un proyecto de Adobe Experience Manager SPA mínimo como punto de partida para sus propios proyectos de. Las propiedades que se deben proporcionar al utilizar este tipo de archivo permiten nombrar como desee todas las partes de este proyecto. -
AEM SPA Siga las instrucciones léame para crear un proyecto de arquetipo de editor de:
code language-none 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 \
note note NOTE Utilizamos el GroupId as com.adobe.aem.screens y el ArtifactId as SPA Mi ejemplo (que son los valores predeterminados). Puede elegir el suyo propio según sea necesario. -
Una vez creado el proyecto, utilice un IDE o un editor de su elección e importe el proyecto Maven generado.
-
AEM Implemente en la instancia de la instancia local de mediante el comando instalación limpia de mvn: PautoInstallPackage.
Edición de contenido en la aplicación REACT editing-content-in-the-react-app
Para editar el contenido en la aplicación REACT:
- Vaya a
https://localhost:4502/editor.html/content/mysamplespa/en/home.html
(reemplace el nombre de host, el puerto y el nombre del proyecto, según corresponda). - Debería poder editar el texto que se muestra en la aplicación Hello world.
Adición de la aplicación interactiva REACT a AEM Screens adding-the-interactive-react-app-to-aem-screens
Siga los pasos a continuación para agregar la aplicación REACT interactiva a AEM Screens:
-
Cree un nuevo proyecto de AEM Screens. Consulte Creación y administración de proyectos para obtener más información.
-
Crear un nuevo Canal de aplicaciones (preferiblemente) (o plantilla 1x1 o canal de varias zonas) en el Canales de su proyecto de Screens.
note note NOTE Canales de secuencia se desaconsejan para este caso de uso, ya que vienen inherentemente con una lógica de presentación de diapositivas que entrará en conflicto con la naturaleza interactiva de la experiencia
Consulte Creación y administración de canales para obtener más información. -
Edite cualquier canal de secuencia y arrastre y suelte un componente de página incrustado.
Consulte Adición de componentes a un canal para obtener más información.
note note NOTE Asegúrese de añadir el evento de interacción del usuario al asignar el canal a la visualización. -
Haga clic en Editar en la barra de acciones para editar las propiedades del canal.
-
Arrastre y suelte el Página integrada , o reutilice el componente existente en un canal de aplicaciones y seleccione la página de inicio en la aplicación mysamplespa, por ejemplo, /content/mysamplespa/en/home.
-
Asigne el canal a una pantalla.
note note NOTE Asegúrese de añadir el evento de interacción del usuario al asignar el canal a la visualización. -
Registre un reproductor en este proyecto y asígnelo a la pantalla. Ahora debería poder ver la aplicación interactiva en ejecución en AEM Screens.
Consulte Registro de dispositivos para obtener información detallada sobre el registro de un dispositivo.
SPA Integración de la con Adobe Analytics con la funcionalidad sin conexión a través de AEM Screens integrating-the-spa-with-adobe-analytics-with-offline-capability-through-aem-screens
SPA Siga los pasos a continuación para integrar la con Adobe Analytics con la capacidad sin conexión a través de AEM Screens:
-
Configure Adobe Analytics en AEM Screens.
Consulte Configuración de Adobe Analytics con AEM Screens para aprender a realizar la secuenciación en Adobe Analytics con AEM Screens y enviar eventos personalizados con Adobe Analytics sin conexión.
-
Edite la aplicación react en el IDE/editor que prefiera (especialmente el componente de texto u otro componente que desee que empiece a emitir eventos).
-
En el evento de clic u otro evento que desee capturar para el componente, agregue la información de análisis mediante el modelo de datos estándar.
Consulte Configuración de Adobe Analytics con AEM Screenss para obtener más información.
-
Llame a la API de AEM Screens Analytics para guardar el evento sin conexión y enviarlo en ráfagas a Adobe Analytics.
Por ejemplo,
code language-none 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); } }
note note NOTE El firmware del reproductor añade automáticamente más detalles acerca del reproductor y su entorno de tiempo de ejecución a los datos de análisis personalizados que envía. Por lo tanto, es posible que no necesite capturar los detalles de bajo nivel del sistema operativo/dispositivo a menos que sea absolutamente necesario. Solo tiene que centrarse en los datos de análisis empresarial.