Show Menu
TEMAS×

Incrustación de una aplicación REACT con el Editor de SPA de AEM e integración con AEM Screens Analytics

En esta sección se describe cómo incrustar una aplicación de una sola página interactiva mediante REACT (o Angular) mediante el editor de SPA de AEM que pueden configurar los profesionales empresariales en AEM y también cómo integrar la aplicación interactiva con Adobe Analytics sin conexión.

Uso del Editor de SPA de AEM

Siga los pasos a continuación para utilizar el Editor de SPA de AEM:
  1. Clona la repo del Editor de SPA de AEM en https://github.com/adobe/aem-spa-project-archetype.
    Este arquetipo crea un proyecto mínimo de Adobe Experience Manager como punto de partida para sus propios proyectos de SPA. Las propiedades que se deben proporcionar al utilizar este arquetipo permiten asignar el nombre que desee a todas las partes de este proyecto.
  2. Siga las instrucciones Léame para crear un proyecto de arquetipo de editor de 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 \
    
    
    Utilizamos GroupId como com.adobe.aem.screen y ArtiactId como Mi SPA de muestra (que son los valores predeterminados). Puede elegir el suyo propio según sea necesario.
  3. Una vez creado el proyecto, utilice un IDE o editor de su elección e importe el proyecto Maven generado.
  4. Implementar en la instancia de AEM local mediante el comando mvn clean install -PautoInstallPackage .

Edición de contenido en la aplicación REACT

Para editar el contenido en la aplicación REACT:
  1. Vaya a https://localhost:4502/editor.html/content/mysamplespa/en/home.html (reemplace el nombre del host, el puerto y el nombre del proyecto según corresponda).
  2. Debería poder editar el texto que se muestra en la aplicación Hello world.

Añadir la aplicación interactiva REACT a AEM Screens

Siga los pasos a continuación para añadir la aplicación interactiva REACT a AEM Screens:
  1. Cree un nuevo proyecto de AEM Screens. Consulte Creación y administración de proyectos para obtener más detalles.
    Cree un Canal de secuencia al crear un canal en la carpeta de Canales de su proyecto de Pantallas.
    Consulte Creación y administración de Canales para obtener más información.
  2. Edite cualquier canal de secuencia y arrastre y suelte un componente de página incrustado.
    Consulte Añadir componentes a un Canal para obtener más información.
    Asegúrese de agregar el evento de interacción del usuario al asignar el canal a la pantalla.
  3. Haga clic en Editar en la barra de acciones para editar las propiedades del canal de secuencia.
  4. Arrastre y suelte el componente Página ​incrustada y seleccione la página de inicio en la aplicación mysamplespa, por ejemplo, /content/mysamplespa/en/home .
  5. Registre un reproductor en este proyecto y ahora debería poder ver la aplicación interactiva que se está ejecutando en AEM Screens.
    Consulte Registro del dispositivo para obtener información detallada sobre cómo registrar un dispositivo.

Integración del SPA con Adobe Analytics con la capacidad sin conexión a través de AEM Screens

Siga los pasos que se describen a continuación para integrar el SPA con Adobe Analytics con la funcionalidad sin conexión a través de AEM Screens:
  1. Configure Adobe Analytics en AEM Screens.
    Consulte Configuración de Adobe Analytics con AEM Screens para obtener información sobre cómo realizar secuenciaciones en Adobe Analytics con AEM Screens y enviar eventos personalizados mediante Adobe Analytics sin conexión.
  2. Edite la aplicación de reacción en el IDE/editor de su elección (especialmente el componente de texto u otro componente que desee utilizar como inicio para emitir eventos).
  3. 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 pantallas de AEM para obtener más detalles.
  4. Llame a la API de AEM Screens Analytics para guardar el evento sin conexión y enviarlo por ráfagas a Adobe Analytics.
    Por ejemplo,
    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);
        }
    }
    
    
    El firmware del reproductor agrega automáticamente más detalles sobre el 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 detalles de dispositivos o sistemas operativos de bajo nivel a menos que sea absolutamente necesario. Solo tiene que centrarse en los datos de análisis de negocios.