ドキュメントExperience PlatformTargetをat.js 2.xからWeb SDKに移行する

Adobe Target Visual Experience Composer （VEC）アクティビティのレンダリング

最終更新日： 2026年10月17日

作成対象：

  • Intermediate
  • Experienced
  • Developer

ターゲットアクティビティは、Visual Experience Composer （VEC）またはフォームベースのコンポーザーを使用して設定されます。 Platform Web SDKでは、at.jsと同様に、VEC ベースのアクティビティを取得してページに適用できます。 移行のこの部分では、次の操作を行います。

  • Visual Editing Helper ブラウザー拡張機能のインストール
  • Platform Web SDKでsendEvent呼び出しを実行して、アクティビティをリクエストします。
  • Target pageLoad リクエストの実行にgetOffers()を使用するat.js実装からの参照を更新します。

Visual Editing Helper ブラウザー拡張機能

Google Chrome用のAdobe Experience Cloud Visual Editing Helper ブラウザー拡張機能を使用すると、Adobe Target Visual Experience Composer （VEC）内でWeb サイトを確実に読み込み、Web エクスペリエンスを迅速にオーサリングおよびQAできます。

Visual Editing Helper ブラウザー拡張機能は、at.jsまたはPlatform Web SDKを使用するweb サイトで動作します。

Visual Editing Helperを取得してインストールします

  1. Chrome Web ストアの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は、Web サイトが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 オファーをページに適用する前に、VEC オファーのカスタム処理が必要です。 または、1回の呼出しで複数の場所をリクエストします。 at.jsの実装では、pageLoadEnabledをfalseに設定し、getOffers()関数を使用してpageLoad要求を実行することで、これを行うことができます。

getOffers()とapplyOffers()を使用してVEC ベースのアクティビティを手動でレンダリングするat.jsの例
code language-javascript 
adobe.target.getOffers({
  request: {
    execute: {
      pageLoad: {}
    }
  }
}).
then(response => adobe.target.applyOffers({ response: response }));

Platform Web SDKには、特定のpageLoad イベントがありません。 Target コンテンツに対するすべてのリクエストは、sendEvent コマンドを使用してdecisionScopes オプションで制御されます。 __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
Visual Experience Composerで行った変更🔗を手動でレンダリングできます。 VEC ベースの修正の手動レンダリングは一般的ではありません。 at.js実装でgetOffers()関数を使用して、applyOffers()を使用せずにTarget pageLoad リクエストを手動で実行し、コンテンツをページに適用しているかどうかを確認します。

Adobe Experience Platform Web SDKは、コンテンツのリクエストとレンダリングに優れた柔軟性をもたらします。 追加のオプションと詳細については、​ パーソナライズされたコンテンツのレンダリングに関する専用ドキュメント ​を参照してください。

実装例

Adobe Experience 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
platform-learn-help-tutorial-migrate-target-websdk