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.

TIP
Click the images in this topic to expand to full screen.

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.

NOTE
The step numbers in the following illustration correspond to the sections below. The step numbers are in no particular order and do not reflect the order of steps taken in the Target UI while creating the activity.
w-600 modal-image
Initialize SDKs diagram

Click the following links to navigate to the desired sections:

1.1: Load visitor API SDK

This step helps ensure that the VisitorAPI.js library is loaded, configured, and initialized correctly.

See details
img-md
w-400 modal-image
Load Visitor API SDK diagram

Prerequisites

Configure and refer VisitorAPI.js

For more information, see Implement the Experience Cloud Service for Target.

Readings

Actions

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.

See details
img-md
w-400 modal-image
Set Customer ID

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.

See details
img-md
w-400 modal-image
Configure automatic page load request

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.

See details
img-md
w-400 modal-image
Configure flicker handling diagram

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

Actions

  • Modify the window.targetGlobalSettings object to set bodyHiddenStyle and bodyHidingEnabled.

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.

See details
img-md
w-400 modal-image
Data mapping diagram

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.
  • 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.

See details

Available options

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.

See details

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.

See details

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.

See details

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.

See details

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.

See details

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.

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.

See details

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.

See details
img-md
w-400 modal-image
Remote data mapping diagram

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

targetPageParams function

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.

See details
img-md
w-400 modal-image
Load Adobe Target at.js diagram

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.

recommendation-more-help
6906415f-169c-422b-89d3-7118e147c4e3