文件Experience Platform將Target從at.js 2.x移轉至Web SDK

呈現Adobe Target視覺化體驗撰寫器(VEC)活動

最後更新： 2026年11月7日

建立對象：

  • 中繼
  • 經驗豐富
  • 開發人員

使用視覺化體驗撰寫器(VEC)或表單式撰寫器來設定Target活動。 Platform Web SDK可以擷取VEC型活動，並套用至頁面，就像at.js一樣。 對於移轉的這個部分，您將會：

  • 安裝Visual Editing Helper瀏覽器擴充功能
  • 透過Platform Web SDK執行sendEvent呼叫以要求活動。
  • 更新您的at.js實作中任何使用getOffers()執行Target pageLoad要求的參考。

Visual Editing Helper瀏覽器擴充功能

適用於Google Chrome的Adobe Experience Cloud Visual Editing Helper瀏覽器擴充功能可讓您可靠地在Adobe Target視覺化體驗撰寫器(VEC)內載入網站，以快速撰寫網站體驗及評估品質。

Visual Editing Helper瀏覽器擴充功能適用於使用at.js或Platform Web SDK的網站。

取得並安裝Visual Editing Helper

  1. 導覽至Chrome網站商店中的Adobe Experience Cloud Visual Editing Helper瀏覽器擴充功能。
  2. 按一下[新增至​Chrome > 新增擴充功能。
  3. 在Target中開啟VEC。
  4. 若要使用擴充功能，請在VEC或QA模式中時，按一下Chrome瀏覽器工具列上的Visual Editing Helper瀏覽器擴充功能圖示 Visual Editing擴充功能圖示 {modal="regular"}。

Visual Editing Helper會在Target VEC中開啟網站時自動啟用，以支援撰寫。 此擴充功能沒有任何條件設定。 此擴充功能可自動處理所有設定，包括 SameSite Cookie 設定。

請參閱專屬檔案，以取得有關Visual Editing Helper擴充功能和疑難排解Visual Experience Composer的詳細資訊。

IMPORTANT
新的Visual Editing Helper擴充功能會取代先前的Target VEC Helper瀏覽器擴充功能。 如果已安裝舊版VEC Helper擴充功能，應先移除或停用該擴充功能，再使用Visual Editing Helper擴充功能。

自動要求與套用內容

在頁面上設定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命令所控制。 __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
我們致力協助您成功將Target從at.js移轉至Web SDK。 如果您在移轉時遇到問題，或覺得本指南中缺少重要資訊，請在此社群討論中張貼以告知我們。
recommendation-more-help
platform-learn-help-tutorial-migrate-target-websdk