DocumentaciónGuía para desarrolladores de Target

Cómo funciona at.js

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

Creado para:

  • Desarrollador

Para implementar Adobe Target del lado del cliente, debe utilizar la biblioteca JavaScript at.js.

En una implementación del lado del cliente de Adobe Target, Target envía las experiencias asociadas a una actividad directamente al explorador del cliente. El explorador decide qué experiencia mostrar y lo hace. Con una implementación del lado del cliente, puede utilizar un editor WYSIWYG, el Compositor de experiencias visuales (VEC) o una interfaz no visual, el Compositor de experiencias basadas en formularios, para crear experiencias de prueba y personalización.

¿Qué es at.js?

La biblioteca at.js es la biblioteca de implementación para la implementación del lado del cliente de Adobe Target. La biblioteca at.js mejora los tiempos de carga de página en implementaciones web y proporciona mejores opciones de implementación en aplicaciones de una sola página. at.js es la biblioteca de implementación recomendada y se actualiza con frecuencia con nuevas capacidades. Recomendamos que todos los clientes implementen o migren a la última versión de at.js.

Para obtener más información, consulte Bibliotecas de JavaScript de Target.

En la implementación Targetque se muestra a continuación, se han implementado las siguientes soluciones de Adobe Experience Cloud: Analytics, Target y Audience Manager. Además, se han implementado los siguientes Experience Cloud servicios principales: Adobe Experience Platform, Audiences y Visitor ID Service.

¿Cuál es la diferencia entre los diagramas de flujo de trabajo de at.js 1.x y at.js 2.x?

Para obtener más información sobre las diferencias introducidas en 2.O de 1, consulte Actualización de at.js 1.x a at.js 2.x.x.

En términos generales, existen un par de diferencias entre las dos versiones:

  • at.js 2 no tiene un concepto de solicitud de mbox global sino una solicitud de carga de página. La solicitud de carga de página se puede ver como una solicitud para recuperar contenido que debería aplicarse en la carga inicial de página del sitio web.
  • SPA at.js 2.x administra los conceptos de Views, que se utilizan para las aplicaciones de una sola página (). at.js 1.x no tiene en cuenta este concepto.

Diagramas de at.js 2.x

SPA Los siguientes diagramas le ayudan a comprender el flujo de trabajo de at.js 2.x con Views y cómo esto mejora la integración de la. Para obtener una mejor introducción a los conceptos utilizados en at.js 2.x, consulte Implementación de aplicación de una sola página.

(Haga clic en la imagen para ampliarla a ancho completo).

Flujo de Target con at.js 2.x

Paso
Detalles
1
La llamada devuelve el Experience Cloud ID si el usuario se autentica, y otra llamada sincroniza el ID del cliente.
2
La biblioteca de at.js carga de forma sincronizada y oculta el cuerpo del documento.
at.js también se puede cargar de manera asíncrona con una opción de fragmento de ocultamiento previo implementado en la página.
3
Se solicita una carga de página que incluye todos los parámetros configurados (MCID, SDID y el ID del cliente).
4
Se ejecutan los scripts de perfil y se incluyen en Profile Store. Detenervuelve a solicitar audiencias del Audience Library que cumplan los requisitos (por ejemplo, audiencias compartidas de Adobe Analytics, Audience Manager, etc.).
Los atributos del cliente se envían a Profile Store en un procesamiento de lotes.
5
Según los parámetros de la solicitud de la URL y los datos de perfil, Target decide qué actividades y experiencias vuelven al visitante para la página actual y las vistas futuras.
6
El contenido dirigido se devuelve a la página, incluyendo, de manera opcional, los valores de perfil para una personalización adicional.
El contenido dirigido se muestra en la página actual lo más rápido posible y sin parpadeo del contenido predeterminado.
Contenido dirigido para vistas que se muestran como resultado de acciones del usuario en una SPA almacenada en caché en el explorador, de modo que se pueda aplicar instantáneamente sin una llamada al servidor adicional cuando se activan las vistas triggerView().
7
Los datos de Analytics se han enviado a Data Collection servidores.
8
Se comparan los datos de Target con los datos de Analytics mediante el SDID y se procesan en el almacén de informes de Analytics.Los datos de
Analytics se pueden ver en Analytics y Target mediante informes de (A4T).

SPA Ahora, dondequiera que triggerView() esté implementado en su, Views y las acciones se recuperan de la caché y se muestran al usuario sin una llamada al servidor. triggerView() también realiza una solicitud de notificaciones al back-end Target para aumentar y registrar los recuentos de impresión. Para obtener más información sobre at.js para las SPA con vistas, consulte Implementación de aplicación de una sola página.

(Haga clic en la imagen para ampliarla a ancho completo).

Flujo de Target at.js 2.x triggerView

Paso
Detalles
1
SPA Se llama a triggerView() en el para procesar View y aplicar acciones para modificar elementos visuales.
2
El contenido dirigido para la vista se lee desde la caché.
3
El contenido dirigido se muestra lo más rápido posible y sin parpadeo del contenido predeterminado.
4
La solicitud de notificación se envía a Target Profile Store para contar al visitante en la actividad e incrementar las métricas.
5
Analytics datos enviados a Data Collection Servers.
6
Se compararon los datos de Target con los datos de Analytics mediante el SDID y se procesaron en el almacén de informes de Analytics. Los datos de Analytics se pueden ver en Analytics y Target mediante los informes de A4T.

Vídeo: Diagrama arquitectónico de at.js 2.x

at.js 2.x mejora la compatibilidad de Adobe Target con las SPA e integra otras soluciones de Experience Cloud. Este vídeo explica cómo se vincula todo.

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

Consulte Descripción del funcionamiento de at.js 2.x para obtener más información.

Diagrama de at.js 1.x

Los siguientes diagramas le ayudan a comprender el flujo de trabajo de at.js 1.x.

(Haga clic en la imagen para ampliarla a ancho completo).

Flujo de Target at.js 1.x

Paso
Descripción
La llamada
Descripción
1
La llamada devuelve el ID del Experience Cloud (MCID) si el usuario se autentica; otra llamada sincroniza el ID del cliente.
2
La biblioteca de at.js carga de forma sincronizada y oculta el cuerpo del documento.
3
Se realiza una solicitud de mbox global que incluye todos los parámetros, MCID, SDID e ID de cliente (opcional) configurados.
4
Se ejecutan los scripts de perfiles y se incluyen en el Almacenamiento de perfiles. El Almacenamiento solicita audiencias de la Biblioteca de audiencias que cumplan los requisitos (por ejemplo, audiencias compartidas de Adobe Analytics, Audience Manager, etc.).
Se envían los atributos del cliente al Almacenamiento de perfiles en un procesamiento de lotes.
5
Según la URL, los parámetros de mbox y los datos de perfil, Target decide qué actividades y experiencias vuelven al visitante.
6
Se devuelve el contenido dirigido a la página, incluyendo de manera opcional los valores de perfil para una personalización adicional.
Se muestra la experiencia lo más rápido posible sin parpadeos del contenido predeterminado.
7
Se envían los datos de Analytics a los servidores de recopilación de datos.
8
Se comparan los datos de Target con los datos de Analytics mediante el SDID y se procesan en el almacén de informes de Analytics.Los datos de
Analytics se pueden ver en Analytics y en Target a través de los informes Analytics for Target (A4T).

Vídeo: Tutorías: Sugerencias y descripción general de at.js (26 de junio de 2019)

Este vídeo es una grabación de "Horario de oficina", una iniciativa dirigida por el equipo Adobe Customer Care.

  • Ventajas de utilizar at.js
  • Configuración de at.js
  • Control de parpadeo
  • Depurar at.js
  • Problemas conocidos
  • Preguntas más frecuentes

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

Cómo procesa at.js ofertas con contenido HTML

Al procesar ofertas con contenido HTML, at.js aplica el siguiente algoritmo:

  1. Las imágenes se cargan previamente (si el contenido HTML tiene etiquetas <img>).

  2. El contenido HTML se adjunta al nodo DOM.

  3. Se ejecutan scripts en línea (código delimitado por etiquetas <script>).

  4. Los scripts remotos se cargan de forma asíncrona y se ejecutan (etiquetas <script> con atributos src).

Notas importantes:

  • at.js no proporciona garantías en el orden de ejecución del script remoto, ya que estos se cargan de forma asincrónica.
  • Los scripts en línea no deberían tener dependencias en scripts remotos, ya que se cargan y ejecutan más adelante.
recommendation-more-help
6906415f-169c-422b-89d3-7118e147c4e3