呈现个性化内容

Adobe Experience Platform Web SDK支持从Adobe个性化解决方案中检索个性化内容,这些解决方案包括Adobe TargetOffer decisioningAdobe Journey Optimizer

此外,Web SDK还通过Adobe Experience Platform个性化目标(如Adobe Target自定义个性化连接)支持同页和下一页个性化功能。 要了解如何为同页和下一页个性化配置Experience Platform,请参阅专用指南

SDK可以自动检索和渲染Adobe Target的可视化体验编辑器和Adobe Journey Optimizer的Web Campaign UI中创建的内容。 在Adobe Target的基于表单的体验编辑器、Adobe Journey Optimizer的基于代码的体验渠道或Offer decisioning中创建的内容,无法由SDK自动呈现。 相反,您必须使用SDK请求此内容,然后自行手动渲染内容。

自动呈现内容 automatic

将事件发送到服务器时,可以将renderDecisions选项设置为true。 这样做会强制SDK自动呈现任何符合自动呈现条件的个性化内容。

alloy("sendEvent", {
  "renderDecisions": true,
  "xdm": {
    "commerce": {
      "order": {
        "purchaseID": "a8g784hjq1mnp3",
        "purchaseOrderNumber": "VAU3123",
        "currencyCode": "USD",
        "priceTotal": 999.98
      }
    }
  }
});

渲染个性化内容是异步的,因此您不应假设一段特定内容何时已完成渲染。

手动呈现内容 manual

要访问任何个性化内容,您可以提供回调函数,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
  }
]

在该示例中,执行sendEvent命令时,renderDecisions选项未设置为true,因此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
    }
  });

在此示例中,如果在与salutationdiscount范围匹配的服务器上找到建议,则将返回这些建议并将其包含在result.propositions数组中。 请注意,无论如何配置renderDecisionsdecisionScopes选项,符合自动呈现条件的建议将继续包含在propositions阵列中。 在这种情况下,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范围匹配的建议是使用Adobe Target的基于表单的HTML编辑器构建的体验建议。 假定您的页面上的ID为daily-special的元素并希望将discount建议中的内容渲染到daily-special元素中,请执行以下操作:

  1. result对象提取建议。
  2. 循环遍历每个建议,查找范围为discount的建议。
  3. 如果您找到一个建议,请循环遍历建议中的每个项目,查找包含HTML内容的项目。 (检查总比假设要好。 )
  4. 如果找到一个包含HTML内容的项目,请在页面上找到daily-special元素,并将其HTML替换为个性化内容。
  5. 呈现内容后,发送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
              }
            ]
          }
        }
      }
    });
  }
});
TIP
如果您使用Adobe Target,则作用域将与服务器上的mbox相对应,只不过这些作用域是同时请求的,而不是分别请求的。 始终返回全局mbox。

管理闪烁

SDK在个性化过程中为管理闪烁提供了便利。

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

applyPropositions命令允许您将Target或Adobe Journey Optimizer中的建议数组渲染或执行到单页应用程序中,而不增加Analytics和Target指标。 这提高了报告准确性。

IMPORTANT
如果在页面加载时呈现了__view__作用域(或Web表面)的建议,则其renderAttempted标志将设置为trueapplyPropositions命令将不会重新呈现具有renderAttempted: true标志的__view__作用域(或Web表面)建议。

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

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

在以下示例中,sendEvent命令在视图更改时触发,并将生成的对象保存为常量。

接下来,当视图或组件被更新时,使用上一个sendEvent命令中的建议调用applyPropositions命令以重新呈现视图建议。

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或Adobe Journey Optimizer的基于代码的体验渠道创作的体验。

必须在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
        function sendDisplayEvent(proposition) {
            const {
                id,
                scope,
                scopeDetails = {}
            } = proposition;

            alloy("sendEvent", {
                xdm: {
                    eventType: "decisioning.propositionDisplay",
                    _experience: {
                        decisioning: {
                            propositions: [{
                                id: id,
                                scope: scope,
                                scopeDetails: scopeDetails,
                            }, ],
                            propositionEventType: {
                                display: 1
                            },
                        },
                    },
                },
            });
        }
    });
});

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

recommendation-more-help
ad108910-6329-42f1-aa1d-5920a2b13636