DocumentaçãoGuia do desenvolvedor do Target

Como a at.js funciona

Last update: Sat Jul 20 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Tópicos:

Criado para:

  • undefined

Para implementar a Adobe Target no lado do 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 at.js é a biblioteca de implementação para implementação no lado do cliente do Adobe 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 versão mais recente da at.js.

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

Na implementação Target ilustrada abaixo, as seguintes soluções da Adobe Experience Cloud são implementadas: Analytics, Target e Audience Manager. Além disso, os seguintes Experience Cloud serviços principais estão implementados: Adobe Experience Platform, Audiences e Visitor ID Service.

Qual é a diferença entre os diagramas de fluxo de trabalho 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.
  • A at.js 2.x gerencia conceitos chamados Views, 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 o Views e como isso melhora a integração do 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.

(Clique na imagem para expandir até a largura total.)

Fluxo do Target com 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 Profile Store. O Store solicita públicos qualificados do Audience Library (por exemplo, públicos 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 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.
Conteúdo direcionado para exibições que são mostradas como resultado das ações do usuário em um SPA, que é armazenado em cache no navegador para que possa ser aplicado instantaneamente, sem uma chamada de servidor adicional, quando as exibições forem acionadas por meio do triggerView().
7
Os dados do Analytics são enviados para Data Collection servidores.
8
Os dados direcionados correspondem aos dados do Analytics por meio da SDID e são processados no armazenamento de relatórios do Analytics.Os dados do
Analytics podem ser exibidos em Analytics e Target pelos relatórios do (A4T).

Agora, onde quer que triggerView() seja implementado no SPA, as ações Views e 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.

(Clique na imagem para expandir até a largura total.)

Fluxo do Target na at.js 2.x triggerView

Etapa
Detalhes
1
triggerView() é chamado no SPA para renderizar o View 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 Target Profile Store para contar o visitante nas métricas de atividade e incremento.
5
Analytics dados enviados para Data Collection Servers.
6
Os dados do Target são correspondidos aos dados do Analytics por meio da SDID e processados no armazenamento de relatórios do Analytics. Os dados do Analytics podem ser exibidos em Analytics e Target pelos relatórios do A4T.

Vídeo - diagrama de arquitetura da 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.

https://video.tv.adobe.com/v/26250/?quality=12

Consulte Noções básicas sobre o funcionamento da at.js 2.x para obter mais informações.

diagrama do at.js 1.x

Os diagramas a seguir ajudam a entender o fluxo de trabalho da at.js 1.x.

(Clique na imagem para expandir até a largura total.)

Fluxo do Target na at.js 1.x

Etapa
Descrição
Chama
Descrição
1
A chamada retornará a ID do Experience Cloud (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.
3
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 à Loja de perfis 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órios do Analytics.
Os dados do Analytics podem ser exibidos no Analytics e no Target pelos relatórios do Analytics for Target (A4T).

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

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

  • Os benefícios da utilização da at.js
  • As configurações da at.js
  • O tratamento de cintilação
  • Depuração do at.js
  • Problemas conhecidos
  • Perguntas frequentes

https://video.tv.adobe.com/v/27959/?quality=12

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

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

  1. As imagens são pré-carregadas (se houver tags do <img> no conteúdo HTML).

  2. O conteúdo HTML é anexado ao nó DOM.

  3. Os scripts embutidos são executados (código delimitado nas tags do <script>).

  4. 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.
recommendation-more-help
6906415f-169c-422b-89d3-7118e147c4e3