呈现个性化内容

上次更新： 2023-11-04

主题：
Web SDK
查看有关此主题的更多信息

创建对象：
Developer

User

Admin

Leader

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.
如果您找到一个建议，请循环遍历建议中的每个项目，查找包含HTML内容的项目。（检查总比假设要好。）
如果找到一个包含HTML内容的项目，请找到 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 标志。

用例1：重新呈现单页应用程序视图建议

下面示例中描述的用例重新呈现之前获取和渲染的购物车视图建议，而不发送显示通知。

在以下示例中， 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
});

用例2：没有选择器的渲染建议

此用例适用于使用创作的活动选件 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
                    }
                }
            }
        });
    });
});

如果您没有为决策范围提供元数据，则不会呈现关联的建议。

呈现个性化内容

自动呈现内容

手动呈现内容

管理闪烁

在单页应用程序中渲染建议而不增加量度

用例1：重新呈现单页应用程序视图建议

用例2：没有选择器的渲染建议

在此页面上

查看下一个：

学习

文档

社区

技术支持

资源

Adobe 帐户

Adobe