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": id,
"scope": scope,
"scopeDetails": scopeDetails
}],
"propositionEventType": {
"display": 1
}
}
}
}
});
}
});
例 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 の使用
応答トークンは、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
オブジェクトを上書きすることで有効にできます。
その後、データは次のようにフローします。
Web SDK の使用
Web SDK は、次の項目もサポートしています。
- Analytics クライアントサイドログ
- Analytics サーバーサイドログ
Analytics クライアントサイドログ
Analytics クライアントサイドログは、その DataStream 設定に対してAdobe 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 サーバーサイドログ
その DataStream 設定に対して Analytics が有効になっている場合、Analytics サーバーサイドログは有効になります。
サーバーサイド分析ログが有効になっている場合、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 をセットアップする際に必要な手順を確認できます。
- データストリーム設定ページで Target サードパーティ ID を含む名前空間を設定します。
- 次のように、sendEvent コマンドごとに、その ID 名前空間を送信します。
alloy("sendEvent", {
"renderDecisions": true,
"xdm": {
"identityMap": {
"TGT3PID": [
{
"id": "1234",
"primary": true
}
]
}
}
});
プロパティトークンの設定方法
at.js の使用
at.js の使用プロパティトークンの設定方法は、targetPageParams
と targetPageParamsAll
の 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名前空間の下でデータストリーム設定を設定する際に、より高いレベルでプロパティを設定できます。
つまり、その特定のデータストリーム設定に対するすべての 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 を使用する場合、複数のデバッグ機能があります。
- Assurance の使用
- Web SDK デバッグ有効
- Web SDK モニタリングフックの使用
- Adobe Experience Platform Debuggerを使用
- ターゲット トレース