文档Experience Platform将Target从at.js 2.x迁移到Web SDK

呈现Adobe Target可视化体验编辑器(VEC)活动

Last update: Thu Oct 03 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 主题：

创建对象：

  • 中级
  • 有经验的
  • 开发人员

可使用可视化体验编辑器(VEC)或基于表单的编辑器设置Target活动。 Platform Web SDK可以像at.js一样检索基于VEC的活动并将其应用于页面。 对于迁移的这一部分，您将执行以下操作：

  • 安装可视化编辑帮助程序浏览器扩展
  • 使用Platform Web SDK执行sendEvent调用以请求活动。
  • 更新来自使用getOffers()执行Target pageLoad请求的at.js实施的任何引用。

可视化编辑帮助程序浏览器扩展

借助适用于Google Chrome的Adobe Experience Cloud可视化编辑帮助程序浏览器扩展，您可以在Adobe Target可视化体验编辑器(VEC)中以可靠的方式加载网站，以快速创作和QA Web体验。

可视化编辑帮助程序浏览器扩展适用于使用at.js或Platform Web SDK的网站。

获取并安装可视化编辑帮助程序

  1. 导航到Chrome网上应用商店🔗中的Adobe Experience Cloud可视化编辑帮助程序浏览器扩展。

  2. 单击“添加到​ Chrome > 添加扩展”。

  3. 在Target中打开VEC。

  4. 若要使用该扩展，请在VEC或QA模式下，单击Chrome浏览器工具栏中的可视化编辑帮助程序浏览器扩展图标

    可视化编辑扩展图标 {modal="regular"}

    。

当在目标VEC中打开网站以进行创作时，会自动启用可视化编辑帮助程序。 该扩展没有任何条件设置。 该扩展会自动处理所有设置，包括SameSite Cookie设置。

请参阅专用文档以了解有关可视化编辑帮助程序扩展和可视化体验编辑器故障诊断的更多信息。

IMPORTANT
新的可视化编辑帮助程序扩展取代了以前的Target VEC帮助程序浏览器扩展。 如果安装了旧版VEC助手扩展，则在使用可视化编辑助手扩展之前，应将其删除或禁用。

自动请求和应用内容

在页面上配置Platform Web SDK后，您可以从Target请求内容。 与可以配置为在加载库时自动请求内容的at.js不同，Platform Web SDK要求您显式执行命令。

如果您的at.js实施将pageLoadEnabled设置设置为true，以便允许自动渲染基于VEC的活动，则您将通过Platform Web SDK执行以下sendEvent命令：

JavaScript
code language-javascript 
alloy("sendEvent", {
  "renderDecisions": true
});
标记

在标记中，在选择了呈现可视化个性化决策选项的情况下使用发送事件操作类型：

发送包含标记中选择的渲染可视化个性化决策的事件 {modal="regular"}

按需请求和应用内容

某些Target实施在将选件应用到页面之前，需要对VEC选件进行一些自定义处理。 或者，他们在一次调用中请求多个位置。 在at.js实现中，可以通过将pageLoadEnabled设置为false并使用getOffers()函数执行pageLoad请求来完成此操作。

at.js示例使用getOffers()和applyOffers()手动渲染基于VEC的活动
code language-javascript 
adobe.target.getOffers({
  request: {
    execute: {
      pageLoad: {}
    }
  }
}).
then(response => adobe.target.applyOffers({ response: response }));

Platform Web SDK没有特定的pageLoad事件。 使用decisionScopes选项和sendEvent命令可控制Target内容的所有请求。 __view__作用域用于pageLoad请求的用途。

等效的Platform Web SDK sendEvent方法：
  1. 执行包含__view__决策范围的sendEvent命令
  2. 使用applyPropositions命令将返回的内容应用到页面
  3. 执行具有decisioning.propositionDisplay事件类型和建议详细信息的sendEvent命令以递增展示
code language-javascript 
alloy("sendEvent", {
  // Request the special "__view__" scope for target-global-mbox / pageLoad
  decisionScopes: ["__view__"]
}).then(function(result) {
  // Check if content (propositions) were returned
  if (result.propositions) {
    var retrievedPropositions = result.propositions;
    // Apply propositions to the page
    return alloy("applyPropositions", {
      propositions: retrievedPropositions
    }).then(function(applyPropositionsResult) {
      var renderedPropositions = applyPropositionsResult.propositions;
      // Send a display notification with the sendEvent command
      alloy("sendEvent", {
        "xdm": {
          "eventType": "decisioning.propositionDisplay",
          "_experience": {
            "decisioning": {
              "propositions": renderedPropositions
            }
          }
        }
      });
    });
  }
});
NOTE
可以手动渲染在可视化体验编辑器中进行的修改。 基于VEC的修改手动渲染并不常见。 检查您的at.js实施是否使用getOffers()函数手动执行Target pageLoad请求，而不使用applyOffers()将内容应用到页面。

Platform Web SDK在请求和呈现内容方面为开发人员提供了极大的灵活性。 有关其他选项和详细信息，请参阅有关渲染个性化内容的专用文档。

实施示例

基础Platform Web SDK实施现已完成。

JavaScript

具有自动Target内容渲染的JavaScript示例：

code language-html 
<!doctype html>
<html>
<head>
  <title>Example page</title>
  <!--Data Layer to enable rich data collection and targeting-->
  <script>
    var digitalData = {
      // Data layer information goes here
    };
  </script>

  <!--Third party libraries that may be used by Target offers and modifications-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

  <!--Prehiding snippet for Target with asynchronous Web SDK deployment-->
  <script>
    !function(e,a,n,t){var i=e.head;if(i){
    if (a) return;
    var o=e.createElement("style");
    o.id="alloy-prehiding",o.innerText=n,i.appendChild(o),setTimeout(function(){o.parentNode&&o.parentNode.removeChild(o)},t)}}
    (document, document.location.href.indexOf("mboxEdit") !== -1, ".body { opacity: 0 !important }", 3000);
  </script>

  <!--Platform Web SDK base code-->
  <script>
    !function(n,o){o.forEach(function(o){n[o]||((n.__alloyNS=n.__alloyNS||
    []).push(o),n[o]=function(){var u=arguments;return new Promise(
    function(i,l){n[o].q.push([i,l,u])})},n[o].q=[])})}
    (window,["alloy"]);
  </script>

  <!--Platform Web SDK loaded asynchonously. Change the src to use the latest supported version.-->
  <script src="https://cdn1.adoberesources.net/alloy/2.6.4/alloy.min.js" async></script>

  <!--Configure Platform Web SDK then send event-->
  <script>
    alloy("configure", {
      "edgeConfigId": "ebebf826-a01f-4458-8cec-ef61de241c93",
      "orgId":"ADB3LETTERSANDNUMBERS@AdobeOrg"
    });

    // Send an event to the Adobe edge network and render Target content automatically
    alloy("sendEvent", {
      "renderDecisions": true
    });
  </script>
</head>
<body>
  <h1 id="title">Home Page</h1><br><br>
  <p id="bodyText">Navigation</p><br><br>
  <a id="home" class="navigationLink" href="#">Home</a><br>
  <a id="pageA" class="navigationLink" href="#">Page A</a><br>
  <a id="pageB" class="navigationLink" href="#">Page B</a><br>
  <a id="pageC" class="navigationLink" href="#">Page C</a><br>
  <div id="homepage-hero">Homepage Hero Banner Content</div>
</body>
</html>
标记

具有自动Target内容渲染的标记示例页面：

code language-html 
<!doctype html>
<html>
<head>
  <title>Example page</title>
  <!--Data Layer to enable rich data collection and targeting-->
  <script>
    var digitalData = {
      // Data layer information goes here
    };
  </script>

  <!--Third party libraries that may be used by Target offers and modifications-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

  <!--Prehiding snippet for Target with asynchronous Web SDK deployment-->
  <script>
    !function(e,a,n,t){var i=e.head;if(i){
    if (a) return;
    var o=e.createElement("style");
    o.id="alloy-prehiding",o.innerText=n,i.appendChild(o),setTimeout(function(){o.parentNode&&o.parentNode.removeChild(o)},t)}}
    (document, document.location.href.indexOf("mboxEdit") !== -1, ".body { opacity: 0 !important }", 3000);
  </script>

    <!--Tags Header Embed Code: REPLACE WITH THE INSTALL CODE FROM YOUR OWN ENVIRONMENT-->
    <script src="//assets.adobedtm.com/launch-EN93497c30fdf0424eb678d5f4ffac66dc.min.js" async></script>
</head>
<body>
  <h1 id="title">Home Page</h1><br><br>
  <p id="bodyText">Navigation</p><br><br>
  <a id="home" class="navigationLink" href="#">Home</a><br>
  <a id="pageA" class="navigationLink" href="#">Page A</a><br>
  <a id="pageB" class="navigationLink" href="#">Page B</a><br>
  <a id="pageC" class="navigationLink" href="#">Page C</a><br>
  <div id="homepage-hero">Homepage Hero Banner Content</div>
</body>
</html>

在标记中，添加Adobe Experience Platform Web SDK扩展：

添加Adobe Experience Platform Web SDK扩展 {modal="regular"}

添加所需的配置：
配置Web SDK标记扩展迁移选项 {modal="regular"}

使用发送事件操作和呈现选定的可视化个性化决策创建规则：
发送在标记中选择渲染个性化的事件 {modal="regular"}

接下来，了解如何请求和渲染基于表单的Target活动。

NOTE
我们致力于帮助您成功完成从at.js到Web SDK的Target迁移。 如果您在迁移过程中遇到障碍或觉得本指南中缺少关键信息，请在此社区讨论中发帖让我们知道。
recommendation-more-help
a69e1b51-9545-4d8a-822d-319242c29110