설명서Experience PlatformTarget을 at.js 2.x에서 Web SDK으로 마이그레이션

양식 기반 작성기를 사용하는 Target 활동 렌더링

Last update: Sun Mar 08 2026 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 주제:

작성 대상:

  • 중간
  • 경험
  • 개발자

일부 Target 구현에서는 지역 mbox(이제 "범위"라고 함)를 사용하여 양식 기반 경험 작성기를 사용하는 활동의 콘텐츠를 전달할 수 있습니다. at.js Target 구현에서 mbox를 사용하는 경우 다음을 수행해야 합니다.

  • getOffer() 또는 getOffers()을(를) 사용하는 at.js 구현의 모든 참조를 동일한 Platform Web SDK 메서드로 업데이트합니다.
  • 노출이 계산되도록 propositionDisplay 이벤트를 트리거하는 코드를 추가하십시오.

요청 시 콘텐츠 요청 및 적용

Target의 양식 기반 작성기를 사용하여 만들어 지역 mbox에 전달된 활동은 Platform Web SDK에서 자동으로 렌더링할 수 없습니다. at.js와 유사하게, 특정 Target 위치에 전달된 오퍼는 요청 시 렌더링해야 합니다.

getOffer() 및 applyOffer()을(를) 사용하는 at.js 예:
  1. 위치에 대한 오퍼를 요청하려면 getOffer()을(를) 실행하십시오.
  2. applyOffer()을(를) 실행하여 오퍼를 지정된 선택기에 렌더링합니다.
  3. getOffer() 요청 시 활동 노출 수가 자동으로 증가합니다.
code language-javascript 
// Retrieve an offer for the homepage-hero location
adobe.target.getOffer({
  "mbox": "homepage_hero",

  // Render offer to the #hero-banner selector
  "success": function(offers) {
    adobe.target.applyOffer({
      "mbox": "homepage_hero",
      "selector": "#hero-banner",
      "offer": offers
    });
  },
  "error": {
    console.log(error);
  },
  "timeout": 3000
});
applyPropositions 명령을 사용한 Platform Web SDK 동등 항목:
  1. sendEvent 명령을 실행하여 하나 이상의 위치(범위)에 대한 오퍼(제안)를 요청합니다.
  2. 각 범위의 페이지에 콘텐츠를 적용하는 방법에 대한 지침을 제공하는 메타데이터 개체로 applyPropositions 명령을 실행하십시오.
  3. sendEvent의 eventType으로 decisioning.propositionDisplay 명령을 실행하여 노출을 추적합니다.
code language-javascript 
// Retrieve propositions for homepage_hero location (scope)
alloy("sendEvent", {
  "decisionScopes": ["homepage_hero"]
}).then(function(result) {
  var retrievedPropositions = result.propositions;

  // Render offer (proposition) to the #hero-banner selector by supplying extra metadata
  return alloy("applyPropositions", {
    "propositions": retrievedPropositions,
    "metadata": {
      // Specify each regional mbox or scope name along with a selector and actionType
      "homepage_hero": {
        "selector": "#hero-banner",
        "actionType": "setHtml"
      }
    }
  }).then(function(applyPropositionsResult) {
    var renderedPropositions = applyPropositionsResult.propositions;

    // Send the display notifications via sendEvent command
    alloy("sendEvent", {
      "xdm": {
        "eventType": "decisioning.propositionDisplay",
        "_experience": {
          "decisioning": {
            "propositions": renderedPropositions
          }
        }
      }
    });
  });
});

Platform Web SDK은 지정된 applyPropositions과(와) 함께 actionType 명령을 사용하여 페이지에 양식 기반 활동을 적용할 수 있도록 보다 세밀한 제어를 제공합니다.

actionType
설명
at.js applyOffer()
Platform Web SDK applyPropositions
setHtml
컨테이너의 콘텐츠를 지운 다음 오퍼를 컨테이너에 추가합니다
예(항상 사용됨)
예
replaceHtml
컨테이너를 제거하고 오퍼로 바꿉니다.
아니요
예
appendHtml
지정된 선택기 뒤에 오퍼를 추가합니다.
아니요
예

추가 렌더링 옵션 및 예제는 Platform Web SDK을 사용하여 콘텐츠를 렌더링하는 방법에 대한 전용 설명서를 참조하십시오.

구현 예

아래 예제 페이지는 이전 섹션에 설명된 구현에 따라 작성되며, sendEvent 명령에 추가 범위만 추가합니다.

여러 범위가 있는 Platform Web SDK 예
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 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"
    });
    alloy("sendEvent", {
      // Request and render VEC-based activities
      "renderDecisions": true,
      // Request content for form-based activities using the "homepage_hero" scope
      "decisionScopes": ["homepage_hero"]
    }).then(function(result) {
      var retrievedPropositions = result.propositions;

      // Render offer (proposition) to the #hero-banner selector by supplying extra metadata
      return alloy("applyPropositions", {
        "propositions": retrievedPropositions,
        "metadata": {
          // Specify each regional mbox or scope name along with a selector and actionType
          "homepage_hero": {
            "selector": "#hero-banner",
            "actionType": "setHtml"
          }
        }
      }).then(function(applyPropositionsResult) {
        var renderedPropositions = applyPropositionsResult.propositions;

        // Send the display notifications via sendEvent command
        alloy("sendEvent", {
          "xdm": {
            "eventType": "decisioning.propositionDisplay",
            "_experience": {
              "decisioning": {
                "propositions": renderedPropositions
              }
            }
          }
        });
      });
    });
  </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>

다음으로 Platform Web SDK을 사용하여 Target 매개 변수를 전달하는 방법에 대해 알아봅니다.

NOTE
at.js에서 웹 SDK으로 Target을 성공적으로 이전할 수 있도록 지원하기 위해 최선을 다하고 있습니다. 마이그레이션에 문제가 발생하거나 이 안내서에 중요한 정보가 누락된 것 같은 느낌이 드는 경우 이 커뮤니티 토론에 게시하여 알려 주십시오.
recommendation-more-help
a69e1b51-9545-4d8a-822d-319242c29110