Initialize SDKs
Follow the steps in the Initialize SDK diagram to ensure that all necessary tasks needed to load the Adobe Target at.js JavaScript library are executed in the correct sequence.
Initialize SDKs diagram
For multi-page applications, this flow happens every time the page reloads, or the visitor navigates to a new page on the website.
Click the following links to navigate to the desired sections:
- 1.1: Load visitor API SDK
- 1.2: Set Customer ID
- 1.3: Configure automatic page load request
- 1.4: Configure flicker handling
- 1.5: Configure data mapping
- 1.6: Promotion
- 1.7: Cart-based criteria
- 1.8: Popularity-based criteria
- 1.9: Item-based criteria
- 1.10: User-based criteria
- 1.11: Custom criteria
- 1.12: Provide attributes used in inclusion rules
- 1.13: Provide excludedIds
- 1.14: Pass the entity.event.detailsOnly=true parameter
- 1.15: Configure remote data mapping
- 1.16: Load at.js
1.1: Load visitor API SDK
This step helps ensure that the VisitorAPI.js
library is loaded, configured, and initialized correctly.
img-md |
---|
w-400 modal-image |
Prerequisites
- To use the Visitor ID/API Service, your company must be enabled for the Adobe Experience Cloud and have an Organization ID. For more information, see Experience Cloud Requirements: Organization ID in the Identity Service Help guide.
- You need the
VisitorAPI.js
file. You should already have this file if you have Adobe Analytics implemented. This file can also be added through the Adobe Experience Platform tags extension or can be downloaded from the Adobe Analytics Code Manager.
Configure and refer VisitorAPI.js
For more information, see Implement the Experience Cloud Service for Target.
Readings
- Experience Cloud Identity Service overview
- About the ID Service
- Cookies and the Experience Cloud Identity Service
- How the Experience Cloud Identity Service requests and sets IDs
- Understanding ID synchronization and match rates
Actions
- Embed the
VisitorAPI.js
file on your webpages. - Read about the available configurations for the Visitor ID/API Service.
- After the
VisitorAPI.js
file is loaded, use theVisitor.getInstance
method to initialize using the necessary configurations you need. - Familiarize yourself with the available methods.
Return to the diagram at the top of this page.
1.2: Set Customer ID
This step helps ensure that your visitors’ known IDs (CRM ID, User ID, and so forth) are tied to the anonymous ID of Adobe for cross-device personalization.
img-md |
---|
w-400 modal-image |
Prerequisites
- The visitors’ known ID should be available in the data layer.
Set Customer ID
For more information, see setCustomerIDs.
Readings
Actions
- Use
visitor.setCustomerIDs
to set the visitor known ID.
Return to the diagram at the top of this page.
1.3: Configure automatic page-load request
This step enables at.js to fetch all the experiences that must be rendered on the page while loading the at.js JavaScript library file.
img-md |
---|
w-400 modal-image |
Prerequisites
- Not all data in the data layer must be sent to Target. Consult with your business team (digital marketing team) to determine which data is valuable for experimentation, optimization, and personalization. Only this data should be sent to Target.
- Ensure that you do not send any Personally Identifiable Information (PII) data to Target.
Configure automatic page load request
For more information, see targetGlobalSettings().
Readings
Learn about the pageLoadEnabled
setting in targetGlobalSettings().
Actions
- Modify the
window.targetGlobalSettings
object to enable automatic page-load requests.
Return to the diagram at the top of this page.
1.4: Configure flicker handling
This step helps ensure that there is no page flicker when delivering experiences.
img-md |
---|
w-400 modal-image |
Prerequisites
- Have a discussion with the team responsible for web page performance regarding the pros and cons of controlling flicker using the default method used by at.js. You can search for design patterns that let you use custom flicker handling solution, such as loader animation. If you do not find a pattern, you can request a new pattern.
Configure flicker handling
For more information, see targetGlobalSettings().
Setting bodyHidingEnabled
to true
hides the entire page body while the page-load request is in progress. If you have not enabled the automatic page-load request for any reason (data later not ready, for example), it is best to set this setting to false
.
If you have disabled bodyHidingEnabled
because you do not want to fire APLR and want to fire the page request later, or you do not need flicker handling, you must implement your own flicker handling. You can handle flicker two ways: hiding the sections under test or by showing a throbber on the sections under test.
Readings
- How at.js manages flicker
- Learn about the bodyHiddenStyle and bodyHidingEnabled objects in targetGlobalSettings().
Actions
- Modify the
window.targetGlobalSettings
object to setbodyHiddenStyle
andbodyHidingEnabled
.
Return to the diagram at the top of this page.
1.5: Configure data mapping
This step helps ensure that all the data that must be sent to Target is set.
img-md |
---|
w-400 modal-image |
Prerequisites
-
The data layer should be ready with all the data that must be sent to Target.
-
Recommendations: enrich profile.
- Pass
entity.id
to capture data for recently viewed criteria and items based on criteria based on last viewed product. - Pass
entity.id
to capture data for popularity criteria based on favorite category. - Pass the profile attribute if custom criteria is based on it or used in inclusion rule filtering in any criteria.
- Pass
-
Recommendations: ingest product data.
- Other entity parameters (reserved and custom) can be passed to ingest or update the product catalog in Recommendations.
- The product catalog can also be updated by using entity feeds using the Target UI or API.
Map data to Target
For more information, see targetPageParams().
Readings
Actions
- Use the
targetPageParams()
function to set all the required data that must be sent to Target.
Return to the diagram at the top of this page.
1.6: Promotion
Add promoted items and control their placement in your Target Recommendations designs.
Available options
- Promote by IDs
- Promote by collection
- Promote by attribute
Entity parameters required
- Item attribute in promotion must be passed when using the “promote by attribute” option.
Return to the diagram at the top of this page.
1.7: Cart-based criteria
Make recommendations based on the user’s cart contents.
Available criteria
- People Who Viewed These, Viewed Those
- People Who Viewed These, Bought Those
- People Who Bought These, Bought Those
Entity parameters required
- cartIds
Readings
Return to the diagram at the top of this page.
1.8: Popularity-based criteria
Make recommendations based on the overall popularity of an item across your site or based on the popularity of items within a user’s favorite or most-viewed category, brand, genre, and so forth.
Available criteria
- Most Viewed Across the Site
- Most Viewed by Category
- Most Viewed by Item Attribute
- Top Sellers Across the Site
- Top Sellers by Category
- Top Sellers by Item Attribute
- Top by Analytics Metric
Entity parameters required
entity.categoryId
or the item attribute for popularity based if the criteria is based on the current item or the item attribute.- Nothing must be passed for Most Viewed/Top sold across the site.
Readings
Return to the diagram at the top of this page.
1.9: Item-based criteria
Make recommendations based on finding similar items to an item that the user is viewing or has recently viewed.
Available criteria
- People Who Viewed This, Viewed That
- People Who Viewed This, Bought That
- People Who Bought This, Bought That
- Items with Similar Attributes
Entity parameters required
entity.id
or any profile attribute used as a key
Readings
Return to the diagram at the top of this page.
1.10: User-based criteria
Make recommendations based on the user’s behavior.
Available criteria
- Recently Viewed Items
- Recommended for You
Entity parameters required
entity.id
Readings
Return to the diagram at the top of this page.
1.11: Custom criteria
Make recommendations based on a custom file that you upload.
Available criteria
- Custom algorithm
Entity parameters required
entity.id
or the attribute used as a key for the custom algorithm
Readings
Return to the diagram at the top of this page.
1.12: Provide attributes used in inclusion rules
Return to the diagram at the top of this page.
1.13: Provide excludedIds
Pass entity IDs for entities that you want to exclude from your recommendations. For example, you can exclude items that are already in the shopping cart.
Readings
Return to the diagram at the top of this page.
1.14: Pass the entity.event.detailsOnly=true
parameter
Use entity attributes to pass product or content information to Target Recommendations.
Readings
Return to the diagram at the top of this page.
1.15: Configure remote data mapping (remote)
This step ensures that all the data that must be sent to Target is set.
img-md |
---|
w-400 modal-image |
Prerequisites
- Data layer should be ready with all the data that must be sent to Target.
Set up data providers
For more information, see Data providers.
Readings
Actions
Use the targetPageParams()
function to set all the required data that must be sent to Target.
Return to the diagram at the top of this page.
1.16: Load at.js
This step ensures that the at.js JavaScript library is loaded and initialized.
img-md |
---|
w-400 modal-image |
Prerequisites
- Download or ask your digital marketing team for the
at.js 2.*x*
JavaScript library file.
Readings
Actions
Embed the at.js file on all your webpages where experimentation, optimization, personalization, and data collection must happen.
Return to the diagram at the top of this page.
Proceed to Step 2: Configure data collection.