Adobe Experience Platform Web SDK を使用すると、 Adobe Analytics for Target(A4T) web アプリケーションのクライアント側のデータ。
クライアント側のログは、 Target データがクライアント側で返され、データを収集して Analytics と共有できます。 を使用して Analytics に手動でデータを送信する場合は、このオプションを有効にする必要があります Data Insertion API.
を使用してこれを実行するメソッド AppMeasurement.js は現在開発中で、近い将来に提供される予定です。
このドキュメントでは、Web SDK 用のクライアント側 A4T ログを設定する手順を説明し、一般的な使用例の実装例をいくつか示します。
このチュートリアルでは、パーソナライゼーションのための Web SDK の使用に関する基本的な概念とプロセスに精通していることを前提としています。 紹介が必要な場合は、次のドキュメントを確認してください。
以下のサブセクションでは、Web SDK 実装で Analytics のクライアント側ログを有効にする方法について説明します。
お使いの実装で Analytics クライアント側ログを有効にしたと見なすには、 datastream.
このレポート方法が正しく機能するには、 A4T から取得した関連データ sendEvent
」コマンドを使用して、Analytics ヒットに追加されました。
Target Edge が提案応答を計算する際に、Analytics クライアント側のログが有効かどうか(つまり、データストリームで Analytics が無効な場合)を確認します。 クライアント側ログが有効な場合、応答の各提案に Analytics トークンが追加されます。
フローは次のようになります。
次に例を示します。 interact
Analytics クライアント側ログが有効な場合の応答。 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
}
]
}
フォームベースの Experience Composer アクティビティの提案には、同じ提案の下に、コンテンツとクリック指標項目の両方を含めることができます。 したがって、コンテンツの分析トークンを単一でで表示する代わりに、 scopeDetails.characteristics.analyticsToken
プロパティの代わりに、 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
(クリック指標の場合)は、収集され、 tnta
タグを Data Insertion API を呼び出します。
The analyticsToken
, analyticsDisplayToken
, analyticsClickToken
プロパティには、複数のトークンを含めることができます。複数のトークンは、コンマで区切られた 1 つの文字列として連結されます。
次の節で示す実装例では、複数の Analytics トークンが反復的に収集されています。 Analytics トークンの配列を連結するには、次のような関数を使用します。
var concatenateAnalyticsPayloads = function concatenateAnalyticsPayloads(analyticsPayloads) {
if (analyticsPayloads.size > 1) {
return [].concat(analyticsPayloads).join(',');
}
return [].concat(analyticsPayloads).join();
};
以下のサブセクションでは、一般的な使用例に対して Analytics のクライアント側ログを実装する方法を示します。
Web SDK を使用して、提案の実行を Adobe Target Form-Based Experience Composer アクティビティ。
特定の決定範囲の提案をリクエストする場合、返される提案には適切な Analytics トークンが含まれます。 ベストプラクティスは、Platform Web SDK を連携させることです sendEvent
コマンドを実行し、返された提案を繰り返し処理して、Analytics トークンを同時に収集しながら実行します。
次のトリガーを設定できます。 sendEvent
コマンドを使用して、次のようなフォームベースの Experience Composer アクティビティ範囲を設定できます。
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
対象の項目のプロパティ。 フォームベースの 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;
}
要約すると、フォームベースの Experience Composer アクティビティを Platform Web SDK で適用する際には、次の手順を実行する必要があります。
decisioning.propositionDisplay
通知イベント;decisioning.propositionInteract
通知イベント。 The onBeforeEventSend
ハンドラーは、傍受時に decisioning.propositionInteract
イベント、次のアクションが発生します。
xdm._experience.decisioning.propositions
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
});
Web SDK を使用すると、 Visual Experience Composer(VEC).
この使用例を実装する手順は、 フォームベースの Experience Composer アクティビティ. 詳しくは、前の節を参照してください。
自動レンダリングが有効な場合、ページ上で実行された提案から Analytics トークンを収集できます。 ベストプラクティスは、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
ページ指標を処理するにはAdobe Targetアクティビティを使用すると、DOM に手動で関連付けるか、DOM に自動的に関連付ける(VEC が作成したアクティビティ)など、ページ上で様々な指標を設定できます。 どちらのタイプも、Web ページでのエンドユーザーの操作が遅延します。
これを考慮するためのベストプラクティスは、 onBeforeEventSend
Adobe Experience Platform Web SDK フック。 The onBeforeEventSend
フックは、 configure
コマンドに含まれ、データストリームを介して送信されるすべてのイベントに反映されます。
次に例を示します onBeforeEventSent
は、Analytics のヒットをトリガーするように設定できます。
alloy("configure", {
edgeConfigId: "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
}
}
});
このガイドでは、Web SDK の A4T データのクライアント側ログについて説明しました。 次のガイドを参照してください: サーバー側ログ を参照してください。