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:

  1. 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.
  2. 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.
  3. Una vez creado el proyecto, utilice un IDE o un editor de su elección e importe el proyecto Maven generado.

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

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

  1. Cree un nuevo proyecto de AEM Screens. Consulte Creación y administración de proyectos para obtener más información.

  2. 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.
  3. 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.
  4. Haga clic en Editar en la barra de acciones para editar las propiedades del canal.

    screen_shot_2019-02-15at100555am

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

    screen_shot_2019-02-15at101104am

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

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

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

  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 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.
recommendation-more-help
adce462a-f916-4dbe-9ab5-0b62cfb0f053