Como a at.js funciona

Para implementar Adobe Target no cliente, você deve usar a biblioteca JavaScript at.js.

Em uma implementação no lado do cliente do Adobe Target, o Target fornece as experiências associadas a uma atividade diretamente para o navegador do cliente. O navegador decide qual experiência será exibida e realiza a ação. Com uma implementação no lado do cliente, você pode usar um editor WYSIWYG, o Visual Experience Composer (VEC) ou uma interface não visual, o Experience Composer baseado em formulário, para criar experiências de teste e personalização.

O que é a at.js?

A biblioteca da at.js é a nova biblioteca de implementação do Target. A biblioteca at.js melhora os tempos de carregamento de página de implementações da Web e fornece opções de implementações melhores para aplicativos de página única. A at.js é a biblioteca de implementação recomendada e é atualizada frequentemente com novos recursos. Recomendamos que todos os clientes implementem ou migrem para a última versão da at.js.

Para obter mais informações, consulte Bibliotecas de JavaScript do Target.

Na implementação Target ilustrada abaixo, as seguintes soluções Adobe Experience Cloud são implementadas: Analytics, Público alvo e Audience Manager. Além disso, os seguintes serviços principais da Experience Cloud são implementados: Adobe Launch, Audiences e Serviço de ID do visitante.

Qual é a diferença entre o at.js 1.x e at.js 2.x tem fluxo de trabalho de diagramas?

Consulte Atualização da at.js 1.x para at.js 2.x para obter mais informações sobre as diferenças introduzidas na versão 2.0 em relação à 1.x.

A partir de uma exibição de alto nível, há algumas diferenças entre as duas versões:

A at.js 2.x não tem um conceito global de solicitação de mbox, mas sim uma solicitação de carregamento de página. Uma solicitação de carregamento de página pode ser visualizada como uma solicitação para recuperar o conteúdo que deve ser aplicado no carregamento da página inicial do site.
O at.js 2.x gerencia conceitos chamados Visualização, que são usados para aplicativos de página única (SPA). at.js 1.x não está ciente deste conceito.

diagramas at.js 2.x

Os diagramas a seguir ajudam a entender o fluxo de trabalho da at.js 2.x com Exibições e como isso melhora a integração de SPA. Para obter uma mais detalhes sobre os conceitos usados na Noções básicas sobre o funcionamento da at.js 2.x, consulte Implementação de aplicativos de página única.

Fluxo do Target com a at.js 2.x

Etapa	Detalhes
1	A chamada retorna o Experience Cloud ID caso o usuário seja autenticado; outra chamada sincroniza a ID do cliente.
2	A biblioteca at.js é carregada de modo síncrono e oculta o corpo do documento. O at.js também pode ser carregado de forma assíncrona com uma opção que oculta previamente o trecho implementado na página.
3	Uma solicitação de carregamento de página é feita, incluindo todos os parâmetros configurados (MCID, SDID e ID do cliente).
4	Os scripts de perfil executam e, em seguida, fazem o feed na Loja do perfil. A Loja solicita que os públicos-alvos qualificados da Biblioteca de público-alvos (por exemplo, públicos alvos compartilhados do Adobe Analytics, Gerenciamento de público-alvo etc.). Os atributos do cliente são enviados à Loja de perfis em um processo em lote.
5	Com base nos parâmetros de solicitação de URL e dados de perfil, Target decide quais atividades e experiências retornarão ao visitante para a página atual e para as exibições futuras.
6	O conteúdo direcionado é enviado de volta para a página, incluindo, opcionalmente, valores de perfil para personalização adicional. O conteúdo direcionado na página atual é revelado o mais rápido possível sem cintilação do conteúdo padrão. O conteúdo direcionado para visualizações que são mostrados como resultado das ações do usuário em um SPA é armazenado em cache no navegador, de modo que possa ser aplicado instantaneamente sem uma chamada de servidor adicional quando o visualização for acionado `triggerView()`.
7	Os dados do Analytics são enviados ao servidores de Coleção de dados.
8	Os dados direcionados correspondem aos dados do Analytics por meio da SDID e são processados no armazenamento de relatórios do Analytics. Em seguida, os dados do Analytics podem ser visualizados no Analytics e no Target pelos relatórios do Analytics for Target (A4T).

Agora, onde quer triggerView() que seja implementada em seu SPA, as Exibições e as ações são recuperadas do cache e mostradas ao usuário, sem uma chamada de servidor. triggerView() também faz uma solicitação de notificações ao backend Target para aumentar e registrar contagens de impressão. Para obter mais informações sobre o at.js para SPAS com Exibições, consulte Implementação de aplicativos de página única.

Fluxo do Target com a at.js 2.x triggerView

Etapa	Detalhes
1	`triggerView()` é chamado no SPA para renderizar a Exibição e aplicar ações para modificar elementos visuais.
2	O conteúdo direcionado para a exibição é lido do cache.
3	O conteúdo direcionado é revelado o mais rápido possível sem oscilação do conteúdo padrão.
4	A solicitação de notificação é enviada para a Target Loja de perfil para contar o visitante nas métricas de atividade e incremento.
5	Os dados do Analytics são enviados aos Servidores de coleta de dados.
6	Os dados do Target são correspondidos aos dados do Analytics pela SDID, e processados no armazenamento de relatório do Analytics. Em seguida, os dados do Analytics podem ser visualizados no Analytics e no Target pelos relatórios do A4T.

Vídeo - diagrama da arquitetura do at.js 2.x

A at.js 2.x aprimora o suporte do Adobe Target para SPAs e integra-se com outras soluções da Experience Cloud. Este vídeo explica como tudo se une.

Consulte Entendendo como o at.js 2.x funciona para obter mais informações.

diagrama do at.js 1.x

Fluxo do Target - at.js 1.x

Etapa	Descrição	Chama	Descrição
1	A chamada retornará a Experience Cloud ID (MCID) se o usuário estiver autenticado; outra chamada sincroniza a ID do cliente.	2	A biblioteca at.js é carregada de modo síncrono e oculta o corpo do documento.
1	Uma solicitação mbox global é feita, incluindo todos os parâmetros configurados, MCID, SDID e ID do cliente (opcional).	4	Os scripts de perfil executam e, em seguida, fazem o feed na Loja do perfil. A Loja solicita públicos qualificados da Biblioteca de público-alvo (por exemplo, públicos-alvo compartilhados de Adobe Analytics, Audience Manager, etc.). Os atributos do cliente são enviados para o Profile Store em um processo em lote.
5	Com base no URL, nos parâmetros mbox e nos dados do perfil, o Target decide quais atividades e experiências são retornadas ao visitante.	6	O conteúdo direcionado é retornado à página, opcionalmente incluindo os valores de perfil para personalização adicional. A experiência é revelada o mais rápido possível sem cintilação do conteúdo padrão.
7	Os dados do Analytics são enviados ao servidores de Coleção de dados.	8	Os dados do Target são correspondidos aos dados do Analytics pela SDID, e processados no armazenamento de relatório do Analytics. Analytics Os dados podem ser exibidos no Analytics e no Target pelos relatórios do Analytics for Target (A4T).

Vídeo - Horário do escritório: dicas e visão geral do at.js (26 de junho de 2019)

Este vídeo é uma gravação de "No expediente", uma iniciativa da equipe de Atendimento ao cliente da Adobe.

Benefícios do uso do at.js
Configurações do at.js
Manuseio de oscilação
Depuração do at.js
Problemas conhecidos
Perguntas frequentes

Como o at.js renderiza ofertas com conteúdo HTML

Ao renderizar ofertas com conteúdo HTML, o at.js aplica o seguinte algoritmo:

As imagens são pré-carregadas (se houver tags do <img> no conteúdo HTML).
O conteúdo HTML é anexado ao nó DOM.
Os scripts embutidos são executados (código delimitado nas tags do <script>).
Os scripts remotos são carregados de forma assíncrona e executados (tags do <script> com src atributos).

Observações importantes:

O at.js não oferece garantia na ordem de execução dos scripts remotos, pois são carregados de forma assíncrona.
Os scripts embutidos não devem ter dependências nos scripts remotos, pois são carregados e executados posteriormente.