Adobe Experience Platform Web SDK支持从Adobe个性化解决方案中检索个性化内容,包括 Adobe Target, offer decisioning 和 Adobe Journey Optimizer.
此外,Web SDK还通过Adobe Experience Platform个性化目标(例如 Adobe Target 和 自定义个性化连接. 要了解如何为同页和下一页个性化配置Experience Platform,请参阅 专用指南.
在Adobe Target中创建的内容 可视化体验编辑器 以及Adobe Journey Optimizer的 Web Campaign UI SDK可自动检索和渲染。 在Adobe Target中创建的内容 基于表单的体验编辑器 或Offer decisioning无法由SDK自动呈现。 相反,您必须使用SDK请求此内容,然后自行手动渲染内容。
将事件发送到服务器时,您可以设置 renderDecisions
选项至 true
. 这样做会强制SDK自动呈现任何符合自动呈现条件的个性化内容。
alloy("sendEvent", {
"renderDecisions": true,
"xdm": {
"commerce": {
"order": {
"purchaseID": "a8g784hjq1mnp3",
"purchaseOrderNumber": "VAU3123",
"currencyCode": "USD",
"priceTotal": 999.98
}
}
}
});
渲染个性化内容是异步执行的,因此您不应假定一段特定内容将何时完成渲染。
要访问任何个性化内容,您可以提供回调函数,在SDK收到来自服务器的成功响应后将调用该函数。 为您的回调提供了 result
对象,其中可能包含 propositions
包含任何返回的个性化内容的属性。 下面是一个示例,说明在发送事件时如何提供回调函数。
alloy("sendEvent", {
xdm: {}
}).then(function(result) {
if (result.propositions) {
// Manually render propositions and send "display" event
}
});
在此示例中, result.propositions
如果存在,则是一个数组,其中包含与事件相关的个性化建议。 默认情况下,它仅包含适合自动渲染的建议。
此 propositions
数组可能与以下示例类似:
[
{
"id": "AT:eyJhY3Rpdml0eUlkIjoiMTI3MDE5IiwiZXhwZXJpZW5jZUlkIjoiMCJ9",
"scope": "__view__",
"items": [
{
"id": "11223344",
"schema": "https://ns.adobe.com/personalization/dom-action",
"data": {
"content": "<h2 style=\"color: yellow\">An HTML proposition.</h2>",
"selector": "#hero",
"type": "setHtml"
},
"meta": {}
}
],
"scopeDetails": {
...
},
"renderAttempted": false
},
{
"id": "AT:PyJhY3Rpdml0eUlkIjoiMTI3MDE5IiwiZXhwZXJpZW5jZUlkIjoiMCJ8",
"scope": "__view__",
"items": [
{
"id": "11223345",
"schema": "https://ns.adobe.com/personalization/dom-action",
"data": {
"content": "<h2 style=\"color: yellow\">Another HTML proposition.</h2>",
"selector": "#sidebar",
"type": "setHtml"
},
"meta": {}
}
],
"scopeDetails": {
...
},
"renderAttempted": false
}
]
在本例中, renderDecisions
选项未设置为 true
当 sendEvent
已执行命令,因此SDK未尝试自动渲染任何内容。 但是,SDK仍自动检索符合自动渲染条件的内容,并在您希望手动渲染时,为您提供此内容。 请注意,每个建议对象都有其 renderAttempted
属性设置为 false
.
如果您选择将 renderDecisions
选项至 true
在发送事件时,SDK会尝试渲染任何符合自动渲染条件的建议(如之前所述)。 因此,每个建议对象将具有其 renderAttempted
属性设置为 true
. 在这种情况下,无需手动呈现这些建议。
到目前为止,我们仅讨论了符合自动呈现条件的个性化内容(即,在Adobe Target的可视化体验编辑器或Adobe Journey Optimizer的Web Campaign UI中创建的任何内容)。 检索任何个性化内容 非 符合自动渲染的条件,您需要通过填充 decisionScopes
选项。 范围是一个字符串,它标识您要从服务器检索的特定建议。
示例如下:
alloy("sendEvent", {
xdm: {},
decisionScopes: ['salutation', 'discount']
}).then(function(result) {
if (result.propositions) {
// Manually render propositions and send "display" event
}
});
在此示例中,如果在服务器上找到与 salutation
或 discount
范围,它们将返回并包含在 result.propositions
数组。 请注意,符合自动呈现条件的主张将继续包含在 propositions
阵列,无论如何配置 renderDecisions
或 decisionScopes
选项。 此 propositions
在此例中,数组类似于以下示例:
[
{
"id": "AT:cZJhY3Rpdml0eUlkIjoiMTI3MDE5IiwiZXhwZXJpZW5jZUlkIjoiMCJ2",
"scope": "salutation",
"items": [
{
"schema": "https://ns.adobe.com/personalization/json-content-item",
"data": {
"id": "4433221",
"content": {
"salutation": "Welcome, esteemed visitor!"
}
},
"meta": {}
}
],
"scopeDetails": {
"id": "AT:cZJhY3Rpdml0eUlkIjoiMTI3MDE5IiwiZXhwZXJpZW5jZUlkIjoiMCJ2",
"activity": {
"id": "384456"
}
},
"renderAttempted": false
},
{
"id": "AT:FZJhY3Rpdml0eUlkIjoiMTI3MDE5IiwiZXhwZXJpZW5jZUlkIjoiMCJ0",
"scope": "discount",
"items": [
{
"schema": "https://ns.adobe.com/personalization/html-content-item",
"data": {
"id": "4433222",
"content": "<div>50% off your order!</div>",
"format": "text/html"
},
"meta": {}
}
],
"scopeDetails": {
"id": "AT:FZJhY3Rpdml0eUlkIjoiMTI3MDE5IiwiZXhwZXJpZW5jZUlkIjoiMCJ0",
"activity": {
"id": "384457"
}
},
"renderAttempted": false
},
{
"id": "AT:eyJhY3Rpdml0eUlkIjoiMTI3MDE5IiwiZXhwZXJpZW5jZUlkIjoiMCJ9",
"scope": "__view__",
"items": [
{
"id": "11223344",
"schema": "https://ns.adobe.com/personalization/dom-action",
"data": {
"content": "<h2 style=\"color: yellow\">An HTML proposition.</h2>",
"selector": "#hero",
"type": "setHtml"
},
"meta": {}
}
],
"scopeDetails": {
"id": "AT:PyJhY3Rpdml0eUlkIjoiMTI3MDE5IiwiZXhwZXJpZW5jZUlkIjoiMCJ8",
"activity": {
"id": "384459"
}
},
"renderAttempted": false
},
{
"id": "AT:PyJhY3Rpdml0eUlkIjoiMTI3MDE5IiwiZXhwZXJpZW5jZUlkIjoiMCJ8",
"scope": "__view__",
"items": [
{
"id": "11223345",
"schema": "https://ns.adobe.com/personalization/dom-action",
"data": {
"content": "<h2 style=\"color: yellow\">Another HTML proposition.</h2>",
"selector": "#sidebar",
"type": "setHtml"
},
"meta": {}
}
],
"scopeDetails": {
"id": "AT:PyJhY3Rpdml0eUlkIjoiMTI3MDE5IiwiZXhwZXJpZW5jZUlkIjoiMCJ8",
"activity": {
"id": "384459"
}
},
"renderAttempted": false
}
]
此时,您可以按照自己认为合适的方式呈现建议内容。 在此示例中,建议与 discount
scope是使用Adobe Target的基于表单的HTML编辑器构建的体验建议。 假设您的页面上有元素,其ID为 daily-special
并希望从呈现内容 discount
中的建议 daily-special
元素,请执行以下操作:
result
对象。discount
.daily-special
元素,并将其HTML替换为个性化内容。display
事件。您的代码如下所示:
alloy("sendEvent", {
xdm: {},
decisionScopes: ['salutation', 'discount']
}).then(function(result) {
var propositions = result.propositions;
var discountProposition;
if (propositions) {
// Find the discount proposition, if it exists.
for (var i = 0; i < propositions.length; i++) {
var proposition = propositions[i];
if (proposition.scope === "discount") {
discountProposition = proposition;
break;
}
}
}
var discountHtml;
if (discountProposition) {
// Find the item from proposition that should be rendered.
// Rather than assuming there a single item that has HTML
// content, find the first item whose schema indicates
// it contains HTML content.
for (var j = 0; j < discountProposition.items.length; j++) {
var discountPropositionItem = discountProposition.items[i];
if (discountPropositionItem.schema === "https://ns.adobe.com/personalization/html-content-item") {
discountHtml = discountPropositionItem.data.content;
// Render the content
var dailySpecialElement = document.getElementById("daily-special");
dailySpecialElement.innerHTML = discountHtml;
// For this example, we assume there is only a signle place to update in the HTML.
break;
}
}
// Send a "display" event
alloy("sendEvent", {
xdm: {
eventType: "decisioning.propositionDisplay",
_experience: {
decisioning: {
propositions: [
{
id: discountProposition.id,
scope: discountProposition.scope,
scopeDetails: discountProposition.scopeDetails
}
]
}
}
}
});
}
});
如果您使用Adobe Target,则作用域与服务器上的mbox相对应,只不过这些作用域是同时请求的,而不是分别请求。 始终返回全局mbox。
SDK为以下人员提供各种工具: 管理闪烁 在个性化过程中。
此 applyPropositions
命令允许您从呈现或执行建议数组 Target 单页应用程序,而不增加 Analytics 和 Target 量度。 这提高了报告的准确性。
如果建议用于 __view__
范围(或Web表面)在页面加载时渲染,其 renderAttempted
标记将设置为 true
. 此 applyPropositions
命令不会重新渲染 __view__
具有以下特征的范围(或Web表面)建议 renderAttempted: true
标志。
以下示例中描述的用例重新渲染之前获取和渲染的购物车视图建议,而不发送显示通知。
在以下示例中, sendEvent
命令在视图更改时触发,并将生成的对象保存为常量。
接下来,当视图或组件更新时, applyPropositions
使用上一个命令中的建议调用命令 sendEvent
命令,以重新渲染视图建议。
var cartPropositions = alloy("sendEvent", {
renderDecisions: true,
xdm: {
web: {
webPageDetails: {
viewName: "cart"
}
}
}
}).then(function(result) {
var propositions = result.propositions;
// Collect response tokens, etc.
return propositions;
});
// Call applyPropositions to re-render the view propositions from the previous sendEvent command.
alloy("applyPropositions", {
propositions: cartPropositions
});
此用例适用于通过编写的活动选件 Target Form-based Experience Composer.
您必须在以下位置提供选择器、操作和范围: applyPropositions
呼叫。
支持 actionTypes
为:
setHtml
replaceHtml
appendHtml
// Retrieve propositions for salutation and discount scopes
alloy("sendEvent", {
decisionScopes: ["salutation", "discount"]
}).then(function(result) {
var retrievedPropositions = result.propositions;
// Render propositions on the page by providing additional metadata
return alloy("applyPropositions", {
propositions: retrievedPropositions,
metadata: {
salutation: {
selector: "#first-form-based-offer",
actionType: "setHtml"
},
discount: {
selector: "#second-form-based-offer",
actionType: "replaceHtml"
}
}
}).then(function(applyPropositionsResult) {
var renderedPropositions = applyPropositionsResult.propositions;
// Send the display notifications via sendEvent command
alloy("sendEvent", {
xdm: {
eventType: "decisioning.propositionDisplay",
_experience: {
decisioning: {
propositions: renderedPropositions
}
}
}
});
});
});
如果您没有为决策范围提供元数据,则不会呈现关联的建议。