Download PDF
Download page ページ ブラウザ スナップショットへのカスタムユーザデータの追加.
ページ ブラウザ スナップショットへのカスタムユーザデータの追加
Related pages：
アプリケーションに固有のユーザ情報をブラウザのスナップショットに追加できます。この情報はキーと値のペアとして表されます。これは JavaScript エージェント構成に付加され、その後で EUM サーバに送信されるビーコンに付加されます。
JavaScript エージェントは、ページタイプ（基本、Ajax、仮想）と使用されるメソッド（IIFE、関数ポインタ、リテラル）に応じて、ユーザデータを異なる方法で初期化します。JavaScript エージェントが各ページタイプとメソッドのユーザデータを初期化するタイミングについては、「カスタムユーザデータを設定するメソッド」を参照してください。
ページ内のユーザデータに対して許可される最大サイズは、2048 文字（CORS ビーコン）または 100 バイト（イメージビーコン）です。最大サイズには、キーと値のペア、括弧などの構文文字、引用符などが含まれます。
カスタムユーザデータの表示
カスタムユーザデータは、[Browser Analyze]、[Browser Snapshots]、および [Sessions] に表示されます。コントローラ UI でユーザデータを表示および使用する方法の詳細については、次のタブを参照してください。
この [Browser Analyze ] スクリーンショットでは、レコードをソートするために vehicleYear というユーザデータが使用されています。また、ユーザデータを表示するためのフィールドを選択することもできます。
この [Browser Snapshots] タブのスクリーンショットは、ユーザデータを使用して結果をフィルタリングする方法を示しています。
次のスクリーンショットは、[Session Details] ダイアログの [Session Summary] のユーザデータを表示しています。カスタムユーザデータを含む基本ページがセッションの最初のページである場合には、セッションにはカスタムユーザデータのみが含まれます。
カスタムユーザデータを設定するメソッド
各ページタイプ（基本、Ajax、仮想）のカスタムデータを設定するには、いくつかのメソッドを使用できます。各メソッドには、独自の構文、実行時間、およびユースケースがあります。次の表に、各メソッドとページタイプの実行時間とユースケースの例の概要を示します。
| 方式タイプ | ページタイプ | 実行時間 | ユースケースの例 |
|---|---|---|---|
| Immediately Invoked Function Expressions（IIFE） | 基本 | これらは、定義されるとすぐに実行される JavaScript 関数です。自己実行無名関数とも呼ばれています。 | 基本/仮想ページまたは Ajax リクエストが、異なるリソースからの情報に応じて変化する場合は、IIFE を使用してカスタムユーザデータの静的情報を設定できます。 たとえば、2 つの異なるサーバスクリプトが基本ページのコンテンツを生成する場合、クライアントの IIFE を使用して静的ユーザデータを設定できます。 |
| Ajax | |||
| 仮想 | |||
| 関数ポインタ | 基本 | JavaScript エージェントは、onload イベントがトリガーされたときに関数ポインタを実行します。 | cookie、ページ、およびメタデータから抽出されたデータ。 |
| Ajax | このイベントは、Ajax コールが発信されたときにトリガーされます。Ajax イベントのカスタムユーザデータは、AJAX リクエストに付加されます。 | URL、HTTP メソッド、リクエストペイロードなどの Ajax リクエストに関するメタデータ。 | |
| 仮想 | このイベントは、仮想ページが作成されたときにトリガーされます。仮想ページは、基本ページの動的に再作成されたバージョンであり、VPageView イベント用のカスタムユーザデータが仮想ページレコードに付加されます。 | 仮想ページの作成により、この情報がページのどこかで生成されるか、または検出される場合に使用。URL と DOM の変更に基づいて設定されたユーザ固有のフィールドまたはユーザデータ。 | |
| リテラル | 基本 | カスタムデータを設定するときは、リテラル値を使用するだけです。値は、IIFE と同様に、値が定義されるとすぐに設定されます。 | 定数。サーバで抽出され、設定される静的データ。 |
| Ajax | |||
| 仮想 |
ユーザデータ型
トリガーされるイベントコールバックごとに、さまざまなデータ型のキーと値のペアを含むオブジェクトを返すことによって、ユーザデータを追加できます。各ユーザデータ型は、特定のデータ型のプロパティを含むオブジェクトです。
データ型がキーと値のペアに正しく一致することを確認します。文字列データ型に日付のキーと値のペアを追加するなど、userData オブジェクト内で誤ったキーと値を送信すると、一般的なエラーが表示されます。
| データ タイプ | 説明 | 例 |
|---|---|---|
| このデータ型は、string 型の 1 つまたは複数のプロパティを設定するためのものです。値が数値に設定されている場合でも、文字列にする必要があります。 |
JS
|
| このデータ型は、long 型の 1 つまたは複数のプロパティを設定するためのものであり、10 進数以外の数値にする必要があります。 |
JS
|
userDataDouble | このデータ型は、double 型の 1 つまたは複数のプロパティを設定するためのものであり、10 進数の数値にする必要があります。 |
JS
|
| このデータ型は、boolean 型の 1 つまたは複数のプロパティを設定するためのものです。 |
JS
|
| このデータ型は、date 型の 1 つまたは複数のプロパティを設定するためのものです。値は、変換された日付のエポック値にする必要があります。 |
JS
|
ユーザデータオブジェクトの構文
各ページイベントのオブジェクトとしてユーザデータを JavaScript エージェント構成に追加します。基本ページ、Ajax、および仮想ページには、次の対応するユーザデータオブジェクトがあります。
PageViewAjaxVPageView
PageView、Ajax、および VPageView オブジェクトの構文は若干異なります。UserPageName は PageView と VPageView でのみ使用でき、Ajax および Error では使用できません。
userEventInfo: {
"PageView": function(context) {
return {
userPageName: "String"
userData: {
userDataOne: "String",
userDataTwo: "String",
someKey: "String"
},
userDataLong: {
longPropertyOne: Numeral,
longPropertyTwo: Numeral,
someKey: Numeral
},
userDataDouble: {
userDataDoubleOne: Decimal,
userDataDoubleTwo: Decimal,
someKey: Numeral
},
userDataBoolean: {
userDataBooleanOne: Boolean,
userDataBooleanTwo: Boolean,
someKey: Boolean
},
userDataDate: {
epoch1: Epoch numeral,
epoch2: Epoch numeral,
currentTime: ((new Date()).getTime()),
someKey: ((new Date()).getTime())
}
}
}
"Ajax" : function(context) {
if (context.method.toLowerCase() === 'post') {
var anyKey = "String";
} else {
variableName = "String";
}
return {
userData: {
userDataOne: "String",
userDataTwo: "String"
variableName: VariableName
},
userDataLong: {
longPropertyOne: Numeral,
longPropertyTwo: Numeral
},
userDataDouble: {
userDataDoubleOne: Decimal,
userDataDoubleTwo: Decimal
},
userDataBoolean: {
userDataBooleanOne: Boolean,
userDataBooleanTwo: Boolean
},
userDataDate: {
epoch1: Epoch numeral,
epoch2: Epoch numeral
}
}
},
"VPageView": function(context) {
return {
userPageName: "String",
userData: {
userDataOne: "String",
userDataTwo: "String"
},
userDataLong: {
longPropertyOne: Numeral,
longPropertyTwo: Numeral
},
userDataDouble: {
userDataDoubleOne: Decimal,
userDataDoubleTwo: Decimal
},
userDataBoolean: {
userDataBooleanOne: Boolean,
userDataBooleanTwo: Boolean
},
userDataDate: {
epoch1: Epoch numeral,
epoch2: Epoch numeral
}
}
},
"Error": function(context) {
return {
userPageName: "String",
userData: {
username: "String",
cart: "String"
},
userDataLong: {
longExample1: Numeral,
longExample2: Numeral
},
userDataDouble: {
doubleExample1: Decimal,
doubleExample2: Decimal
},
userDataBoolean: {
booleanExample1: Boolean,
booleanExample2: Boolean
},
userDataDate: {
epoch1: Epoch numeral,
epoch2: Epoch numeral
}
}
}
}
};userEventInfo: {
"PageView": function(context) {
return {
userPageName: "UserEventInfoTestPage",
userData: {
username: "basepage_user",
cart: "100.00",
someKey: "111222333444555"
},
userDataLong: {
numberOfProducts: 17,
numberOfSales: 1213
someKey: 111222333444555
},
userDataDouble: {
monthlyVisitFrequency: 0.13333333,
avgCustomerConversion: 0.0361922
someKey: 111222333444555.666
},
userDataBoolean: {
returnCustomer: true,
subscriber: false
someKey: true
},
userDataDate: {
checkoutTime: 1441751614436,
currentTime: ((new Date()).getTime()),
someKey: ((new Date()).getTime())
}
}
"Ajax" : function(context) {
var property = '';
if (context.method.toLowerCase() === 'post') {
property = "Could be doing something";
}
else {
property = "Idempotent, hopefully";
}
return {
userData: {
username: "xhr_user",
cart: "218.50",
property: property
},
userDataLong: {
numberOfProducts: 17,
numberOfSales: 1213
},
userDataDouble: {
monthlyVisitFrequency: 0.13333333,
avgCustomerConversion: 0.0361922
},
userDataBoolean: {
returnCustomer: true,
subscriber: false
},
userDataDate: {
checkoutTime: 1441751614436,
currentTime: ((new Date()).getTime()),
}
}
},
"VPageView": function(context) {
return {
userData: {
username: "virtualpage_user",
cart: "200.00"
},
userDataLong: {
numberOfProducts: 17,
numberOfSales: 1213
},
userDataDouble: {
monthlyVisitFrequency: 0.13333333,
avgCustomerConversion: 0.0361922
},
userDataBoolean: {
returnCustomer: true,
subscriber: false
},
userDataDate: {
checkoutTime: 1441751614436,
currentTime: ((new Date()).getTime()),
}
}
},
"Error": function(context) {
return {
userPageName: "UserEventInfoTestPage",
userData: {
username: "automated_tester",
cart: "100.00"
},
userDataLong: {
longExample1: 129414,
longExample2: 524546
},
userDataDouble: {
doubleExample1: 5982.612575313542,
doubleExample2: 5084.016120518092
},
userDataBoolean: {
booleanExample1: true,
booleanExample2: false
},
userDataDate: {
epoch1: 1441751614436,
epoch2: 1441751614438
}
}
}
}
};
ユーザデータを設定するための Ajax データのキャプチャ
Ajax イベントのユーザデータを設定すると、JavaScript エージェント構成では、HTTP メソッド、リクエスト URL、および Ajax リクエストのリクエストペイロードのプロパティを持つ context オブジェクトが使用できます。この情報を使用して、ユーザデータ構成オブジェクトの値を設定できます。
JavaScript エージェントは、Ajax リクエストからの応答のインターセプトや公開は行いません。したがって、レポートするユーザデータには、リクエスト情報（HTTP メソッド、リクエスト URL、およびリクエストペイロード）のみを含めることができます。
Ajax コンテキストオブジェクト
Ajax リクエストの URL および HTTP メソッドにアクセスするには、context オブジェクトの method および url プロパティにアクセスするだけです。Ajax リクエストのリクエストペイロードについては、最初にペイロードパラメータ（HTTP メソッドまたは Ajax URL）と照合して data プロパティにアクセスする必要があります。ペイロードパラメータと一致するフィルタを定義する方法については、「Ajax ペイロードパラメータの照合」を参照してください。
context オブジェクトには次のプロパティがあります。
| プロパティ | 説明 | データ タイプ | プロパティにアクセスするための要件 |
|---|---|---|---|
method | Ajax リクエストを作成するために使用される HTTP メソッド。 | string | XHR コール |
url | Ajax リクエストを作成するために使用される URL。 | string | XHR コール |
data | Ajax リクエストに付加されるリクエストペイロード。 | 本文として xhr.send に渡すことができる任意のデータ型。 |
|
Ajax ペイロードパラメータの照合
リクエストペイロードにアクセスするには、xhr.payloadParams 配列を使用して、HTTP メソッドや Ajax URL を照合する必要があります。Ajax URL と照合する場合、1 つまたは複数のパターンを指定できます。HTTP メソッドを照合するには、HTTP メソッドを指定する 1 つまたは複数のオブジェクトを追加します。
「HTTP メソッドの照合」の例では、HTTP メソッド「POST」と「GET」を照合するために payloadParams 配列が使用されます。「URL の照合」の例では、文字列「.*/xhr/uptime'」を使用して URL を照合するために payloadParams 配列が使用されます。
<script type = 'text/javascript' charset = 'UTF-8' >
window['adrum-config'] = {
xhr: {
payloadParams: [{
method: 'POST'
}, {
method: 'GET'
}]
},
...
}window['adrum-config'] = {
xhr: {
payloadParams: [{urls: [{pattern: '.*/xhr/uptime'}]}]
},
...
}Ajax ペイロードフィルタの例
従来の Ajax リクエスト
次の例では、従来の Ajax リクエストペイロードのデータを使用して、カスタムユーザデータを設定します。Fetch API コールのリクエストペイロードをキャプチャする場合は、「Fetch API を使用した Ajax リクエスト」を参照してください。
この例では、HTTP メソッドが POST の場合のみ、Ajax リクエストペイロードのデータを使用してユーザデータ構成オブジェクトを設定します。
<script type='text/javascript' charset='UTF-8'>
window['adrum-config'] = {
xhr: {
payloadParams: [{method: 'POST'}]
},
userEventInfo: {
"Ajax" : function(context) {
if (context.data && context.data.indexOf("purchase") > -1) {
// The URLSearchParams API does not work on IE/Edge
var payload = new URLSearchParams(context.data);
return {
userData: {
username: payload.get("username"),
email: payload.get("email"),
phone: payload.get("phone")
},
userDataLong: {
customerId: Number(payload.get("customer_id"),
totalPurchases: Number(payload.get("total_purchases")
},
userDataDouble: {
purchaseTotal: Double(payload.get("total")
},
userDataBoolean: {
discounted: Boolean(payload.get("discounted"),
vipMember: Boolean(payload.get("member")
},
userDataDate: {
purchaseTime: Date.now()
}
}
}
}
};
</script>
<script src='//cdn.appdynamics.com/adrum/adrum-latest.js' type='text/javascript' charset='UTF-8'></script>この例では、Ajax URL がパターン ".*/transaction" と一致する場合のみ、Ajax リクエストペイロードのデータを使用してユーザデータ構成オブジェクトのみを設定します。たとえば、URL http://example.com/transaction はこのパターンに一致し、ユーザデータ構成が Ajax リクエストペイロードのデータを使用して設定されます。
<script type='text/javascript' charset='UTF-8'>
window['adrum-config'] = {
xhr: {
payloadParams: [{urls: [{pattern: '.*/transaction'}]}]
},
userEventInfo: {
"Ajax" : function(context) {
if (context.data && (context.data.indexOf("username") > -1) && (context.data.indexOf("customer_id") > -1) && (customer.data.indexOf("phone") > -1)) {
// The URLSearchParams API does not work on IE/Edge
var payload = new URLSearchParams(context.data);
return {
userData: {
username: payload.get("username"),
email: payload.get("email"),
phone: payload.get("phone")
},
userDataLong: {
customerId: Number(payload.get("customer_id")
totalPurchases: Number(payload.get("total_purchases") || 0
},
userDataDouble: {
purchaseTotal: Number(payload.get("total") || 0
},
userDataBoolean: {
discounted: Boolean(payload.get("discounted") || false,
vipMember: Boolean(payload.get("member") || false
},
userDataDate: {
purchaseTime: Date.now()
}
}
}
}
};
}
</script>
<script src='//cdn.appdynamics.com/adrum/adrum-latest.js' type='text/javascript' charset='UTF-8'></script>Fetch API を使用した Ajax リクエスト
次の例は、JavaScript エージェント構成を使用して、Fetch API を使用する Ajax コールの HTTP メソッド、リクエスト URL、および リクエスト本文を照合する方法を示しています。Fetch API コールは、コンテキストを追加するためにも提供されます。ただし、独自のリクエストオブジェクトを fetch メソッドに指定した場合は、JavaScript エージェントはリクエスト本文にcannot access。
この Fetch API の例では、HTTP メソッドが POST の場合に、Ajax リクエストペイロードのデータを設定します。
<script type="text/javascript" charset="UTF-8">
// Note: URLSearchParams() is not supported in IE/Edge
let queryParams = new URLSearchParams(window.location.search.substr(1));
fetch('https://my-json-server.typicode.com/typicode/demo/posts', {
method: 'post',
body: queryParams.toString()
}).then(function(response) {
return response.json();
}).then(function(data) {
console.log('Posted content:', data.request_url);
});
</script>この例では、HTTP メソッドが POST で Ajax URL がパターン ".*/posts" と一致する場合のみ、Ajax リクエストペイロードのデータを使用してユーザデータ構成オブジェクトを設定します。
<script type='text/javascript' charset='UTF-8'>
window['adrum-config'] = {
xhr: {
payloadParams: [{method: 'POST'}, {urls: [{pattern: '.*/posts'}]}]
},
userEventInfo: {
"Ajax": function (context) {
var payload = null;
if (context.data && (context.data.indexOf("id") > -1) && (context.data.indexOf("title") > -1)) {
// The URLSearchParams API does not work on IE/Edge
payload = new URLSearchParams(context.data).toString();
} else if (context.data && context.data.indexOf("id") > -1) {
// The URLSearchParams API does not work on IE/Edge
var params = new URLSearchParams(context.data);
params.set("title", "Post for " + params.get("id"));
payload = params.toString();
} else {
payload = "Payload is not available";
}
return {
userData: {
username: "xhr_user",
cart: "218.50",
payload: payload
}
}
}
}
};
</script>
<script src='//cdn.appdynamics.com/adrum/adrum-latest.js' type='text/javascript' charset='UTF-8'></script>カスタムユーザデータの例
次の例は、さまざまなページタイプのカスタムデータを設定し、さまざまなメソッドを使用する方法を示しています。
関数ポインタを使用したユーザデータの設定
次の例では、関数 extractUserData を実行して PageView オブジェクトの userPageName プロパティに値を割り当てます。これにより、cookie からデータが抽出されます。
< script type = 'text/javascript'
charset = 'UTF-8' >
(function (config) {
(function (info) {
info.PageView = extractUserData;
})(config.userEventInfo || (config.userEventInfo = {}))
})(window['adrum-config'] || (window['adrum-config'] = {}));
function extractUserData() {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i].trim();
if (cookie.indexOf("role=") === 0) {
var role = cookie.substring(5);
}
}
return {
userPageName: role
};
} <
/script> <
script src = '//cdn.appdynamics.com/adrum/adrum-latest.js'
type = 'text/javascript'
charset = 'UTF-8' > < /script>無名関数を使用したユーザデータの設定
また、仮想ページのユーザデータを設定するために、次の例に示すように、オブジェクトを返す無名関数を使用することもできます。
< script type = 'text/javascript'
charset = 'UTF-8' >
(function (config) {
(function (info) {
info.VPageView = function () {
return {
userData: {
version: window.location.href.split("/")[4],
space: space(),
email: getEmail()
},
userPageName: $('title').get(0).text,
userDataDate: {
currentTime: ((new Date()).getTime())
},
userDataBoolean: {
watchingPage: watchingPage()
}
}
}
})(config.userEventInfo || (config.userEventInfo = {}))
})(window['adrum-config'] || (window['adrum-config'] = {})); <
/script> <
script src = '//cdn.appdynamics.com/adrum/adrum-latest.js'
type = 'text/javascript'
charset = 'UTF-8' > < /script>複数のメソッドを使用したユーザデータの設定
また、この例では、 Ajax イベントのユーザデータを設定するために、リテラル値と名前付きおよび無名関数を組み合わせて使用することもできます。context オブジェクトは、Ajax イベントにのみ使用できます。このオブジェクトには、プロパティ data（リクエストペイロードを格納）、method（Ajax リクエストの作成に使用する HTTP メソッド）、および url（Ajax リクエスト URL）があります。
<script type='text/javascript' charset='UTF-8'>
(function(config){
(function(info) {
info.Ajax = function(context) {
return {
userPageName: $('title').get(0).text,
userData: extractUserData(context)
userDataBoolean: {
"visited": true
}
}
};
})(config.userEventInfo || (config.userEventInfo = {}))
})(window['adrum-config'] || (window['adrum-config'] = {}));
function extractUserData(context) {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i].trim();
if (cookie.indexOf("email=") === 0) {
var role = cookie.substring(5);
}
}
return {
role: role,
url: context.url,
method: context.method
};
}
</script>
<script src='//cdn.appdynamics.com/adrum/adrum-latest.js' type='text/javascript' charset='UTF-8'></script>