at.js ライブラリと Web SDK の比較

概要

この記事では、at.js ライブラリと Experience Platform Web SDK の違いの概要を説明します。

ライブラリのインストール

at.js のインストール

お客様は、Adobe Experience Cloudの「実装」タブから直接ライブラリをダウンロードできます。 at.js ライブラリは、顧客が持つ設定(clientCode、imsOrgId など)によってカスタマイズされます。

Web SDK のインストール

事前ビルドバージョンは CDN で使用できます。 CDN のライブラリをページで直接参照するか、ダウンロードして独自のインフラストラクチャにホストすることができます。 縮小形式と非縮小形式で利用できます。 デバッグの目的では、非縮小バージョンが役立ちます。

詳しくは JavaScript ライブラリを使用した Web SDK のインストールを参照してください。

ライブラリの設定

at.js の設定

すべての at.js ファイルの末尾には、設定オブジェクトをインスタンス化して渡すセクションがあります。 カスタマイズ可能で、ダウンロード時に、そのセクションに現在の顧客設定を入力します。

window.adobe.target.init(window, document, {
  "clientCode": "demo",
  "imsOrgId": "",
  "serverDomain": "localhost:5000",
  "timeout": 2000,
  "globalMboxName": "target-global-mbox",
  "version": "2.0.0",
  "defaultContentHiddenStyle": "visibility: hidden;",
  "defaultContentVisibleStyle": "visibility: visible;",
  "bodyHiddenStyle": "body {opacity: 0 !important}",
  "bodyHidingEnabled": true,
  "deviceIdLifetime": 63244800000,
  "sessionIdLifetime": 1860000,
  "selectorsPollingTimeout": 5000,
  "visitorApiTimeout": 2000,
  "overrideMboxEdgeServer": false,
  "overrideMboxEdgeServerTimeout": 1860000,
  "optoutEnabled": false,
  "optinEnabled": false,
  "secureOnly": false,
  "supplementalDataIdParamTimeout": 30,
  "authoringScriptUrl": "//cdn.tt.omtrdc.net/cdn/target-vec.js",
  "urlSizeLimit": 2048,
  "endpoint": "/rest/v1/delivery",
  "pageLoadEnabled": true,
  "viewsEnabled": true,
  "analyticsLogging": "server_side",
  "serverState": {},
  "decisioningMethod": "server-side",
  "legacyBrowserSupport":  false
});

詳細情報

Web SDK の設定

SDK の設定は、configure コマンドで行います。 configure コマンドは 常に 最初に呼び出されます。

ページ読み込み Target オファーをリクエストし自動的にレンダリングする方法

at.js の使用

at.js 2.x を使用している場合は、pageLoadEnabled 設定を有効にすると、ライブラリは execute -> pageLoad を使用して Target Edgeへの呼び出しをトリガーします。 すべての設定がデフォルト値に設定されている場合、カスタムコーディングは必要ありません。at.js がページに追加され、ブラウザーによって読み込まれると、Target Edge呼び出しが実行されます。

Web SDK の使用

Adobe TargetVisual Experience Composer 内で作成されたコンテンツは、SDK によって自動的に取得およびレンダリングできます。

Target オファーをリクエストして自動的にレンダリングするには、sendEvent コマンドを使用し、renderDecisions オプションを true に設定します。 これにより、自動レンダリングの対象となる、パーソナライズされたコンテンツが SDK によって自動的にレンダリングされます。

例:

alloy("sendEvent", {
  "renderDecisions": true,
  "xdm": {
    "commerce": {
      "order": {
        "purchaseID": "a8g784hjq1mnp3",
        "purchaseOrderNumber": "VAU3123",
        "currencyCode": "USD",
        "priceTotal": 999.98
      }
    }
  }
});

Experience PlatformWeb SDK は、WEB SDK が実行したオファーを含む通知を自動的に送信します。通知リクエストペイロードの例を次に示します。

{
  "events": [{
      "xdm": {
        "_experience": {
          "decisioning": {
            "propositions": [
              {
                "id": "AT:eyJhY3Rpdml0eUlkIjoiMTI3MDE5IiwiZXhwZXJpZW5jZUlkIjoiMCJ9",
                "scope": "cart",
                "scopeDetails": {
                  "decisionProvider": "TGT",
                  "activity": {
                    "id": "127019"
                  },
                  "experience": {
                    "id": "0"
                  },
                  "strategies": [
                    {
                      "step": "entry",
                      "algorithmID": "0",
                      "trafficType": "0"
                    },
                    {
                      "step": "display",
                      "algorithmID": "0",
                      "trafficType": "0"
                    }
                  ],
                  "characteristics": {
                    "eventToken": "bKMxJ8dCR1XlPfDCx+2vSGqipfsIHvVzTQxHolz2IpSCnQ9Y9OaLL2gsdrWQTvE54PwSz67rmXWmSnkXpSSS2Q=="
                  }
                }
              }
            ]
          }
        },
        "eventType": "display",
        "web": {
          "webPageDetails": {
            "viewName": "cart",
            "URL": "https://alloyio.com/personalizationSpa/cart"
          },
          "webReferrer": {
            "URL": ""
          }
        },
        "device": {
          "screenHeight": 800,
          "screenWidth": 1280,
          "screenOrientation": "landscape"
        },
        "environment": {
          "type": "browser",
          "browserDetails": {
            "viewportWidth": 1280,
            "viewportHeight": 284
          }
        },
        "placeContext": {
          "localTime": "2021-12-10T15:50:34.467+02:00",
          "localTimezoneOffset": -120
        },
        "timestamp": "2021-12-10T13:50:34.467Z",
        "implementationDetails": {
          "name": "https://ns.adobe.com/experience/alloy",
          "version": "2.6.2",
          "environment": "browser"
        }
      }
    }
  ]
}

詳細情報

ページ読み込み Target オファーをリクエストし、自動的にレンダリングしない方法

at.js の使用

ページ読み込み用にオファーを取得する Target Edgeを呼び出す方法は 2 つあります。

例 1:

adobe.target.getOffer({
   mbox: "target-global-mbox",
   success: console.log,
   error: console.error
});

例 2:

adobe.target.getOffers({
    request: {
      execute: {
        pageLoad: {}
    }
  }
})
.then(console.log)
.catch(console.error);

詳細情報

Web SDK の使用

decisionScopes: __view__ の下で、特別なスコープを持つ sendEvent コマンドを実行します。 このスコープをシグナルとして使用し、Target からすべてのページ読み込みアクティビティを取得し、すべてのビューをプリフェッチします。 また、Web SDK は、すべての VEC 表示ベースのアクティビティの評価も試みます。 ビューのプリフェッチの無効化は、現在 Web SDK ではサポートされていません。

パーソナライゼーションコンテンツにアクセスするには、コールバック関数を指定します。この関数は、SDK がサーバーから正常に応答を受信した後に呼び出されます。 コールバックには、返されたパーソナライゼーションコンテンツを含む propositions プロパティを含めることができる結果オブジェクトが提供されます。

例:

alloy("sendEvent", {
    xdm: {...},
    decisionScopes: ["__view__"]
  }).then(function(result) {
    if (result.propositions) {
      result.propositions.forEach(proposition => {
        proposition.items.forEach(item => {
          if (item.schema === HTML_SCHEMA) {
            // manually apply offer
            document.getElementById("form-based-offer-container").innerHTML =
              item.data.content;
            const executedPropositions = [
              {
                id: proposition.id,
                scope: proposition.scope,
                scopeDetails: proposition.scopeDetails
              }
            ];
          // manually send the display notification event, so that Target/Analytics impressions aare increased
            alloy("sendEvent",{
              "xdm": {
                "eventType": "decisioning.propositionDisplay",
                "_experience": {
                  "decisioning": {
                    "propositions": executedPropositions
                  }
                }
              }
            });
          }
        });
      });
    }
  });

詳細情報

特定のフォームベースのターゲット mbox のリクエスト方法

at.js の使用

getOffer の関数を使用して、フォームベースのコンポーザーのアクティビティを取得できます。

例 1:

adobe.target.getOffer({
   mbox: "hero-banner",
   success: console.log,
   error: console.error
});

例 2:

adobe.target.getOffers({
    request: {
      execute: {
        mboxes: [
        {
          index: 0,
          name: "hero-banner"
        }]
    }
  }
})
.then(console.log)
.catch(console.error);

詳細情報

Web SDK の使用

Form Based Composer ベースのアクティビティを取得するには、sendEvent コマンドを使用して、decisionScopes オプションで mbox 名を渡します。 sendEvent コマンドは、リクエストされたアクティビティ/提案を含むオブジェクトで解決される promise を返します。
propositions 配列は次のようになります。

[
  {
    "id": "AT:eyJhY3Rpdml0eUlkIjoiNDM0Njg5IiwiZXhwZXJpZW5jZUlkIjoiMCJ9",
    "scope": "hero-banner",
    "scopeDetails": {
      "decisionProvider": "TGT",
      "activity": {
        "id": "434689"
      },
      "experience": {
        "id": "0"
      },
      "strategies": [
        {
          "algorithmID": "0",
          "trafficType": "0"
        }
      ],
      "characteristics": {
        "eventToken": "2lTS5KA6gj4JuSjOdhqUhGqipfsIHvVzTQxHolz2IpTMromRrB5ztP5VMxjHbs7c6qPG9UF4rvQTJZniWgqbOw=="
      }
    },
    "items": [
      {
        "id": "1184844",
        "schema": "https://ns.adobe.com/personalization/html-content-item",
        "meta": {
          "geo.state": "bucuresti",
          "activity.id": "434689",
          "experience.id": "0",
          "activity.name": "a4t test form based activity",
          "offer.id": "1184844",
          "profile.tntId": "04608610399599289452943468926942466370-pybgfJ"
        },
        "data": {
          "id": "1184844",
          "format": "text/html",
          "content": "<div> analytics impressions </div>"
        }
      }
    ]
  },
  {
    "id": "AT:eyJhY3Rpdml0eUlkIjoiNDM0Njg5IiwiZXhwZXJpZW5jZUlkIjoiMCJ9",
    "scope": "hero-banner",
    "scopeDetails": {
      "decisionProvider": "TGT",
      "activity": {
        "id": "434689"
      },
      "characteristics": {
        "eventToken": "E0gb6q1+WyFW3FMbbQJmrg=="
      }
    },
    "items": [
      {
        "id": "434689",
        "schema": "https://ns.adobe.com/personalization/measurement",
        "data": {
          "type": "click",
          "format": "application/vnd.adobe.target.metric"
        }
      }
    ]
  }
]

例:

alloy("sendEvent", {
  xdm: { ...},
  decisionScopes: ["hero-banner"]
}).then(function (result) {
  var propositions = result.propositions;

  if (propositions) {
    // Find the discount proposition, if it exists.
    for (var i = 0; i < propositions.length; i++) {
      var proposition = propositions[i];
      for (var j = 0; j < proposition.items; j++) {
        var item = proposition.items[j];
        if (item.schema === HTML_SCHEMA) {
          // apply offer
          document.getElementById("form-based-offer-container").innerHTML =
            item.data.content;
          const executedPropositions = [
            {
              id: proposition.id,
              scope: proposition.scope,
              scopeDetails: proposition.scopeDetails
            }
          ];

          alloy("sendEvent", {
            "xdm": {
              "eventType": "decisioning.propositionDisplay",
              "_experience": {
                "decisioning": {
                  "propositions": executedPropositions
                }
              }
            }
          });
        }
      }
    }
  }
});

詳細情報

Target アクティビティの適用方法

at.js の使用

Target アクティビティを適用するには、applyOffers の関数を使用します。adobe.target.applyOffer(options)

例:

adobe.target.getOffers({...})
  .then(response => adobe.target.applyOffers({ response: response }))
  .then(() => console.log("Success"))
  .catch(error => console.log("Error", error));

applyOffers コマンドについて詳しくは、 専用ドキュメントを参照してください。

Web SDK の使用

applyPropositions コマンドを使用して、Target アクティビティを適用できます。

例:

alloy("applyPropositions", {
    propositions: [...]
});

applyPropositions コマンドについて詳しくは、 専用ドキュメントを参照してください。

イベントの追跡方法

at.js の使用

trackEvent 関数を使用するか、sendNotifications を使用すると、イベントを追跡できます。

この関数は、クリック数やコンバージョン数などのユーザーアクションをレポートするリクエストを実行します。 応答内のアクティビティは配信されません。

例 1

adobe.target.trackEvent({
    "type": "click",
    "mbox": "some-mbox"
});

例 2

adobe.target.sendNotifications({
    request: {
       notifications: [{
          ...,
          mbox: {
            name: "some-mbox"
          },
          type: "click",
          ...
       }]
    }
});

詳細情報

Web SDK の使用

sendEvent コマンドを呼び出し、_experience.decisioning.propositions XDM フィールドグループに入力し、eventType を 2 つの値のいずれかに設定することで、イベントおよびユーザーアクションを追跡できます。

  • decisioning.propositionDisplay: Target アクティビティのレンダリングをシグナルで通知します。
  • decisioning.propositionInteract:マウスクリックなど、アクティビティに対するユーザーのインタラクションを示します。

_experience.decisioning.propositions XDM フィールドグループはオブジェクトの配列です。 各オブジェクトのプロパティは、sendEvent のコマンドで返される result.propositions から派生します。{ id, scope, scopeDetails }

例 1 - アクティビティのレンダリング後に decisioning.propositionDisplay イベントを追跡

alloy("sendEvent", {
  xdm: {},
  decisionScopes: ['discount']
}).then(function(result) {
  var propositions = result.propositions;

  var discountProposition;
  if (propositions) {
    // Find the discount proposition, if it exists.
    for (var i = 0; i < propositions.length; i++) {
      var proposition = propositions[i];
      if (proposition.scope === "discount") {
        discountProposition = proposition;
        break;
      }
    }
  }

  if (discountProposition) {
    // Find the item from proposition that should be rendered.
    // Rather than assuming there a single item that has HTML
    // content, find the first item whose schema indicates
    // it contains HTML content.
    for (var j = 0; j < discountProposition.items.length; j++) {
      var discountPropositionItem = discountProposition.items[i];
      if (discountPropositionItem.schema === "https://ns.adobe.com/personalization/html-content-item") {
        var discountHtml = discountPropositionItem.data.content;
        // Render the content
        var dailySpecialElement = document.getElementById("daily-special");
        dailySpecialElement.innerHTML = discountHtml;

        // For this example, we assume there is only a single place to update in the HTML.
        break;
      }
    }
      // Send a "decisioning.propositionDisplay" event signaling that the proposition has been rendered.
    alloy("sendEvent", {
      xdm: {
        eventType: "decisioning.propositionDisplay",
        _experience: {
          decisioning: {
            propositions: [
              {
                id: discountProposition.id,
                scope: discountProposition.scope,
                scopeDetails: discountProposition.scopeDetails
              }
            ]
          }
        }
      }
    });
  }
});

例 2 - クリック指標が発生した後の decisioning.propositionInteract イベントの追跡

alloy("sendEvent", {
  xdm: { ...},
  decisionScopes: ["hero-banner"]
}).then(function (result) {
  var propositions = result.propositions;

  if (propositions) {
    // Find the discount proposition, if it exists.
    for (var i = 0; i < propositions.length; i++) {
      var proposition = propositions[i];
      for (var j = 0; j < proposition.items.length; j++) {
        var item = proposition.items[j];

        if (item.schema === "https://ns.adobe.com/personalization/measurement") {
          // add metric to the DOM element
          const button = document.getElementById("form-based-click-metric");

          button.addEventListener("click", event => {
            const executedPropositions = [
              {
                id: proposition.id,
                scope: proposition.scope,
                scopeDetails: proposition.scopeDetails
              }
            ];
            // send the click track event
            alloy("sendEvent", {
              "xdm": {
                "eventType": "decisioning.propositionInteract",
                "_experience": {
                  "decisioning": {
                    "propositions": executedPropositions
                  }
                }
              }
            });
          });
        }
      }
    }
  }
});

詳細情報

例 3 - アクションを実行した後に発生したイベントの追跡

この例では、ボタンのクリックなど、特定のアクションの実行後に発生したイベントを追跡します。
__adobe.target データオブジェクトを介して、追加のカスタムパラメーターを追加できます。

commerce XDM オブジェクトを追加することもできます。

alloy("sendEvent", {
    "xdm": {
        "_experience": {
            "decisioning": {
                "propositions": [
                    {
                        "scope": "orderConfirm" //example scope name
                    }
                ],
                "propositionEventType": {
                    "display": 1
                }
            }
        },
        "eventType": "decisioning.propositionDisplay"
    },
    "commerce": {
        "order": {
            "purchaseID": "a8g784hjq1mnp3",
            "purchaseOrderNumber": "VAU3123",
            "currencyCode": "USD",
            "priceTotal": 999.98
        }
    },
    "data": {
        "__adobe": {
            "target": {
                "pageType": "Order Confirmation",
                "user.categoryId": "Insurance"
            }
        }
    }
})

シングルページアプリケーションでビューの変更をトリガーする方法

at.js の使用

adobe.target.triggerView 関数を使用します。 この関数は、新しいページが読み込まれるときや、ページ上のコンポーネントが再レンダリングされるときに呼び出すことができます。 adobe.target.triggerView ()は、Visual Experience Composer (VEC)を使用して A/B テストとエクスペリエンスのターゲット設定(XT)アクティビティを作成するために、シングルページアプリケーション(SPA)用に実装する必要があります。 adobe.target.triggerView ()がサイトに実装されていない場合、VEC はSPAに使用できません。

adobe.target.triggerView("homeView")

詳細情報

Web SDK の使用

シングルページアプリケーションのビューの変更をトリガーまたは通知するには、sendEvent コマンドの xdm オプションの下で web.webPageDetails.viewName プロパティを設定します。 指定した viewName ージに対するオファーがある場合、Web SDK はビューのキャッシュをチェック sendEvent、それらを実行して表示通知イベントを送信します。

alloy("sendEvent", {
  renderDecisions: true,
  xdm:{
    web:{
      webPageDetails:{
        viewName: "homeView"
      }
    }
  }
});

詳細情報

レスポンストークンの活用方法

Adobe Targetから返されるPersonalization コンテンツには、アクティビティ、オファー、エクスペリエンス、ユーザープロファイル、地域情報などに関する詳細である レスポンストークンが含まれます。 これらの詳細は、サードパーティのツールと共有したり、デバッグに使用したりできます。 レスポンストークンは、Adobe Target ユーザーインターフェイスで設定できます。

at.js の使用

at.js カスタムイベントを使用して Target 応答をリッスンし、応答トークンを読み取ります。

document.addEventListener(adobe.target.event.REQUEST_SUCCEEDED, function(e) {
  console.log("Request succeeded", e.detail);
});

詳細情報

Web SDK の使用

IMPORTANT
Platform Web SDK バージョン 2.6.0 以降を使用していることを確認します。

応答トークンは、sendEvent コマンドの結果で公開される propositions の一部として返されます。 各提案には items の配列が含まれ、Target 管理 UI で有効になっている場合、各項目には応答トークンが入力された meta オブジェクトがあります。 詳細情報

alloy("sendEvent", {
    renderDecisions: true,
    xdm: {}
  }).then(function(result) {
    if (result.propositions) {
      // Format of result.propositions:
      /*
        [
            {
                "id": "",
                "scope": "",
                "items": [
                    {
                        "id": "",
                        "schema": "",
                        "data": {},
                        "meta": { // RESPONSE TOKENS
                            "activity.name": ...,
                            "offer.id": ...,
                            "profile.activeActivities": ...
                        }
                    }
                ],
                "scopeDetails": {}
                "renderAttempted": false
            }
        ]
      */
    }
  });

詳細情報

フリッカーの管理方法

at.js の使用

at.js を使用すると、at.js が処理するように bodyHidingEnabled: true を設定することで、ちらつきを管理できます
dom の変更を取得して適用する前に、パーソナライズされたコンテナを事前に非表示にします。
パーソナライズされたコンテンツを含むページセクションは、at.js bodyHiddenStyle を上書きすることで、事前に非表示にすることができます。
デフォルトでは、bodyHiddenStyle はHTMLbody ード全体を非表示にします。
どちらの設定も、window.targetGlobalSettings を使用して上書きできます。 at.js を読み込む前に window.targetGlobalSettings を配置してください。

Web SDK の使用

顧客は、Web SDK を使用して、次の例に示すように、configure コマンドで事前非表示スタイルを設定できます。

alloy("configure", {
  datastreamId: "configurationId",
  orgId: "orgId@AdobeOrg",
  debugEnabled: true,
  prehidingStyle: "body { opacity: 0 !important }"
});

Web SDK の非同期を読み込む場合、Web SDK が挿入される前に、次のスニペットをページに挿入することをお勧めします。

<script>
  !function(e,a,n,t){
  if (a) return;
  var i=e.head;if(i){
  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("adobe_authoring_enabled") !== -1, "body { opacity: 0 !important }", 3000);
</script>

A4T の処理方法

at.js の使用

at.js を使用してサポートされている A4T ログには、次の 2 種類があります。

  • Analytics クライアントサイドログ
  • Analytics サーバーサイドログ

Analytics クライアントサイドログ

例 1:Target のグローバル設定の使用

Analytics のクライアントサイドログは、at.js 設定で analyticsLogging: client_side を設定するか、window.targetglobalSettings オブジェクトを上書きすることで有効にできます。
このオプションを設定すると、返されるペイロードの形式は次のようになります。

{
  "analytics": {
    "payload": {
      "pe": "tnt",
      "tnta": "167169:0:0|0|100,167169:0:0|2|100,167169:0:0|1|100"
    }
  }
}

その後、ペイロードは Data Insertion API を介して Analytics に転送できます。

例 2:すべての getOffers 関数で設定する

adobe.target.getOffers({
      request: {
        experienceCloud: {
          analytics: {
            logging: "client_side"
          }
        },
        prefetch: {
          mboxes: [{
            index: 0,
            name: "a1-serverside-xt"
          }]
        }
      }
    })
    .then(console.log)

応答ペイロードは次のようになります。

{
  "prefetch": {
    "mboxes": [{
      "index": 0,
      "name": "a1-serverside-xt",
      "options": [{
        "content": "<img src=\"http://s7d2.scene7.com/is/image/TargetAdobeTargetMobile/L4242-xt-usa?tm=1490025518668&fit=constrain&hei=491&wid=980&fmt=png-alpha\"/>",
        "type": "html",
        "eventToken": "n/K05qdH0MxsiyH4gX05/2qipfsIHvVzTQxHolz2IpSCnQ9Y9OaLL2gsdrWQTvE54PwSz67rmXWmSnkXpSSS2Q==",
        "responseTokens": {
          "profile.memberlevel": "0",
          "geo.city": "bucharest",
          "activity.id": "167169",
          "experience.name": "USA Experience",
          "geo.country": "romania"
        }
      }],
      "analytics": {
        "payload": {
          "pe": "tnt",
          "tnta": "167169:0:0|0|100,167169:0:0|2|100,167169:0:0|1|100"
        }
      }
    }]
  }
}

Data Insertion API を使用して、Analytics ペイロード(tnta トークン)を Analytics ヒットに含める必要があります。

Analytics サーバーサイドログ

Analytics サーバーサイドログは、at.js 設定で analyticsLogging: server_side を設定するか、window.targetglobalSettings オブジェクトを上書きすることで有効にできます。
その後、データは次のようにフローします。

Analytics サーバーサイドログのワークフローを示す図

詳細情報

Web SDK の使用

Web SDK は、次の項目もサポートしています。

  • Analytics クライアントサイドログ
  • Analytics サーバーサイドログ

Analytics クライアントサイドログ

Analytics クライアントサイドログは、その DataStream 設定に対してAdobe Analyticsが無効になっている場合に有効になります。

Analytics クライアントサイドログのワークフローを示す図

顧客は、Data Insertion API を使用して Analytics と共有する必要がある Analytics トークン(tnta)にアクセスできます
sendEvent コマンドを連結してで、結果として得られる提案配列を繰り返し処理します。

alloy("sendEvent", {
    "renderDecisions": true,
    "xdm": {
      "web": {
        "webPageDetails": {
          "name": "Home Page"
        }
      }
    }
  }
).then(function (results) {
  var analyticsPayloads = new Set();
  for (var i = 0; i < results.propositions.length; i++) {
    var proposition = results.propositions[i];
    var renderAttempted = proposition.renderAttempted;

    if (renderAttempted === true) {
      var analyticsPayload = getAnalyticsPayload(proposition);
      if (analyticsPayload !== undefined) {
        analyticsPayloads.add(analyticsPayload);
      }
    }
  }
  var analyticsPayloadsToken = concatenateAnalyticsPayloads(analyticsPayloads);
  // send the page view Analytics hit with collected Analytics payload using Data Insertion API
});

次の図は、Analytics クライアントサイドが有効な場合のデータフローを示しています。

Analytics クライアントサイドログのデータフロー図

Analytics サーバーサイドログ

その DataStream 設定に対して Analytics が有効になっている場合、Analytics サーバーサイドログは有効になります。

Analytics 設定を示すデータストリーム UI。

サーバーサイド分析ログが有効になっている場合、Analytics レポートが表示されるように、Analytics と共有する必要がある A4T ペイロード
正しいインプレッション数とコンバージョン数はEdge Networkレベルで共有されるので、お客様は追加の処理を行う必要はありません。

サーバーサイド分析ログが有効な場合のシステムへのデータのフローは次のとおりです。

サーバーサイド分析ログのデータフローを示す図

Target のグローバル設定方法

at.js の使用

Target Standard/Premium UI や REST API を使用して設定を行う代わりに、window.targetGlobalSettings を使用して at.js ライブラリで設定を上書きできます。

上書きは、at.js が読み込まれる前か、管理/実装/at.js 設定を編集/コード設定/ライブラリヘッダーで定義する必要があります。

例:

window.targetGlobalSettings = {
   timeout: 200, // using custom timeout
   visitorApiTimeout: 500, // using custom API timeout
   enabled: document.location.href.indexOf('https://www.adobe.com') >= 0 // enabled ONLY on adobe.com
};

詳細情報

Web SDK の使用

この機能は Web SDK ではサポートされていません。

Target プロファイル属性の更新方法

at.js の使用

例 1

adobe.target.getOffer({
   mbox: "target-global-mbox",
   params: {
     "profile.name": "test",
     "profile.gender": "female"
   },
   success: console.log,
   error: console.error
});

例 2

adobe.target.getOffers({
    request: {
      execute: {
        pageLoad: {
          profileParameters: {
            name: "test",
            gender: "female"
          }
        }
    }
  }
})
.then(console.log)
.catch(console.error);

Web SDK の使用

Target プロファイルを更新するには、sendEvent コマンドを使用して、profile を使用してキー名のプレフィックスとして data.__adobe.target プロパティを設定します。

alloy("sendEvent", {
  renderDecisions: true,
  data: {
    __adobe: {
      target: {
        "profile.gender": "female",
        "profile.age": 30
      }
    }
  }
});

Target Recommendationsの使用方法

at.js の使用

例 1

adobe.target.getOffer({
   mbox: "target-global-mbox",
   params: {
     "entity.name": "T-shirt",
     "entity.id": "1234"
   },
   success: console.log,
   error: console.error
});

例 2

adobe.target.getOffers({
    request: {
      execute: {
        pageLoad: {
          parameters: {
            "entity.name": "T-shirt",
            "entity.id": "1234"
          }
        }
    }
  }
})
.then(console.log)
.catch(console.error);

詳細情報

Web SDK の使用

推奨データを送信するには、sendEvent コマンドを使用して、entity を使用してキー名のプレフィックスとして data.__adobe.target プロパティを設定します。

alloy("sendEvent", {
  renderDecisions: true,
  data: {
    __adobe: {
      target: {
        "entity.name": "T-shirt",
        "entity.id": "1234"
      }
    }
  }
});

サードパーティ ID の使用方法

at.js の使用

at.js の使用 getOffer または getOffers を使用して mbox3rdPartyId を送信する方法は複数あります。

例 1

adobe.target.getOffer({
  mbox:"test",
  params:{
    "mbox3rdPartyId": "1234"
  },
  success: console.log,
  error: console.error
});

例 2

adobe.target.getOffers({
    request: {
      id:{
        thirdPartyId: "1234"
      },
      execute: {
        pageLoad: {}
    }
  }
})
.then(console.log)
.catch(console.error);

または、targetPageParams または targetPageParamsAll のいずれかで mbox3rdPartyId を設定する方法があります。
targetPageParams で設定すると、pag-lLoad とも呼ばれる target-global-mbox のリクエストで送信されます。
推奨は、すべてのターゲットリクエストで送信されるので、targetPageParamsAll を使用して設定する必要があります。
targetPageParamsAll を使用する利点は、ページ上で mbox3rdPartyId を 1 回定義できることで、すべてのターゲットリクエストが適切な mbox3rdPartyId を持つようになります。

window.targetPageParamsAll = function() {
      return {
        "mbox3rdPartyId": "1234"
      };
    };
window.targetPageParams = function() {
  return {
    "mbox3rdPartyId": "1234"
  };
};

詳細情報

Web SDK の使用

Web SDK は、Target サードパーティ ID をサポートしています。 ただし、もう 2、3 の手順が必要です。 ソリューションの詳細に入る前に、identityMap について少し説明します。
顧客は ID マップを使用して複数の ID を送信できます。 すべての ID に名前空間が設定されています。 各名前空間には、1 つ以上の ID を設定できます。 特定の ID をプライマリとしてマークできます。
この知識を念頭に置くと、Target サードパーティ ID を使用するために web sdk をセットアップする際に必要な手順を確認できます。

  1. データストリーム設定ページで Target サードパーティ ID を含む名前空間を設定します。

「ターゲットサードパーティ ID 名前空間」フィールドを示すデータストリーム UI

  1. 次のように、sendEvent コマンドごとに、その ID 名前空間を送信します。
alloy("sendEvent", {
  "renderDecisions": true,
  "xdm": {
    "identityMap": {
      "TGT3PID": [
        {
          "id": "1234",
          "primary": true
        }
      ]
    }
  }
});

プロパティトークンの設定方法

at.js の使用

at.js の使用プロパティトークンの設定方法は、targetPageParamstargetPageParamsAll の 2 とおりあります。 targetPageParams を使用すると、プロパティトークンが target-global-mbox 呼び出しに追加されますが、targetPageParamsAll を使用すると、トークンがすべての target 呼び出しに追加されます。

例 1

   window.targetPageParamsAll = function() {
      return {
        "at_property": "1234"
      };
    };

例 2

window.targetPageParams = function() {
      return {
        "at_property": "1234"
      };
    };

Web SDK の使用

Web SDK を使用すると、お客様は、Adobe Target名前空間の下でデータストリーム設定を設定する際に、より高いレベルでプロパティを設定できます。
Adobe Target設定を示すデータストリーム UI。
つまり、その特定のデータストリーム設定に対するすべての Target 呼び出しに、そのプロパティトークンが含まれます。

mbox をプリフェッチする方法

at.js の使用

この機能は at.js 2.x でのみ使用できます。at.js 2.x には、getOffers という名前の新しい関数があります。 getOffers を使用すると、顧客は 1 つ以上の mbox のコンテンツをプリフェッチできます。 次に例を示します。

adobe.target.getOffers({
    request: {
      prefetch: {
        mboxes: [{
          index: 0,
          name: "test-mbox",
          parameters: {
            ...
          },
          profileParameters: {
            ...
          }
        }]
    }
  }
})
.then(console.log)
.catch(console.error);

メモ:mboxes 配列のすべての mbox に独自のインデックスを設定することを強くお勧めします。 通常、最初の mbox には index=0 があり、次の mbox には index=1 があります。

Web SDK の使用

この機能は、現在 Web SDK ではサポートされていません。

Target 実装のデバッグ方法

at.js の使用

At.js は、次のデバッグ機能を公開します。

  • mbox 無効化 – Target が取得とレンダリングを行うのを無効にし、Target のインタラクションなしにページが壊れているかどうかを確認します
  • mbox のデバッグ - at.js はすべてのアクションをログに記録します
  • Target Trace - Bullseye で生成された mbox トレーストークンを使用すると、決定プロセスに関与した詳細を含むトレースオブジェクトをオブジェクトの下で使用でき window.___target_trace す。

注意:これらのデバッグ機能はすべて、 Adobe Experience Platform Debuggerの拡張機能で利用できす。

Web SDK の使用

Web SDK を使用する場合、複数のデバッグ機能があります。

recommendation-more-help
ad108910-6329-42f1-aa1d-5920a2b13636