Incorporação de um aplicativo REACT usando o Editor SPA AEM e Integração com o AEM Screens Analytics embedding-a-react-application-using-the-aem-spa-editor-and-integrating-with-aem-screens-analytics

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

AEM Utilização do editor SPA using-the-aem-spa-editor

Siga as etapas abaixo para usar o Editor de SPA AEM:

  1. AEM Clonar o repositório do Editor SPA em https://github.com/adobe/aem-spa-project-archetype.

    note note
    NOTE
    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 desse projeto.
  2. AEM Siga as instruções do arquivo readme para criar um projeto do arquétipo do editor SPA:

    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
    Usamos o GroupId as com.adobe.aem.screens e a variável ArtifactId as Meu SPA de Exemplo (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 na instância local do AEM usando o comando mvn clean install - PautoInstallPackage.

Edição de conteúdo no aplicativo REACT editing-content-in-the-react-app

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 ser capaz de editar o texto que está sendo exibido no aplicativo Hello world.

Adição do aplicativo REACT interativo ao AEM Screens adding-the-interactive-react-app-to-aem-screens

Siga as etapas abaixo para adicionar o aplicativo REACT interativo ao AEM Screens:

  1. Crie um novo projeto do AEM Screens. Consulte Criação e gerenciamento de projetos para obter mais detalhes.

  2. Criar um novo Canal do aplicativo (de preferência) (ou modelo 1x1 ou canal de várias zonas) no Canais pasta do seu projeto do Screens.

    note note
    NOTE
    Canais de sequência não são incentivados para esse caso de uso, pois eles vêm com uma lógica de apresentação de slides que entrará em conflito com a natureza interativa da experiência
    Consulte Criação e gerenciamento de canais para obter mais detalhes.
  3. Edite qualquer canal de sequência e arraste e solte um componente de página incorporado.

    Consulte Adicionar componentes a um canal para obter mais detalhes.

    note note
    NOTE
    Adicione o evento de interação do usuário ao atribuir o canal à exibição.
  4. Clique em Editar na barra de ações para editar as propriedades do canal.

    screen_shot_2019-02-15at100555am

  5. Arraste e solte a Página incorporada ou reutilize o componente existente em um canal de aplicativo e selecione a página inicial no aplicativo mysamplespa, por exemplo, /content/mysamplespa/en/home.

    screen_shot_2019-02-15at101104am

  6. Atribua o canal a uma exibição.

    note note
    NOTE
    Adicione o evento de interação do usuário ao atribuir o canal à exibição.
  7. Registrar um reprodutor neste projeto e atribuí-lo à exibição. Agora é possível 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 ao Adobe Analytics com recurso offline por meio do AEM Screens integrating-the-spa-with-adobe-analytics-with-offline-capability-through-aem-screens

Siga as etapas abaixo para integrar o SPA ao Adobe Analytics com o recurso offline por meio do AEM Screens:

  1. Configure o Adobe Analytics no AEM Screens.

    Consulte Configuração do Adobe Analytics com 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 o aplicativo react no IDE/editor de sua escolha (especialmente o componente de texto ou outro componente que você deseja começar a emitir eventos).

  3. No evento de clique ou outro evento que você deseja capturar para o componente, adicione as informações do Analytics usando o modelo de dados padrão.

    Consulte Configuração do Adobe Analytics com AEM Screenss para obter mais detalhes.

  4. Chame a API do AEM Screens Analytics para salvar o evento offline e enviá-lo em intermitências para a Adobe Analytics.

    Por exemplo,

    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
    O firmware do player adiciona automaticamente mais detalhes sobre o player e seu ambiente de tempo de execução aos dados de análise personalizados enviados. Portanto, talvez você não precise capturar detalhes de baixo nível do SO/dispositivo, a menos que seja absolutamente necessário. Você só precisa se concentrar nos dados de análise dos negócios.
recommendation-more-help
adce462a-f916-4dbe-9ab5-0b62cfb0f053