文件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可以擷取以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
a69e1b51-9545-4d8a-822d-319242c29110