Experience Platform Web SDKのA4T データのクライアント側ログ
Adobe Experience Platform Web SDKを使用すると、Web アプリケーションのクライアント側でAdobe Analytics for Target （A4T） データを収集できます。
クライアントサイドのログとは、クライアントサイドで関連するTarget データが返されることを意味します。これにより、データを収集してAnalyticsと共有できます。 このオプションは、Data Insertion APIを使用してAnalyticsにデータを手動で送信する場合に有効にする必要があります。
このドキュメントでは、Platform Web SDKのクライアントサイド A4T ログを設定する手順について説明し、一般的なユースケースの実装例を示します。
前提条件 prerequisites
このチュートリアルでは、パーソナライゼーションの目的でPlatform Web SDKを使用することに関連する基本的な概念とプロセスについて理解していることを前提としています。 概要が必要な場合は、次のドキュメントを参照してください。
Analytics クライアントサイドのログを設定 set-up-client-side-logging
次のサブセクションでは、Platform Web SDK実装に対してAnalytics クライアントサイドのログ記録を有効にする方法について説明します。
Analytics クライアント側ログを有効にする enable-analytics-client-side-logging
実装でAnalyticsのクライアントサイドのログ記録が有効になっていることを考慮するには、 データストリーム でAdobe Analytics設定を無効にする必要があります。
SDKからA4T データを取得し、Analyticsに送信します a4t-to-analytics
このレポート方法を正しく機能させるには、Analytics ヒットでsendEvent コマンドから取得したA4T関連データを送信する必要があります。
Target Edgeが提案レスポンスを計算すると、Analytics クライアントサイドのログが有効になっているかどうかを確認します（例えば、Analyticsがデータストリームで無効になっている場合）。 クライアント側のログ記録が有効になっている場合、システムは応答の各提案にAnalytics トークンを追加します。
フローは次のようになります。
次に、Analytics クライアントサイドのログが有効になっている場合のinteract応答の例を示します。 提案がAnalytics件のレポートを持つアクティビティ用の場合、scopeDetails.characteristics.analyticsToken個のプロパティがあります。
{
"requestId": "1234",
"handle": [
{
"payload": [
{
"id": "AT:eyJhY3Rpdml0eUlkIjoiNDM0Njg5IiwiZXhwZXJpZW5jZUlkIjoiMCJ9",
"scope": "a4t-test",
"scopeDetails": {
"decisionProvider": "TGT",
"activity": {
"id": "434689"
},
"experience": {
"id": "0"
},
"strategies": [
{
"algorithmID": "0",
"trafficType": "0"
}
],
"characteristics": {
"eventToken": "2lTS5KA6gj4JuSjOdhqUhGqipfsIHvVzTQxHolz2IpTMromRrB5ztP5VMxjHbs7c6qPG9UF4rvQTJZniWgqbOw==",
"analyticsToken": "434689:0:0|2,434689:0:0|1"
}
},
"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": "a4t-test",
"scopeDetails": {
"decisionProvider": "TGT",
"activity": {
"id": "434689"
},
"characteristics": {
"eventToken": "E0gb6q1+WyFW3FMbbQJmrg==",
"analyticsToken": "434689:0:0|32767"
}
},
"items": [
{
"id": "434689",
"schema": "https://ns.adobe.com/personalization/measurement",
"data": {
"type": "click",
"format": "application/vnd.adobe.target.metric"
}
}
]
}
],
"type": "personalization:decisions",
"eventIndex": 0
}
]
}
Form-based Experience Composer アクティビティの提案には、同じ提案の下にコンテンツとクリック指標の両方の項目を含めることができます。 したがって、scopeDetails.characteristics.analyticsToken プロパティにコンテンツ表示用の分析トークンを1つ持つ代わりに、対応して、scopeDetails.characteristics.analyticsDisplayTokenおよびscopeDetails.characteristics.analyticsClickToken プロパティで表示トークンとクリック分析トークンの両方を指定できます。
{
"requestId": "1234",
"handle": [
{
"payload": [
{
"id": "AT:eyJhY3Rpdml0eUlkIjoiNDM0Njg5IiwiZXhwZXJpZW5jZUlkIjoiMCJ9",
"scope": "a4t-test",
"scopeDetails": {
"decisionProvider": "TGT",
"activity": {
"id": "434689"
},
"experience": {
"id": "0"
},
"strategies": [
{
"algorithmID": "0",
"trafficType": "0"
}
],
"characteristics": {
"displayToken": "2lTS5KA6gj4JuSjOdhqUhGqipfsIHvVzTQxHolz2IpTMromRrB5ztP5VMxjHbs7c6qPG9UF4rvQTJZniWgqbOw==",
"clickToken": "E0gb6q1+WyFW3FMbbQJmrg==",
"analyticsDisplayToken": "434689:0:0|2,434689:0:0|1",
"analyticsClickToken": "434689:0:0|32767"
}
},
"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": "434689",
"schema": "https://ns.adobe.com/personalization/measurement",
"data": {
"type": "click",
"format": "application/vnd.adobe.target.metric"
}
}
]
}
],
"type": "personalization:decisions",
"eventIndex": 0
}
]
}
scopeDetails.characteristics.analyticsTokenからのすべての値、およびscopeDetails.characteristics.analyticsDisplayToken （表示されたコンテンツの場合）とscopeDetails.characteristics.analyticsClickToken （クリック指標の場合）は、収集し、Data Insertion API呼び出しにtnta タグとして含める必要があるA4T ペイロードです。
analyticsToken、analyticsDisplayToken、analyticsClickToken プロパティには、複数のトークンを含めることができ、1つのコンマ区切り文字列として連結できます。| code language-javascript |
|---|
|
実装例 implementation-examples
次のサブセクションでは、一般的なユースケースに対してAnalytics クライアントサイドのログを実装する方法を示します。
Form-Based Experience Composer件のアクティビティ form-based-composer
Platform Web SDKを使用して、Adobe Target フォームベースのExperience Composer アクティビティからの提案の実行を制御できます。
特定の決定範囲に対する提案をリクエストする場合、返される提案には適切なAnalytics トークンが含まれます。 ベストプラクティスは、Experience Platform Web SDK sendEvent コマンドをチェーンし、返された提案を繰り返し実行して、Analytics トークンを同時に収集しながら実行することです。
次のように、Form-Based Experience Composer アクティビティスコープのsendEvent コマンドをトリガーできます。
alloy("sendEvent", {
"decisionScopes": ["a4t-test"],
"xdm": {
"web": {
"webPageDetails": {
"name": "Home Page"
}
}
}
}
).then(function(results) {
for (var i = 0; i < results.propositions.length; i++) {
//Execute the propositions and collect the Analytics payload
}
});
ここから、提案を実行し、最終的にAnalyticsに送信されるペイロードを構築するためのコードを実装する必要があります。 次に、results.propositionsの例を示します。
[
{
"id": "AT:eyJhY3Rpdml0eUlkIjoiNDM0Njg5IiwiZXhwZXJpZW5jZUlkIjoiMCJ9",
"scope": "a4t-test",
"scopeDetails": {
"decisionProvider": "TGT",
"activity": {
"id": "434689"
},
"experience": {
"id": "0"
},
"strategies": [
{
"algorithmID": "0",
"trafficType": "0"
}
],
"characteristics": {
"eventToken": "2lTS5KA6gj4JuSjOdhqUhGqipfsIHvVzTQxHolz2IpTMromRrB5ztP5VMxjHbs7c6qPG9UF4rvQTJZniWgqbOw==",
"analyticsToken": "434689:0:0|2,434689:0:0|1"
}
},
"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": "a4t-test",
"scopeDetails": {
"decisionProvider": "TGT",
"activity": {
"id": "434689"
},
"characteristics": {
"eventToken": "E0gb6q1+WyFW3FMbbQJmrg==",
"analyticsToken": "434689:0:0|32767"
}
},
"items": [
{
"id": "434689",
"schema": "https://ns.adobe.com/personalization/measurement",
"data": {
"type": "click",
"format": "application/vnd.adobe.target.metric"
}
}
]
},
{
"id": "AT:eyJhY3Rpdml0eUlkIjoiNDM0Njg5IiwiZXhwZXJpZW5jZUlkIjoiMCJ9",
"scope": "a4t-test",
"scopeDetails": {
"decisionProvider": "TGT",
"activity": {
"id": "434688"
},
"experience": {
"id": "0"
},
"strategies": [
{
"algorithmID": "0",
"trafficType": "0"
}
],
"characteristics": {
"displayToken": "91TS5KA6gj4JuSjOdhqUhGqipfsIHvVzTQxHolz2IpTMromRrB5ztP5VMxjHbs7c6qPG9UF4rvQTJZniWgqgEt==",
"clickToken": "Tagb6q1+WyFW3FMbbQJrtg==",
"analyticsDisplayTokens": "434688:0:0|2,434688:0:0|1",
"analyticsClickTokens": "434688:0:0|32767"
}
}
},
"items": [
{
"id": "1184845",
"schema": "https://ns.adobe.com/personalization/html-content-item",
"meta": {
"geo.state": "bucuresti",
"activity.id": "434688",
"experience.id": "0",
"activity.name": "a4t test form based activity 1",
"offer.id": "1184845"
},
"data": {
"id": "1184845",
"format": "text/html",
"content": "<div> analytics impressions 1</div>"
}
},
{
"id": "434688",
"schema": "https://ns.adobe.com/personalization/measurement",
"data": {
"type": "click",
"format": "application/vnd.adobe.target.metric"
}
}
]
}
]
コンテンツ項目を含む提案からAnalytics トークンを抽出するには、次のような関数を実装できます。
function getDisplayAnalyticsPayload(proposition) {
if (!proposition || !proposition.scopeDetails || !proposition.scopeDetails.characteristics) {
return;
}
var characteristics = proposition.scopeDetails.characteristics;
if (characteristics.analyticsDisplayToken) {
return characteristics.analyticsDisplayToken;
}
return characteristics.analyticsToken;
}
提案には、対象となるアイテムのschema プロパティで示すように、様々なタイプのアイテムを含めることができます。 Form-Based Experience Composer アクティビティでサポートされている提案項目スキーマは4つあります。
var HTML_SCHEMA = "https://ns.adobe.com/personalization/html-content-item";
var MEASUREMENT_SCHEMA = "https://ns.adobe.com/personalization/measurement";
var JSON_SCHEMA = "https://ns.adobe.com/personalization/json-content-item";
var REDIRECT_SCHEMA = "https://ns.adobe.com/personalization/redirect-item";
HTML_SCHEMAとJSON_SCHEMAはオファーのタイプを反映するスキーマですが、MEASUREMENT_SCHEMAはDOM要素に添付する必要がある指標を反映しています。
訪問者が以前に表示されたコンテンツを実際にクリックした時点で、クリック指標のAnalytics ペイロードを収集し、コンテンツ項目とは別にAnalyticsに送信する必要があります。
この場合、クリック指標A4T ペイロードを取得するための次のヘルパー関数が便利です。
function getClickAnalyticsPayload(proposition) {
if (!proposition || !proposition.scopeDetails || !proposition.scopeDetails.characteristics) {
return;
}
var characteristics = proposition.scopeDetails.characteristics;
if (characteristics.analyticsClickToken) {
return characteristics.analyticsClickToken;
}
return characteristics.analyticsToken;
}
実装の概要 implementation-summary
要約すると、Experience Platform Web SDKでForm-Based Experience Composer アクティビティを適用する場合は、次の手順を実行する必要があります。
-
Form-Based Experience Composer アクティビティオファーを取得するイベントを送信します。
-
コンテンツの変更をページに適用します。
-
decisioning.propositionDisplay通知イベントを送信します。 -
SDK レスポンスからAnalytics表示トークンを収集し、Analytics ヒットのペイロードを構築します。
-
Data Insertion APIを使用してペイロードをAnalyticsに送信します。
-
配信された提案にクリック指標がある場合は、クリックが実行されたときに
decisioning.propositionInteract通知イベントが送信されるように、クリックリスナーを設定する必要があります。onBeforeEventSendハンドラーは、decisioning.propositionInteractイベントをインターセプトする際に、次のアクションが発生するように設定する必要があります。xdm._experience.decisioning.propositionsからクリックトークン Analyticsを収集しています- 収集したAnalytics ペイロードを含むクリック Analytics ヒットをData Insertion API経由で送信します。
alloy("sendEvent", {
"decisionScopes": ["a4t-test"],
"xdm": {
"web": {
"webPageDetails": {
"name": "Home Page"
}
}
}
}
).then(function(results) {
var analyticsPayload = new Set();
results.propositions.forEach(function (proposition) {
proposition.items.forEach(function (item) {
if (item.schema === HTML_SCHEMA) {
// 1. Apply offer
// 2. Collect executed propositions and send the decisioning.propositionDisplay notification event
// 3. Collect the display Analytics tokens
}
if (item.schema === MEASUREMENT_SCHEMA) {
// Setup click listener, so that when clicked:
// 1. Collect clicked propositions and send the decisioning.propositionInteract notification event
// Note: onBeforeEventSend handler should be configured, so that when intercepting decisioning.propositionInteract events:
// 1. Collect the click Analytics tokens from xdm._experience.decisioning.propositions
// 2. Send the click Analytics hit with the collected Analytics payload via Data Insertion API
}
});
});
// Send the page view Analytics hit with the collected display Analytics payload via Data Insertion API
});
Visual Experience Composer （VEC） アクティビティ visual-experience-composer-acitivties
Platform Web SDKを使用すると、Visual Experience Composer （VEC） を使用して作成されたオファーを処理できます。
自動レンダリングが有効になっている場合は、ページで実行された提案からAnalytics トークンを収集できます。 ベストプラクティスは、Experience Platform Web SDK sendEvent コマンドをチェーンし、返された提案を繰り返し実行して、Web SDKがレンダリングしようとしているものをフィルタリングすることです。
例
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 = propositions[i];
var renderAttempted = proposition.renderAttempted;
if (renderAttempted === true) {
var analyticsPayload = getDisplayAnalyticsPayload(proposition);
if (analyticsPayload !== undefined) {
analyticsPayloads.add(analyticsPayload);
}
}
}
var analyticsPayloadsToken = concatenateAnalyticsPayloads(analyticsPayloads);
// Send the page view Analytics hit with collected Analytics payload via Data Insertion API
});
onBeforeEventSendを使用したページ指標の処理 using-onbeforeeventsend
Adobe Target アクティビティを使用すると、ページ上に異なる指標を設定できます。これは、手動でDOMに添付するか、自動的にDOMに添付されます（VECが作成したアクティビティ）。 どちらのタイプも、web ページ上の遅延したエンドユーザーインタラクションです。
これを考慮するため、ベストプラクティスは、onBeforeEventSend Adobe Experience Platform Web SDK フックを使用してAnalytics ペイロードを収集することです。 onBeforeEventSend フックは、configure コマンドを使用して設定する必要があり、データストリームを介して送信されるすべてのイベントに反映されます。
次に、onBeforeEventSentをトリガーAnalytics ヒットに設定する方法の例を示します。
alloy("configure", {
datastreamId: "datastream configuration ID",
orgId: "adobe ORG ID",
onBeforeEventSend: function(options) {
const xdm = options.xdm;
const eventType = xdm.eventType;
if (eventType === "decisioning.propositionInteract") {
const analyticsPayloads = new Set();
const propositions = xdm._experience.decisioning.propositions;
for (var i = 0; i < propositions.length; i++) {
var proposition = propositions[i];
analyticsPayloads.add(getClickAnalyticsPayload(proposition));
}
// Trigger the Analytics hit
}
}
});
次のステップ next-steps
このガイドでは、Platform Web SDKのA4T データのクライアント側のログ記録について説明しました。 Edge NetworkでのA4T データの処理方法について詳しくは、 サーバーサイドのログ記録に関するガイドを参照してください。