Show Menu
TÓPICOS×

Incorporação de um aplicativo REACT usando o Editor SPA AEM e Integração com o AEM Screens Analytics

Esta seção descreve como incorporar um aplicativo interativo de página única usando REACT (ou Angular) usando o editor AEM SPA que pode ser configurado pelos profissionais de negócios no AEM e também como integrar seu aplicativo interativo ao Adobe Analytics offline.

Uso do Editor SPA AEM

Siga as etapas abaixo para usar o Editor SPA AEM:
  1. Clonar o AEM repo do Editor SPA em https://github.com/adobe/aem-spa-project-archetype.
    Esse arquétipo cria um projeto mínimo do Adobe Experience Manager como ponto de partida para seus próprios projetos SPA. As propriedades que devem ser fornecidas ao usar esse arquétipo permitem nomear como desejado todas as partes deste projeto.
  2. Siga as instruções do readme para criar um projeto de arquétipo do editor AEM 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 \
    
    
    Usamos o GroupId como com.adobe.aem.screens e o ArtiactualId como My Sample SPA (que é o padrão). Você pode escolher o seu próprio, conforme necessário.
  3. Depois que o projeto for criado, use um IDE ou editor de sua escolha e importe o projeto Maven gerado.
  4. Implante para sua instância AEM local usando o comando mvn clean install -PautoInstallPackage .

Editar conteúdo no aplicativo REACT

Para editar o conteúdo no aplicativo REACT:
  1. Navegue até https://localhost:4502/editor.html/content/mysamplespa/en/home.html (substitua o nome do host, a porta e o nome do projeto, conforme aplicável).
  2. Você deve poder editar o texto que está sendo exibido no aplicativo Hello world.

Adicionar o aplicativo REACT interativo à AEM Screens

Siga as etapas abaixo para adicionar o aplicativo REACT interativo à AEM Screens:
  1. Crie um novo projeto da AEM Screens. Consulte Criação e gerenciamento de projetos para obter mais detalhes.
    Crie um Canal de sequência ao criar um canal na pasta Canais do projeto do Screens.
    Consulte Criação e gerenciamento de Canais para obter mais detalhes.
  2. Edite qualquer canal de sequência e arraste e solte um componente de página incorporado.
    Consulte Adicionando componentes a um Canal para obter mais detalhes.
    Certifique-se de adicionar o evento de interação do usuário ao atribuir o canal à tela.
  3. Clique em Editar na barra de ações para editar as propriedades do canal de sequência.
  4. Arraste e solte o componente Página ​incorporada e selecione o home page no aplicativo mysamplespa, por exemplo, /content/mysamplespa/en/home .
  5. Registre um player neste projeto e agora você pode ver seu aplicativo interativo em execução no AEM Screens.
    Consulte Registro do dispositivo para saber mais detalhes sobre como registrar um dispositivo.

Integração do SPA com o Adobe Analytics com recursos offline por meio do AEM Screens

Siga as etapas abaixo para integrar o SPA ao Adobe Analytics com recursos offline por meio do AEM Screens:
  1. Configure o Adobe Analytics no AEM Screens.
    Consulte Configuração do Adobe Analytics com o AEM Screens para saber como executar o sequenciamento no Adobe Analytics com o AEM Screens e enviar eventos personalizados usando o Adobe Analytics offline.
  2. Edite seu aplicativo de reação no IDE/editor de sua escolha (especialmente o componente de texto ou outro componente que você deseja que seja o start dos eventos que emitem).
  3. No evento click ou em outro evento que você deseja capturar para seu componente, adicione as informações de análise usando o modelo de dados padrão.
    Consulte Configuração do Adobe Analytics com telas AEM para obter mais detalhes.
  4. Chame a API do AEM Screens Analytics para salvar o evento off-line e enviá-lo em rastros para a Adobe Analytics.
    Por exemplo,
    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);
        }
    }
    
    
    O firmware do player adiciona automaticamente mais detalhes sobre o player e seu ambiente de tempo de execução aos dados personalizados de análise que você envia. Portanto, talvez você não precise capturar detalhes de SO/dispositivo de baixo nível, a menos que seja absolutamente necessário. Basta focar nos dados de análise de negócios.