DocumentationTargetTarget Developer Guide

Initialize SDKs

Last update: October 2, 2023
  • Topics:
  • APIs/SDKs

CREATED FOR:

  • Experienced
  • Developer

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.

Initialize SDKs diagram

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.

See details

Load Visitor API SDK diagram

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 the Visitor.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.

See details

Set Customer ID

Prerequisites

  • The visitors’ known ID should be available in the data layer.

Set Customer ID
For more information, see setCustomerIDs.

Readings

  • Real-time profile syncing for mbox3rdPartyId

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

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

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

  • How at.js manages flicker
  • Learn about the bodyHiddenStyle and bodyHidingEnabled objects in targetGlobalSettings().

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

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

  • targetPageParams()
  • Plan and implement Recommendations
  • Set up your Recommendations catalog

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

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

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

  • Cart-based

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

  • Popularity-based

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

  • Item based

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

  • User-based

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

  • Custom criteria

Return to the diagram at the top of this page.

1.12: Provide attributes used in inclusion rules

See details

Readings

  • Use dynamic and static 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.

See details

Readings

  • Can I dynamically exclude an entity?

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

  • Entity attributes

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

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

Load Adobe Target at.js diagram

Prerequisites

  • Download or ask your digital marketing team for the at.js 2.*x* JavaScript library file.

Readings

  • How Target works
  • How at.js works
  • Implement Target without a tag manager

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