Use Adobe Target and Web SDK for personalization
Adobe Experience Platform Web SDK can deliver and render personalized experiences managed in Adobe Target to the web channel. You can use a WYSIWYG editor, called the Visual Experience Composer (VEC), or a non-visual interface, the Form-based Experience Composer, to create, activate, and deliver your activities and personalization experiences.
The following features have been tested and are currently supported in Target:
Web SDK system diagram
The following diagram helps you understand the workflow of Target and Web SDK edge decisioning.
b. Personalized content for views that are shown as a result of user actions in a Single Page Application (SPA) is cached so it can be instantly applied without an additional server call when the views are triggered.
. The Edge Network sends the Visitor ID and other values in cookies, such as consent, Session ID, identity, cookie check, personalization.
Enabling Adobe Target
To enable Target, do the following:
- Enable Target in your datastream with the appropriate client code.
- Add the
renderDecisions
option to your events.
Then, optionally, you can also add the following options:
decisionScopes
: Retrieve specific activities (useful for activities created with the form-based composer) by adding this option to your events.- Prehiding snippet: Hide only certain portions of the page.
Using the Adobe Target VEC
To use the VEC with a Web SDK implementation, install and activate either the Firefox or Chrome VEC Helper Extension.
For more information, see Visual Experience Composer helper extension in the Adobe Target guide.
Rendering personalized content
See Rendering personalization content for more information.
Audiences in XDM
When defining audiences for your Target activities that are delivered via the Web SDK, XDM must be defined and used. After you define XDM schemas, classes, and schema field groups, you can create a Target audience rule defined by XDM data for targeting. Within Target, XDM data displays in the Audience Builder as a custom parameter. The XDM is serialized using dot notation (for example, web.webPageDetails.name
).
If you have Target activities with predefined audiences that use custom parameters or a user profile, they are not delivered correctly via the SDK. Instead of using custom parameters or the user profile, you must use XDM instead. However, there are out-of-the-box audience targeting fields supported via the Web SDK that do not require XDM. These fields are available in the Target UI that do not require XDM:
- Target Library
- Geo
- Network
- Operating System
- Site Pages
- Browser
- Traffic Sources
- Time Frame
For more information, see Categories for audiences in the Adobe Target guide.
Response tokens
Response tokens are used to send metadata to third parties like Google or Facebook. Response tokens are returned
in the meta
field within propositions
-> items
. Here is a sample:
{
"id": "AT:eyJhY3Rpdml0eUlkIjoiMTI2NzM2IiwiZXhwZXJpZW5jZUlkIjoiMCJ9",
"scope": "__view__",
"scopeDetails": ...,
"renderAttempted": true,
"items": [
{
"id": "0",
"schema": "https://ns.adobe.com/personalization/dom-action",
"meta": {
"experience.id": "0",
"activity.id": "126736",
"offer.name": "Default Content",
"offer.id": "0"
}
}
]
}
To collect the response tokens, you have to subscribe to alloy.sendEvent
promise, iterate through propositions
, and extract the details from items
-> meta
.
Every proposition
has a renderAttempted
boolean field indicating whether the proposition
was rendered or not. See the sample below:
alloy("sendEvent",
{
renderDecisions: true,
decisionScopes: [
"hero-container"
]
}).then(result => {
const { propositions } = result;
// filter rendered propositions
const renderedPropositions = propositions.filter(proposition => proposition.renderAttempted === true);
// collect the item metadata that represents the response tokens
const collectMetaData = (items) => {
return items.filter(item => item.meta !== undefined).map(item => item.meta);
}
const pageLoadResponseTokens = renderedPropositions
.map(proposition => collectMetaData(proposition.items))
.filter(e => e.length > 0)
.flatMap(e => e);
});
When automatic rendering is enabled, propositions array contains:
On Page-Load:
- Form-Based Composer based
propositions
withrenderAttempted
flag set tofalse
- Visual Experience Composer based propositions with
renderAttempted
flag set totrue
- Visual Experience Composer based propositions for a Single Page Application view with
renderAttempted
flag set totrue
On View - change (for cached views):
- Visual Experience Composer based propositions for a Single Page Application view with
renderAttempted
flag set totrue
When automatic rendering is disabled, propositions array contains:
On Page-Load:
- Form-based Composer-based
propositions
withrenderAttempted
flag set tofalse
- Visual Experience Composer-based propositions with
renderAttempted
flag set tofalse
- Visual Experience Composer-based propositions for a Single Page Application view with
renderAttempted
flag set tofalse
On View - change (for cached views):
- Visual Experience Composer-based propositions for a Single Page Application view with
renderAttempted
flag set tofalse
Single profile update
The Web SDK lets you update the profile to the Target profile and to the Web SDK as an experience event.
To update a Target profile, ensure that the profile data is passed with the following:
- Under
"data {"
- Under
"__adobe.target"
- Prefix
"profile."
renderDecisions
decisionScopes
<String>
xdm
data
Typical Web SDK code using this command looks like the following:
sendEvent
with profile data
alloy("sendEvent", {
renderDecisions: true|false,
xdm: { // Experience Event XDM data },
data: { // Freeform data }
});
How to send Profile attributes to Adobe Target:
alloy("sendEvent", {
renderDecisions: true,
data: {
__adobe: {
target: {
"profile.gender": "female",
"profile.age": 30
}
}
}
});
Request recommendations
The following table lists Recommendations attributes and whether each one is supported via the Web SDK:
How to send Recommendations attributes to Adobe Target:
alloy("sendEvent", {
renderDecisions: true,
data: {
__adobe: {
target: {
"entity.id": "123",
"entity.genre": "Drama"
}
}
}
});
Debugging
mboxTrace and mboxDebug have been deprecated. Use Web SDK debugging.
Terminology
Propositions: In Adobe Target, propositions correlate to the experience that is selected from an Activity.
Schema: The schema of a decision is the type of offer in Adobe Target.
Scope: The scope of the decision. In Adobe Target, the scope is the mBox. The global mBox is the __view__
scope.
XDM: The XDM is serialized into dot notation and then put into Adobe Target as mBox parameters.