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
を選択すると、ライブラリは Target Edge への呼び出しを次のようにトリガーします execute -> pageLoad
. すべての設定がデフォルト値に設定されている場合、カスタムコーディングは必要ありません。at.js がページに追加され、ブラウザーによって読み込まれると、Target Edge 呼び出しが実行されます。
Web SDK の使用
Adobe Targetの内で作成されたコンテンツ Visual 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 の使用
実行 sendEvent
~の下に特殊範囲を持つ命令 decisionScopes
: __view__
. このスコープをシグナルとして使用し、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 の使用
フォームベースの Composer アクティビティを取得するには、 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 の使用
フォームベースの Composer ベースのアクティビティを取得するには、を使用します sendEvent
コマンドを実行し、の下に mbox 名を渡す decisionScopes
オプション。 この 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 の使用
Target アクティビティを適用するには、次を使用します applyPropositions
コマンド。
例:
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 フィールドグループは、オブジェクトの配列です。 各オブジェクトのプロパティは、 result.propositions
が返されます。 sendEvent
コマンド: { id, scope, scopeDetails }
例 1 - トラック a 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 - トラック a 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
データオブジェクト。
//replicates an at.js trackEvent call
alloy("sendEvent", {
"type": "decisioning.propositionDisplay",
"xdm": {
"_experience": {
"decisioning": {
"propositions": [{
"scope": "sumbitButtonClick" // Or any mbox/location name you want to use in Adobe Target
}]
}
}
}
});
シングルページアプリケーションでビューの変更をトリガーする方法
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 の使用
シングルページアプリケーションのビューの変更をトリガーまたは通知するには、 web.webPageDetails.viewName
以下のプロパティ: xdm
オプション sendEvent
コマンド。 のオファーがある場合、Web SDK はビューのキャッシュをチェックします。 viewName
で指定 sendEvent
これらのアクションを実行し、表示通知イベントを送信します。
例
alloy("sendEvent", {
renderDecisions: true,
xdm:{
web:{
webPageDetails:{
viewName: "homeView"
}
}
}
});
レスポンストークンの活用方法
Adobe Targetから返されるパーソナライゼーションコンテンツには、次が含まれます レスポンストークンアクティビティ、オファー、エクスペリエンス、ユーザープロファイル、地域情報などに関する詳細です。 これらの詳細は、サードパーティのツールと共有したり、デバッグに使用したりできます。 レスポンストークンは、Adobe Target ユーザーインターフェイスで設定できます。
at.js の使用
at.js カスタムイベントを使用して Target 応答をリッスンし、応答トークンを読み取ります。
例
document.addEventListener(adobe.target.event.REQUEST_SUCCEEDED, function(e) {
console.log("Request succeeded", e.detail);
});
Web SDK の使用
応答トークンは、 propositions
の結果で公開される sendEvent
コマンド。 各提案には、の配列が含まれます items
各アイテムにはが含まれます。 meta
target 管理 UI で有効になっている場合は、応答トークンが入力されたオブジェクト。 詳細情報
例
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 を使用すると、次のように設定してちらつきを管理できます。 bodyHidingEnabled: true
そのため、DOM の変更を取得して適用する前に、パーソナライズされたコンテナを事前に非表示にする処理は at.js が行います。
パーソナライズされたコンテンツを含むページセクションは、at.js を上書きすることで事前非表示にすることができます bodyHiddenStyle
.
デフォルト bodyHiddenStyle
HTML全体を非表示 body
.
どちらの設定も、を使用して上書きできます。 window.targetGlobalSettings
. window.targetGlobalSettings
は、at.js を読み込む前に配置してください。
Web SDK の使用
顧客は、Web SDK を使用して、次の例に示すように、configure コマンドで事前非表示スタイルを設定できます。
alloy("configure", {
edgeConfigId: "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 クライアントサイドログは、次の設定を行うことで有効にできます analyticsLogging: client_side
at.js 設定または上書きによる 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"
}
}
}]
}
}
Analytics ペイロード (tnta
トークン)を使用して、Analytics ヒットに含める必要があります データ挿入 API.
Analytics サーバーサイドログ
Analytics サーバーサイドログは、次の設定を行うことで有効にできます analyticsLogging: server_side
at.js 設定または上書きによる window.targetglobalSettings
オブジェクト。
その後、データは次のようにフローします。
Web SDK の使用
Web SDK は、次の項目もサポートしています。
- Analytics クライアントサイドログ
- Analytics サーバーサイドログ
Analytics クライアントサイドログ
Analytics クライアントサイドログは、その DataStream 設定に対してAdobe Analyticsが無効になっている場合に有効になります。
顧客が Analytics トークン(tnta
を使用して Analytics と共有する必要がある) データ挿入 API
を鎖でつないだ 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 サーバーサイドログ
その DataStream 設定に対して Analytics が有効になっている場合、Analytics サーバーサイドログは有効になります。
サーバーサイド分析ログが有効な場合、Analytics レポートで正しいインプレッション数が示され、コンバージョンがEdge Networkレベルで共有されるように、Analytics と共有する必要がある A4T ペイロードを設定します。これにより、お客様は他の処理を行う必要がなくなります。
サーバーサイド分析ログが有効な場合のシステムへのデータのフローは次のとおりです。
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
コマンドおよび設定 data.__adobe.target
プロパティ、使用するキー名のプレフィックス profile
.
例
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
コマンドおよび設定 data.__adobe.target
プロパティ、使用するキー名のプレフィックス entity
.
例
alloy("sendEvent", {
renderDecisions: true,
data: {
__adobe: {
target: {
"entity.name": "T-shirt",
"entity.id": "1234"
}
}
}
});
サードパーティ ID の使用方法
at.js の使用
at.js を使用する場合、複数の送信方法があります mbox3rdPartyId
、使用 getOffer
または getOffers
:
例 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);
または、を設定する方法があります mbox3rdPartyId
次のいずれか: targetPageParams
または targetPageParamsAll
.
で設定する場合 targetPageParams
。次のリクエストで送信されます target-global-mbox
別名 pag-lLoad
.
推奨は、を使用して設定する必要があります。 targetPageParamsAll
すべての target リクエストで送信されるからです。
使用する利点 targetPageParamsAll
は、 mbox3rdPartyId
を 1 回ページに送信すると、すべての target リクエストが適切に処理されます。 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 をセットアップする際に必要な手順を確認できます。
- データストリーム設定ページで Target サードパーティ ID を含む名前空間を設定します。
- 次のように、sendEvent コマンドごとに、その ID 名前空間を送信します。
alloy("sendEvent", {
"renderDecisions": true,
"xdm": {
"identityMap": {
"TGT3PID": [
{
"id": "1234",
"primary": true
}
]
}
}
});
プロパティトークンの設定方法
at.js の使用
at.js の使用プロパティトークンを設定するには、次のいずれかを使用します targetPageParams
または targetPageParamsAll
. 使用 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名前空間の下でデータストリーム設定を設定する際に、より高いレベルでプロパティを設定できます。
つまり、その特定のデータストリーム設定に対するすべての 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);
メモ:以下の条件を満たすことを確認することを強くお勧めします mbox
が含まれる mboxes
配列には独自のインデックスがあります。 通常、最初の mbox は以下を持ちます。 index=0
、次の 1 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 を使用する場合、複数のデバッグ機能があります。
- 使用 Assurance
- Web SDK デバッグ有効
- 使用方法 Web SDK 監視フック
- 使用方法 Adobe Experience Platform Debugger
- ターゲット トレース