応答をリッスンし、応答トークンを読み取ります
Target 応答および応答トークンの読み取りをリッスンするために使用するプロセスは、実装が Platform Web SDK と at.js のどちらに含まれているかによって異なります。
Platform Web SDK Handle オブジェクトクラスを使用

メタデータオブジェクトとデータオブジェクトを持つ Handle オブジェクトクラスを使用して、Target 応答をリッスンし、応答トークンを読み取ります。
次のレスポンスの例では、Platform Web SDK のカスタム・イベント・ハンドラをHTML・ページに直接追加します(コードで使用するオブジェクトについて説明した表)。
オブジェクト | 情報 |
---|---|
タイプ - Personalization.decision | Target ーザーまたはOffer decisioningプロバイダーによって決定されたかどうか。 |
DecisionProvider - TGT | TGT-Target。 Target は、応答トークンのメタデータと値をページに提供します。 |
メタ | ページに渡されるメタデータ。 |
データ | ページに渡されるメタデータの値。 |
<html>
<head>
...
<script src="alloy.js"></script>
<script>
{
"requestId": "4d0a7cfd-952c-408c-b3b8-438edc38250a",
"handle": [{
"type": "personalization:decisions",
"payload": [{
"id": "....",
"scope": "__view__",
"scopeDetails": {
"decisionProvider": "TGT",
"activity": {
"id": "..."
},
"experience": {
"id": "...."
}
},
"items": [{
"id": "123",
"schema": "https://ns.adobe.com/personalization/dom-action",
"meta": {
"activity.id": "...",
"activity.name": "...",
"profile.foo": "...",
"profile.bar": "..."
},
"data": {
"id": "123",
"type": "setHtml",
"selector": "#foo",
"prehidingSelector": "#foo",
"content": "<div>Hello world</div>"
}
}]
}]
}]
}
});
</script>
</head>
<body>
...
</body>
</html>
カスタムイベントを使用した at.js

at.js カスタムイベントを使用して Target 応答をリッスンし、応答トークンを読み取ります。
以下のコードサンプルは、at.js カスタムイベントハンドラーを HTML ページに直接追加します。
<html>
<head>
....
<script src="at.js"></script>
<script>
document.addEventListener(adobe.target.event.REQUEST_SUCCEEDED, function(e) {
console.log("Request succeeded", e.detail);
});
</script>
<head>
<body>
...
</body>
</html>
応答トークンの FAQ
レスポンストークンを有効または無効にするには、どの役割が必要ですか?
レスポンストークンは、Target Administrator の役割を持つユーザーのみがアクティブ化または非アクティブ化できます。
Platform Web SDK 2.6.0 (またはそれ以前)を実行している場合はどうなりますか?
レスポンストークンへのアクセス権がありません。
at.js 1.0 (またはそれ以前)を実行しているとどうなりますか?
応答トークンは表示されますが、at.js では使用できません。
Target Classic プラグインとレスポンストークンの両方を同時にアクティブにできますか?
プラグインと応答トークンは並行して使用できますが、プラグインは今後非推奨となる予定です。
応答トークンは、すべての応答を通じて配信されるか、アクティビティを配信する Target 応答 Target みを通じて配信されますか?
応答トークンは、アクティビティを配信する Target 応答を通じてのみ配信されます。
Target Classic プラグインにはJavaScriptが含まれています。 レスポンストークンを使用してこの機能を複製するにはどうすればよいですか?
レスポンストークンに移行する場合、このタイプのJavaScriptは、コードベースまたはタグ管理ソリューションに保持する必要があります。 Platform Web SDK または at.js カスタムイベントを使用してこのコードをトリガーし、応答トークン値をJavaScript関数に渡すことができます。
プロファイル/顧客属性パラメーターがレスポンストークンのリストに表示されないのはなぜですか?
通常、Target はパラメーターを 15 分ごとに更新します。 この更新はユーザー・アクションに依存し、データはレスポンス・トークン・ページを表示した場合にのみ更新されます。 応答トークンリストにパラメーターが表示されない場合は、データ Target まだ更新されていません。
また、パラメーターに英数字以外の文字またはアンダースコア以外の記号が含まれる場合、そのパラメーターはリストに表示されません。 現時点では、サポートされるのは英数字とアンダースコアのみです。
削除されたプロファイルスクリプトやプロファイルパラメーターを使用している場合、応答トークンは引き続きコンテンツを配信しますか?
レスポンストークンはユーザープロファイルから情報を抽出し、その情報を配信します。プロファイルスクリプトまたはプロファイルパラメーターを削除しても、ユーザープロファイルから情報が削除されるわけではありません。ユーザープロファイルには、プロファイルスクリプトに対応するデータがまだ残っています。 応答トークンは引き続きコンテンツの配信を行います。 プロファイルにその情報が保存されていないユーザーの場合、または新規訪問者の場合、プロファイルにデータが存在しないので、そのトークンは配信されません。
Target は、トークンを自動的にオフにしません。 プロファイルスクリプトを削除し、このトークンの配信が不要になった場合は、手動でトークンを無効にする必要があります。
プロファイルスクリプトの名前を変更しましたが、そのスクリプトを使用しているトークンが変更前の名前のままで引き続き有効なのはなぜですか?
前述したように、レスポンストークンはユーザーの保存済みのプロファイル情報を基に機能します。プロファイルスクリプトの名前を変更しても、web サイトを訪問したユーザーのプロファイルには、古いプロファイルスクリプト値が保存されます。 トークンは、ユーザープロファイルに既に保存されている古い値を引き続き取得します。 新しい名前でコンテンツを配信したい場合は、以前のトークンを無効にし、新しいトークンを有効にする必要があります。
属性が変更された場合、いつリストから削除されますか?
Target は、一定の間隔で属性のリフレッシュを実行します。 切り替えられていない属性は、次回の更新時に削除されます。 ただし、切り替えられた属性が既に削除されている場合、そのスクリプトは、切り替えるまで属性リストから削除されません。 例えば、トークンとして使用されたプロファイルスクリプトを削除したとします。 Target は、切り替え済みの属性のみを、削除または名前変更の際にリストから削除します。
Google Analyticsへのデータの送信
次の節では、データをGoogle Analytics 4 に送信 Target る方法について説明します。 応答トークンから送信されたデータは、他のサードパーティ統合環境に送信することもできます。
Platform Web SDKを介したGoogle Analyticsへのデータの送信

Google Analyticsページに次のコードを追加すると、Platform Web SDK バージョン 2.6.0 (またはそれ以降)を介してHTMLを送信できます。
alloy("sendEvent"
オブジェクトの下にあることを確認します。<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
<script type="text/javascript">
alloy("sendEvent", {
})
.then(({ renderedPropositions, nonRenderedPropositions }) => {
// concatenate all the propositions
const propositions = [...renderedPropositions, ...nonRenderedPropositions];
// extractResponseTokens() extract the meta from item -> meta
const tokens = extractResponseTokens(propositions);
const activityNames = [];
const experienceNames = [];
const uniqueTokens = distinct(tokens);
uniqueTokens.forEach(token => {
activityNames.push(token["activity.name"]);
experienceNames.push(token["experience.name"]);
});
gtag('config', 'TAG_ID');
gtag('event', 'action_name', {'eventCategory': 'target',
'eventAction': experienceNames, 'eventLabel': activityNames
});
});
</script>
at.js を使用してGoogle Analyticsにデータを送信する

次のコードを HTML ページに追加することで、Google Analytics に at.js を介してデータを送信できます。
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
<script type="text/javascript">
document.addEventListener(adobe.target.event.REQUEST_SUCCEEDED, function(e) {
var tokens = e.detail.responseTokens;
if (isEmpty(tokens)) {
return;
}
var activityNames = [];
var experienceNames = [];
var uniqueTokens = distinct(tokens);
uniqueTokens.forEach(function(token) {
activityNames.push(token["activity.name"]);
experienceNames.push(token["experience.name"]);
});
gtag('config', 'TAG_ID');
gtag('event', 'action_name', {'eventCategory': 'target',
'eventAction': experienceNames, 'eventLabel': activityNames
});
});
function isEmpty(val) {
return (val === undefined || val == null || val.length <= 0) ? true : false;
}
function key(obj) {
return Object.keys(obj)
.map(function(k) { return k + "" + obj[k]; })
.join("");
}
function distinct(arr) {
var result = arr.reduce(function(acc, e) {
acc[key(e)] = e;
return acc;
}, {});
return Object.keys(result)
.map(function(k) { return result[k]; });
}
</script>
デバッグ
次の節では、応答トークンのデバッグについて説明します。
Google Analyticsとデバッグ

次のコードでは、Google Analyticsを使用したデバッグが可能です。
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
<script type="text/javascript">
document.addEventListener(adobe.target.event.REQUEST_SUCCEEDED, function(e) {
var tokens = e.detail.responseTokens;
if (isEmpty(tokens)) {
return;
}
var activityNames = [];
var experienceNames = [];
var uniqueTokens = distinct(tokens);
uniqueTokens.forEach(function(token) {
activityNames.push(token["activity.name"]);
experienceNames.push(token["experience.name"]);
});
gtag('config', 'TAG_ID');
gtag('event', 'action_name', {'eventCategory': 'target',
'eventAction': experienceNames, 'eventLabel': activityNames
});
});
function isEmpty(val) {
return (val === undefined || val == null || val.length <= 0) ? true : false;
}
function key(obj) {
return Object.keys(obj)
.map(function(k) { return k + "" + obj[k]; })
.join("");
}
function distinct(arr) {
var result = arr.reduce(function(acc, e) {
acc[key(e)] = e;
return acc;
}, {});
return Object.keys(result)
.map(function(k) { return result[k]; });
}
</script>
ttMeta プラグインと同等のものを使用したデバッグ
ttMeta プラグインと同様のデバッグ機能は、HTML ページに次のコードを追加することで作成できます。
<script type="text/javascript" >
document.addEventListener(adobe.target.event.REQUEST_SUCCEEDED, function (e) {
window.ttMETA= typeof(window.ttMETA)!="undefined" ? window.ttMETA : [];
var tokens=e.detail.responseTokens;
if (isEmpty(tokens)) {
return;
}
var uniqueTokens = distinct(tokens);
uniqueTokens.forEach(function(token) {
window.ttMETA.push({
'CampaignName': token["activity.name"],
'CampaignId' : token["activity.id"],
'RecipeName': token["experience.name"],
'RecipeId': token["experience.id"],
'OfferId': token["offer.id"],
'OfferName': token["offer.name"],
'MboxName': e.detail.mbox});
console.log(ttMETA);
});
});
function isEmpty(val){
return (val === undefined || val == null || val.length <= 0) ? true : false;
}
function key(obj) {
return Object.keys(obj)
.map(function(k) { return k + "" + obj[k]; })
.join("");
}
function distinct(arr) {
var result = arr.reduce(function(acc, e) {
acc[key(e)] = e;
return acc;
}, {});
return Object.keys(result)
.map(function(k) { return result[k]; });
}
</script>