How at.js works
To implement Adobe Target client-side, you must use the at.js JavaScript library.
In a client-side implementation of Adobe Target, Target delivers the experiences associated with an activity directly to the client browser. The browser decides which experience to display and displays it. With a client-side implementation, you can use a WYSIWYG editor, the Visual Experience Composer (VEC), or a non-visual interface, the Form-based Experience Composer, to create your test and personalization experiences.
What is at.js?
The at.js library is the implementation library for client-side implementation of Adobe Target. The at.js library improves page-load times for web implementations and provides better implementation options for single-page applications. at.js is the recommended implementation library and is updated frequently with new capabilities. We recommend that all customers implement or migrate to the latest version of at.js.
For more information, see Target JavaScript libraries.
In the Targetimplementation illustrated below, the following Adobe Experience Cloud solutions are implemented: Analytics, Target, and Audience Manager. In addition, the following Experience Cloud core services are implemented: Adobe Experience Platform, Audiences, and Visitor ID Service.
What is the difference between at.js 1.x and at.js 2.x workflow diagrams?
See Upgrading from at.js 1.x to at.js 2.x for more information on the differences that were introduced in 2.O from 1.x.
From a high level view, there are a couple of differences between the two versions:
- at.js 2.x does not have a global mbox request concept but rather a page-load request. A page-load request can be viewed as a request to retrieve content that should be applied on the initial page load of your website.
- at.js 2.x manages a concepts called Views, which are use for Single Page Applications (SPAs). at.js 1.x is not aware of this concept.
at.js 2.x diagrams
The following diagrams help you understand the workflow of at.js 2.x with Views and how this enhances the SPA integration. To get a better introduction of the concepts used in at.js 2.x, see Single Page Application implementation.
(Click image to expand to full width.)
at.js can also be loaded asynchronously with an optional prehiding snippet implemented on the page.
Customer attributes are sent to the Profile Store in a batch process.
Targeted content on the current page is revealed as quickly as possible without flicker of default content.
Targeted content for views that are shown as a result of user actions in a SPA is cached in the browser so it can be instantly applied without an additional server call when the views are triggered through
triggerView()
.Analytics data can then be viewed in both Analytics and Target via (A4T) reports.
Now, wherever triggerView()
is implemented on your SPA, the Views and actions are retrieved from cache and shown to the user without a server call. triggerView()
also makes a notifications request to the Target backend in order to increment and record impression counts. For more information on at.js for SPAs with Views, see Single Page Application implementation.
(Click image to expand to full width.)
triggerView()
is called in the SPA to render the View and apply actions to modify visual elements.Video - at.js 2.x architectural diagram
at.js 2.x enhances Adobe Target’s support for SPAs and integrates with other Experience Cloud solutions. This video explains how everything comes together.
See Understanding how at.js 2.x works for more information.
at.js 1.x diagram
The following diagrams help you understand the workflow of at.js 1.x.
(Click image to expand to full width.)
Customer attributes are sent to the Profile Store in a batch process.
The experience is revealed as quickly as possible without flicker of default content.
Analytics data can then be viewed in both Analytics and Target via Analytics for Target (A4T) reports.
Video - Office hours: at.js tips and overview (June 26, 2019)
This video is a recording of “Office Hours,” an initiative led by the Adobe Customer Care team.
- Benefits of using at.js
- at.js settings
- Flicker handling
- Debugging at.js
- Known issues
- FAQ
How at.js renders offers with HTML content
When rendering offers with HTML content, at.js applies the following algorithm:
-
Images are preloaded (if there are any
<img>
tags in HTML content). -
HTML content is attached to the DOM node.
-
Inline scripts are executed (code enclosed in
<script>
tags). -
Remote scripts are loaded asynchronously and executed (
<script>
tags withsrc
attributes).
Important notes:
- at.js does not provide any guarantees on the order of remote script execution, as these are loaded asynchronously.
- Inline scripts should not have any dependencies on remote scripts, as these are loaded and executed later.