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

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

Last update: Thu Oct 03 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • トピック：

作成対象：

  • 中級
  • 経験者
  • 開発者

Target アクティビティは、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 拡張機能アイコン）をクリックします。

Target VEC で web サイトを開くと、Visual Editing Helper が自動的に有効になり、オーサリング機能が強化されます。 この拡張機能には、条件付き設定はありません。 この拡張機能では、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 オファーをページに適用する前に、いくつかのカスタム処理を行う必要があります。 または、1 回の呼び出しで複数の場所をリクエストします。 at.js の実装では、pageLoadEnabled を false に設定し、getOffers() 関数を使用して pageLoad リクエストを実行することで、これを行うことができます。

getOffers() と applyOffers() を使用した at.js の例により、VEC ベースのアクティビティを手動でレンダリングする
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() 関数を使用して Target pageLoad リクエストを手動で実行し、applyOffers() を使用してコンテンツをページに適用していないかどうかを確認します。

Platform Web SDK は、開発者に対して、コンテンツのリクエストとレンダリングに非常に柔軟に対応します。 その他のオプションと詳細については、 パーソナライズされたコンテンツのレンダリングに関する専用ドキュメントを参照してください。

実装の例

これで、基本的な Platform Web SDK の実装が完了しました。

JavaScript

自動ターゲットコンテンツレンダリングを使用した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>
タグ

自動ターゲットコンテンツレンダリングを使用したタグのサンプルページ：

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