Platform Web SDKを使用したTargetへのパラメーターの送信

サイトのアーキテクチャ、ビジネス要件、使用される機能により、ターゲット実装はweb サイトによって異なります。 Adobe Targetの実装の多くは、コンテキスト情報、オーディエンス、コンテンツレコメンデーションのために様々なパラメーターを渡すことを含んでいます。

シンプルな商品詳細ページと注文確認ページを使用して、パラメーターをTargetに渡す際のライブラリの違いを示します。

at.jsを使用した次の2つのサンプルページを想定します。

製品詳細ページのat.js:
code language-html
<!doctype html>
<html>
<head>
  <title>Product Details - Men's Shirt</title>
  <!--Target parameters -->
  <script>
    targetPageParams = function() {
      return {
        // Property token
        "at_property": "5a0fd9bb-67de-4b5a-0fd7-9cc09f50a58d",
        // Mbox parameters
        "pageName": "product detail",
        // Profile parameters
        "profile.gender": "male",
        "user.categoryId": "clothing",
        // Entity parameters for Target Recomendations
        "entity.id": "SKU-00001-LARGE",
        "entity.categoryId": "clothing,shirts",
        "entity.customEntity": "some value",
        "cartIds": "SKU-00002,SKU-00003",
        "excludedIds": "SKU-00001-SMALL",
        // Customer ID for cross-device profile synching and Customer Attributes
        "mbox3rdPartyId": "TT8675309",
      };
    };
  </script>
  <!--Target at.js library loaded asynchonously-->
  <script src="/libraries/at.js" async></script>
</head>
<body>
  <h1 id="title">Men's Large Shirt</h1>
  <p>SKU: SKU-00001-LARGE</p>
</body>
</html>
注文確認ページのat.js:
code language-html
<!doctype html>
<html>
<head>
  <title>Order Confirmation</title>-->
  <!--Target parameters -->
  <script>
    targetPageParams = function() {
      return {
        // Property token
        "at_property": "5a0fd9bb-67de-4b5a-0fd7-9cc09f50a58d",
        // Order confirmation parameters
        "orderId": "ABC123",
        "productPurchasedId": "SKU-00002,SKU-00003",
        "orderTotal": 1337.89,
        // Customer ID for cross-device profile synching and Customer Attributes
        "mbox3rdPartyId": "TT8675309",
      };
    };
  </script>
  <!--Target at.js library loaded asynchonously-->
  <script src="/libraries/at.js" async></script>
</head>
<body>
  <h1 id="title">Order Confirmation</h1>
  <p>Thank you for your order</p>
</body>
</html>

パラメーターマッピングの概要

これらのページのTarget パラメーターは、Platform Web SDKを使用して異なる方法で送信されます。 at.jsを使用してTargetにパラメーターを渡すには、複数の方法があります。

  • ページ読み込みイベントのtargetPageParams()関数で設定(このページの例で使用)
  • ページ上のすべてのTarget リクエストにtargetPageParamsAll()関数で設定
  • 1か所のgetOffer()関数でパラメーターを直接送信する
  • 1つ以上の場所のgetOffers()関数でパラメーターを直接送信する

Platform Web SDKは、追加機能を必要とせずにデータを送信するための一貫した唯一の方法を提供します。 すべてのパラメーターは、sendEvent コマンドを使用してペイロードで渡す必要があり、次の2つのカテゴリに分類されます。

  • xdm オブジェクトから自動的にマッピングされます
  • data.__adobe.target オブジェクトを使用して手動で渡されました

次の表は、Platform Web SDKを使用してパラメーターの例をどのように再マッピングするかを示しています。

at.js パラメーターの例
Platform Web SDK オプション
メモ
at_property
なし
プロパティトークンは​ データストリーム ​で設定されており、sendEvent呼び出しで設定することはできません。
pageName
xdm.web.webPageDetails.name
すべてのTarget mbox パラメーターをxdm オブジェクトの一部として渡し、XDM ExperienceEvent クラスを使用してスキーマに準拠させる必要があります。 Mbox パラメーターをdata オブジェクトの一部として渡すことはできません。
profile.gender
data.__adobe.target.profile.gender
すべてのターゲットプロファイルパラメーターをdata オブジェクトの一部として渡し、適切にマッピングするにはprofile.というプレフィックスを付ける必要があります。
user.categoryId
data.__adobe.target.user.categoryId
Targetのカテゴリ親和性機能に使用される予約済みパラメーター。このパラメーターは、data オブジェクトの一部として渡す必要があります。
entity.id
data.__adobe.target.entity.id
または
xdm.productListItems[0].SKU
エンティティ IDは、Target Recommendationsの行動カウンターに使用されます。 これらのエンティティ IDは、data オブジェクトの一部として渡されるか、実装がそのフィールドグループを使用する場合は、xdm.productListItems配列内の最初の項目から自動的にマッピングされます。
entity.categoryId
data.__adobe.target.entity.categoryId
エンティティ カテゴリ IDは、data オブジェクトの一部として渡すことができます。
entity.customEntity
data.__adobe.target.entity.customEntity
Recommendations製品カタログの更新には、カスタムエンティティのパラメーターが使用されます。 これらのカスタムパラメーターは、data オブジェクトの一部として渡す必要があります。
cartIds
data.__adobe.target.cartIds
Targetのカートベースのレコメンデーションアルゴリズムに使用されます。
excludedIds
data.__adobe.target.excludedIds
レコメンデーションのデザインで特定のエンティティ IDが返されないようにするために使用します。
mbox3rdPartyId
xdm.identityMap オブジェクトに設定
デバイスと顧客属性をまたいでターゲットプロファイルを同期するために使用されます。 顧客IDに使用する名前空間は、データストリーム 🔗の ターゲット設定で指定する必要があります。
orderId
xdm.commerce.order.purchaseID
Target コンバージョン追跡の一意の注文を識別するために使用されます。
orderTotal
xdm.commerce.order.priceTotal
ターゲットのコンバージョンと最適化目標の注文合計のトラッキングに使用されます。
productPurchasedId
data.__adobe.target.productPurchasedId
または
xdm.productListItems[0-n].SKU
ターゲットコンバージョンの追跡とレコメンデーションアルゴリズムに使用されます。 詳しくは、以下の「​ エンティティのパラメーター」セクションを参照してください。
mboxPageValue
data.__adobe.target.mboxPageValue
​ カスタムスコアリング ​ アクティビティ目標に使用されます。

カスタムパラメーター

カスタム mbox パラメーターは、sendEvent コマンドを使用してXDM データとして渡す必要があります。 XDM スキーマに、Targetの実装に必要なすべてのフィールドが含まれていることを確認することが重要です。

targetPageParams()を使用したat.jsの例:

targetPageParams = function() {
  return {
    "pageName": "product detail"
  };
};

sendEvent コマンドを使用したPlatform Web SDK JavaScriptの例:

JavaScript
code language-javascript
alloy("sendEvent", {
  "xdm": {
    "web": {
      "webPageDetails": {
        // Other attributes included according to xdm schema
        "name": "product detail"
      }
    }
  }
});
タグ

タグでは、まずXDM オブジェクト ​ データ要素を使用してXDM フィールドにマッピングします。

XDM オブジェクトデータ要素のXDM フィールドへのマッピング ​ {modal="regular"}

次に、XDM オブジェクト ​を送信イベント ​ ​ アクション ​に含めます(複数のXDM オブジェクト ​は結合できます)。

送信イベントにXDM オブジェクトデータ要素を含める {modal="regular"}

NOTE
カスタム mbox パラメーターはxdm オブジェクトの一部であるため、新しい名前を使用して、これらのmbox パラメーターを参照するオーディエンス、アクティビティ、またはプロファイル スクリプトを更新する必要があります。 詳しくは、このチュートリアルの「Platform Web SDK互換のターゲットオーディエンスとプロファイルスクリプトの更新」ページを参照してください。

プロファイルパラメーター

Target プロファイルパラメーターは、Platform Web SDK sendEvent コマンドペイロードのdata.__adobe.target オブジェクトに渡す必要があります。

at.jsと同様に、値を永続的なTarget プロファイル属性として適切に保存するには、すべてのプロファイルパラメーターにprofile.というプレフィックスを付ける必要があります。 Targetのカテゴリアフィニティ機能に対する予約されたuser.categoryId パラメーターには、user.が先頭に付けられます。

targetPageParams()を使用したat.jsの例:

targetPageParams = function() {
  return {
    "profile.gender": "male",
    "user.categoryId": "clothing"
  };
};

sendEvent コマンドを使用したPlatform Web SDKの例:

JavaScript
code language-javascript
alloy("sendEvent", {
  "data": {
    "__adobe": {
      "target": {
        "profile.gender": "male",
        "user.categoryId": "clothing"
      }
    }
  }
});
タグ

タグで、まずデータ要素を作成してdata.__adobe.target オブジェクトを定義します。

​ データ要素でのデータオブジェクトの定義 {modal="regular"}

そして、データオブジェクトを送信イベント ​ ​ アクション ​に含めます(複数の​ オブジェクト ​は結合できます)。

送信イベントにデータオブジェクトを含める {modal="regular"}

エンティティのパラメーター

エンティティパラメーターは、Target Recommendationsの行動データと追加カタログ情報を渡すために使用されます。 at.jsでサポートされているすべての​ エンティティパラメーターは、Platform Web SDKでもサポートされています。 プロファイルパラメーターと同様に、すべてのエンティティパラメーターは、Platform Web SDK sendEvent コマンドペイロードのdata.__adobe.target オブジェクトに渡す必要があります。

適切なデータキャプチャを行うには、特定の項目のエンティティパラメーターの先頭にentity.を付ける必要があります。 レコメンデーションアルゴリズム用に予約されているcartIdsおよびexcludedIds パラメーターにはプレフィックスを付けず、それぞれの値にはエンティティ IDのコンマ区切りリストを含める必要があります。

targetPageParams()を使用したat.jsの例:

targetPageParams = function() {
  return {
    "entity.id": "SKU-00001-LARGE",
    "entity.categoryId": "clothing,shirts",
    "entity.customEntity": "some value",
    "cartIds": "SKU-00002,SKU-00003",
    "excludedIds": "SKU-00001-SMALL"
  };
};

sendEvent コマンドを使用したPlatform Web SDKの例:

JavaScript
code language-javascript
alloy("sendEvent", {
  "data": {
    "__adobe": {
      "target": {
        "entity.id": "SKU-00001-LARGE",
        "entity.categoryId": "clothing,shirts",
        "entity.customEntity": "some value",
        "cartIds": "SKU-00002,SKU-00003",
        "excludedIds": "SKU-00001-SMALL"
      }
    }
  }
});
タグ

タグで、まずデータ要素を作成してdata.__adobe.target オブジェクトを定義します。

​ データ要素でのデータオブジェクトの定義 {modal="regular"}

そして、データオブジェクトを送信イベント ​ ​ アクション ​に含めます(複数の​ オブジェクト ​は結合できます)。

送信イベントにデータオブジェクトを含める {modal="regular"}

NOTE
commerce フィールドグループが使用され、productListItems配列がXDM ペイロードに含まれている場合、この配列内の最初のSKU値は、製品ビューを増分する目的でentity.idにマッピングされます。

購入パラメーター

購入パラメーターは、注文が成功した後に注文確認ページで渡され、ターゲットのコンバージョンと最適化の目標に使用されます。 Platform Web SDKの実装では、これらのパラメーターとパラメーターは、commerce フィールドグループの一部として渡されたXDM データから自動的にマッピングされます。

targetPageParams()を使用したat.jsの例:

targetPageParams = function() {
  return {
    "orderId": "ABC123",
    "productPurchasedId": "SKU-00002,SKU-00003"
    "orderTotal": 1337.89
  };
};

commerce フィールドグループのpurchases.valueが1に設定されている場合、購入情報がTargetに渡されます。 注文IDと注文合計は、order オブジェクトから自動的にマッピングされます。 productListItems配列が存在する場合、SKU値がproductPurchasedIdに使用されます。

sendEventを使用したPlatform Web SDKの例:

JavaScript
code language-javascript
alloy("sendEvent", {
  "xdm": {
    "commerce": {
      "order": {
        "purchaseID": "ABC123",
        "priceTotal": 1337.89
      },
      "purchases": {
        "value": 1
      }
    },
    "productListItems": [{
      "SKU": "SKU-00002"
    }, {
      "SKU": "SKU-00003"
    }],
      "_experience": {
          "decisioning": {
              "propositions": [{
                  "scope": "<your_mbox>"
              }],
              "propositionEventType": {
                  "display": 1
              }
          }
      }
  }
});
タグ

タグでは、まずXDM オブジェクト ​ データ要素を使用して、必須のXDM フィールド(JavaScriptの例を参照)とオプションのカスタムスコープにマッピングします。

XDM オブジェクトデータ要素のXDM フィールドへのマッピング ​ {modal="regular"}

次に、XDM オブジェクト ​を送信イベント ​ ​ アクション ​に含めます(複数のXDM オブジェクト ​は結合できます)。

送信イベントにXDM オブジェクトデータ要素を含める {modal="regular"}

IMPORTANT
呼び出しを使用してターゲット指標を増分するには、_experience.decisioning.propositionEventTypeをdisplay: 1に設定する必要があります。
NOTE
Target指標の定義でカスタムの場所/mbox名(例:orderConfirmPage)を使用する場合は、上記の例のように、_experience.decisioning.propositions配列にカスタムスコープを入力します。
NOTE
productPurchasedId値は、data オブジェクトの下のエンティティ IDのコンマ区切りリストとして渡すこともできます。

顧客Id (mbox3rdPartyId)

Adobe Targetでは、単一の顧客IDを使用して、デバイスやシステムをまたいでプロファイルを同期できます。 at.jsでは、これはTarget リクエストのmbox3rdPartyIdとして設定することも、Experience Cloud ID サービスに送信される最初の顧客IDとして設定することもできます。 at.jsとは異なり、Platform Web SDKの実装では、複数の場合にmbox3rdPartyIdとして使用する顧客IDを指定できます。 例えば、ビジネスがグローバル顧客IDを持ち、事業部門ごとに個別の顧客IDを使用している場合、どのIDをTargetで使用するかを設定できます。

クロスデバイスと顧客属性のユースケースに対してID同期を設定するには、いくつかの手順があります。

  1. データ収集またはプラットフォームの​ ID ​画面で、顧客IDの​ ID名前空間 ​を作成します
  2. 顧客属性の​ エイリアス ​が、名前空間の​ ID シンボル ​と一致していることを確認してください
  3. データストリームのターゲット設定で​ ID シンボル ​を​ ターゲットサードパーティ ID名前空間 ​として指定します
  4. identityMap フィールドグループを使用してsendEvent コマンドを実行します

targetPageParams()を使用したat.jsの例:

targetPageParams = function() {
  return {
    "mbox3rdPartyId": "TT8675309"
  };
};

sendEvent コマンドを使用したPlatform Web SDKの例:

JavaScript
code language-javascript
alloy("sendEvent", {
  "xdm": {
    "identityMap": {
      "GLOBAL_CUSTOMER_ID": [{
        "id": "TT8675309",
        "authenticatedState": "authenticated",
        "primary": true
      }]
    }
  }
});
タグ

ID値、認証状態および名前空間は、ID マップ ​ データ要素でキャプチャされます。
顧客IDをキャプチャするID マップ データ要素 {modal="regular"}

次に、ID マップ ​ データ要素を使用して、XDM オブジェクト ​ データ要素のidentityMap フィールドを設定します。
XDM オブジェクトデータ要素で使用されるID マップデータ要素 {modal="regular"}

次に、XDM オブジェクト ​は、ルールの​ イベントを送信 アクションに含まれます。

送信イベントにXDM オブジェクトデータ要素を含める {modal="regular"}

データストリームのAdobe Target サービスで、必ずTarget サードパーティ ID名前空間をID マップ ​ データ要素で使用されているのと同じ名前空間に設定してください。
​ データストリームでターゲット サードパーティ ID名前空間を設定 {modal="regular"}

NOTE
Adobeでは、認証済みIDなど、個人を表す名前空間をプライマリ IDとして送信することをお勧めします。

Platform Web SDKの例

様々なTarget パラメーターがPlatform Web SDKを使用してマッピングされる方法を理解したところで、次に示すように、2つのサンプルページをat.jsからPlatform Web SDKに移行できます。 サンプルページには、次の内容が含まれます。

  • 非同期ライブラリ実装の事前非表示スニペットをターゲットにする
  • Platform Web SDKのベースコード
  • Platform Web SDK JavaScript ライブラリ
  • ライブラリを初期化するconfigure コマンド
  • データを送信し、レンダリングするTarget コンテンツを要求するsendEvent コマンド
Web SDKの商品詳細ページ:
code language-html
<!doctype html>
<html>
<head>
  <title>Product Details - Men's Shirt</title>

  <!--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 and send event-->
  <script>
    alloy("configure", {
      "edgeConfigId": "ebebf826-a01f-4458-8cec-ef61de241c93",
      "orgId":"ADB3LETTERSANDNUMBERS@AdobeOrg"
    });
    alloy("sendEvent", {
      "renderDecisions": true,
      "xdm": {
        "identityMap": {
          "GLOBAL_CUSTOMER_ID": [{
            "id": "TT8675309",
            "authenticatedState": "authenticated",
            "primary": true
          }]
        },
        "web": {
          "webPageDetails": {
            // Other attributes included according to XDM schema
            "pageName": "product detail"
          }
        }
      },
      "data": {
        "__adobe": {
          "target": {
            "profile.gender": "male",
            "user.categoryId": "clothing",
            "entity.id": "SKU-00001-LARGE",
            "entity.categoryId": "clothing,shirts",
            "entity.customEntity": "some value",
            "cartIds": "SKU-00002,SKU-00003",
            "excludedIds": "SKU-00001-SMALL"
          }
        }
      }
    });
  </script>
</head>
<body>
  <h1 id="title">Men's Large Shirt</h1>
  <p>SKU: SKU-00001-LARGE</p>
</body>
</html>
注文確認ページのWeb SDK:
code language-html
<!doctype html>
<html>
<head>
  <title>Order Confirmation</title>

  <!--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 and send event-->
  <script>
    alloy("configure", {
      "edgeConfigId": "ebebf826-a01f-4458-8cec-ef61de241c93",
      "orgId":"ADB3LETTERSANDNUMBERS@AdobeOrg"
    });
    alloy("sendEvent", {
      "xdm": {
        "identityMap": {
          "GLOBAL_CUSTOMER_ID": [{
            "id": "TT8675309",
            "authenticatedState": "authenticated",
            "primary": true
          }]
        },
        "commerce": {
          "order": {
            "purchaseID": "ABC123",
            "priceTotal": 1337.89
          },
          "purchases": {
            "value": 1
          }
        },
        "productListItems": [{
          "SKU": "SKU-00002"
        }, {
          "SKU": "SKU-00003"
        }],
        "_experience": {
            "decisioning": {
                "propositions": [{
                    "scope": "<your_mbox>"
                }],
                "propositionEventType": {
                    "display": 1
                }
            }
        }
      }
    });
  </script>
</head>
<body>
  <h1 id="title">Order Confirmation</h1>
  <p>Thank you for your order</p>
</body>
</html>

次に、Platform Web SDKを使用してTarget コンバージョンイベント 🔗を追跡する方法について説明します。

NOTE
at.jsからWeb SDKへのTargetの移行を成功させるためのサポートを提供します。 移行で障害が発生した場合、またはこのガイドに重要な情報が欠けていると感じた場合は、このコミュニティのディスカッション ​に投稿してお知らせください。
recommendation-more-help
platform-learn-help-tutorial-migrate-target-websdk