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

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

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

OBSERVAÇÃO

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.
AEM Siga as instruções do arquivo readme para criar um projeto do arquétipo do editor 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 \
```
OBSERVAÇÃO

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.
Depois que o projeto for criado, use um IDE ou editor de sua escolha e importe o projeto Maven gerado.
Implante na instância local do AEM usando o comando mvn clean install - PautoInstallPackage.

Edição de conteúdo no aplicativo REACT

Para editar o conteúdo no aplicativo REACT:

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

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

Crie um novo projeto do AEM Screens. Consulte Criação e gerenciamento de projetos para obter mais detalhes.
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.

OBSERVAÇÃO

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

OBSERVAÇÃO

Adicione o evento de interação do usuário ao atribuir o canal à exibição.
Clique em Editar na barra de ações para editar as propriedades do canal.
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.
Atribua o canal a uma exibição.

OBSERVAÇÃO

Adicione o evento de interação do usuário ao atribuir o canal à exibição.
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

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

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

Chame a API do AEM Screens Analytics para salvar o evento offline e enviá-lo em intermitências 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);
    }
}

OBSERVAÇÃO

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.