Incrustación de una aplicación REACT mediante el AEM SPA Editor 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 del negocio en AEM y también cómo integrar la aplicación interactiva con Adobe Analytics sin conexión.

Uso del AEM SPA Editor

Siga los pasos a continuación para utilizar el AEM SPA Editor:

  1. Clona el repositorio AEM SPA Editor en https://github.com/adobe/aem-spa-project-archetype.

    NOTA

    Este tipo de archivo crea un proyecto mínimo de Adobe Experience Manager como punto de partida para sus propios proyectos SPA. Las propiedades que se deben proporcionar al utilizar este tipo de archivo permiten asignar un nombre a todas las partes deseadas de este proyecto.

  2. Siga las instrucciones Léame para crear un AEM proyecto de tipo de archivo del editor de SPA:

    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 \
    
    NOTA

    Utilizamos GroupId como com.adobe.aem.screens y ArtifactId como My Sample SPA (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. Implemente en la instancia de AEM local utilizando el comando mvn clean install -PautoInstallPackage.

Edición de contenido en la aplicación REACT

Para editar el contenido de la aplicación REACT:

  1. Vaya a https://localhost:4502/editor.html/content/mysamplespa/en/home.html (reemplace el nombre de host, el puerto y el nombre de 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 información.

    NOTA

    Cree un Canal de secuencia mientras crea un canal en la carpeta Channels de su proyecto Screens.

    Consulte Creación y administración de canales para obtener más información.

    screen_shot_2019-02-15at100330am

  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.

    NOTA

    Asegúrese de añadir 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.

    screen_shot_2019-02-15at100555am

  4. Arrastre y suelte el componente Página integrada y seleccione la página principal en la aplicación mysamplespa, por ejemplo, /content/mysamplespa/en/home.

    screen_shot_2019-02-15at101104am

  5. Registre un reproductor en este proyecto y debería poder ver cómo se ejecuta la aplicación interactiva en AEM Screens.

    Consulte Registro de dispositivos para obtener información detallada sobre cómo registrar un dispositivo.

Integración del SPA con Adobe Analytics con capacidades sin conexión mediante AEM Screens

Siga los pasos a continuación para integrar el SPA con Adobe Analytics con la capacidad 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 que empiece a 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 AEM Screenss para obtener más información.

  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);
        }
    }
    
    NOTA

    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íe. Por lo tanto, es posible que no necesite capturar detalles de SO/dispositivo de bajo nivel a menos que sea absolutamente necesario. Solo tiene que centrarse en los datos de análisis empresarial.

En esta página