ページ ブラウザ スナップショットへのカスタムユーザデータの追加

アプリケーションに固有のユーザ情報をブラウザのスナップショットに追加できます。この情報はキーと値のペアとして表されます。これは JavaScript エージェント構成に付加され、その後で EUM サーバーに送信されるビーコンに付加されます。

JavaScript エージェントは、ページタイプ（ベース、Ajax、仮想）と使用されるメソッド（関数式、関数ポインタ、およびリテラルが呼び出された直後）に応じて、ユーザーデータを異なる方法で初期化します。JavaScript エージェントが各ページタイプとメソッドのユーザーデータを初期化するタイミングについては、「カスタムユーザーデータを設定するメソッド」を参照してください。

ページ内のユーザデータに対して許可される最大サイズは、2048 文字（CORS ビーコン）または 100 バイト（イメージビーコン）です。最大サイズには、キーと値のペア、括弧などの構文文字、引用符などが含まれます。

カスタムユーザーデータの表示

カスタムユーザーデータは、[Browser Analyze]、[Browser Snapshots]、および [Sessions] に表示されます。コントローラ UI でユーザーデータを表示および使用する方法の詳細については、次のタブを参照してください。
ブラウザ分析

この [Browser Analyze] スクリーンショットでは、レコードをソートするために vehicleYear というユーザーデータが使用されています。また、ユーザデータを表示するためのフィールドを選択することもできます。

ブラウザ分析

ブラウザスナップショット

この [Browser Snapshots] タブのスクリーンショットは、ユーザーデータを使用して結果をフィルタリングする方法を示しています。

ブラウザスナップショット

セッション

次のスクリーンショットは、[Session Details] ダイアログの [Session Summary] のユーザデータを表示しています。カスタムユーザデータを含む基本ページがセッションの最初のページである場合には、セッションにはカスタムユーザデータのみが含まれます。

セッションのサマリー

カスタムユーザデータを設定するためのメソッド

各ページタイプ（基本、Ajax、仮想）のカスタムデータを設定するには、いくつかのメソッドを使用できます。各メソッドには、独自の構文、実行時間、およびユースケースがあります。次の表に、各メソッドとページタイプの実行時間とユースケースの例の概要を示します。

方式タイプページタイプ実行時間ユースケースの例
即時呼び出し関数式（IIFE）基本これらは、定義されるとすぐに実行される JavaScript 関数です。自己実行無名関数とも呼ばれています。

基本/仮想ページまたは Ajax リクエストが、異なるリソースからの情報に応じて変化する場合は、IIFE を使用してカスタムユーザデータの静的情報を設定できます。

たとえば、2 つの異なるサーバスクリプトが基本ページのコンテンツを生成する場合、クライアントの IIFE を使用して静的ユーザデータを設定できます。

Ajax
仮想
関数ポインタ基本JavaScript エージェントは、onload イベントがトリガーされたときに関数ポインタを実行します。cookie、ページ、およびメタデータから抽出されたデータ。
Ajaxこのイベントは、Ajax コールが発信されたときにトリガーされます。Ajax イベントのカスタムユーザデータは、AJAX リクエストに付加されます。URL、HTTP メソッド、リクエストペイロードなどの Ajax リクエストに関するメタデータ。
仮想このイベントは、仮想ページが作成されたときにトリガーされます。仮想ページは、ベースページの動的に再作成されたバージョンであり、VPageView イベント用のカスタムユーザーデータが仮想ページレコードに付加されます。仮想ページの作成により、この情報がページのどこかで生成されるか、または検出される場合に使用。URL と DOM の変更に基づいて設定されたユーザ固有のフィールドまたはユーザデータ。
リテラル基本カスタムデータを設定するときは、リテラル値を使用するだけです。値は、IIFE と同様に、値が定義されるとすぐに設定されます。定数。サーバで抽出され、設定される静的データ。
Ajax
仮想

ユーザデータ型

トリガーされるイベントコールバックごとに、さまざまなデータ型のキーと値のペアを含むオブジェクトを返すことによって、ユーザデータを追加できます。各ユーザデータ型は、特定のデータ型のプロパティを含むオブジェクトです。

警告: データ型がキーと値のペアに正しく一致することを確認します。文字列データ型に日付のキーと値のペアを追加するなど、userData オブジェクト内で誤ったキーと値を送信すると、一般的なエラーが表示されます。
データ タイプ説明例

userData

このデータ型は、string 型の 1 つまたは複数のプロパティを設定するためのものです。値が数値に設定されている場合でも、文字列にする必要があります。 
{
   user: "john_thompson",
   cart: "100.00"
};

userDataLong

このデータ型は、long 型の 1 つまたは複数のプロパティを設定するためのものであり、10 進数以外の数値にする必要があります。 
{
    numberOfProducts: 17,
    numberOfSales: 1213
};
userDataDouble このデータ型は、double 型の 1 つまたは複数のプロパティを設定するためのものであり、10 進数の数値にする必要があります。 
{
    monthlyVisitFrequency: 0.13333333,
    avgCustomerConversion: 0.0361922
};

userDataBoolean

このデータ型は、boolean 型の 1 つまたは複数のプロパティを設定するためのものです。 
{
    returnCustomer: true,
    subscriber: false
};

userDataDate

このデータ型は、date 型の 1 つまたは複数のプロパティを設定するためのものです。値は、変換された日付のエポック値にする必要があります。 
{
    epoch1: 1448675019877,
    epoch2: 1418475982737
};

ユーザデータオブジェクトの構文

各ページイベントのオブジェクトとしてユーザデータを JavaScript エージェント構成に追加します。基本ページ、Ajax、および仮想ページには、次の対応するユーザーデータオブジェクトがあります。

  • PageView
  • Ajax
  • VPageView
PageView、Ajax、および VPageView オブジェクトのシンタックスは若干異なります。UserPageName は、PageView と VPageView でのみ使用でき、Ajax と Errorでは使用できません。
JavaScript 設定テンプレート
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
                    }
                }
            }
        }
    };
JavaScript の設定例
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,
            }
        }
    }
}
};

Capture Ajax Data for Setting User Data

When setting user data for the Ajax event, the JavaScript Agent configuration provides a context object that has properties for the HTTP method, the request URL, and the request payload of the Ajax request. You can use this information to set values for the user data configuration object.

注: The JavaScript Agent does not intercept or expose the response from the Ajax request. Thus, you can only include the request information (HTTP method, request URL, and request payload) in the user data that you report.

Ajax Context Object

To access the URL and HTTP method of the Ajax request, you can simply access the method and url properties of the context object. For the request payload of the Ajax request, you need to first match the payload parameters (HTTP method or Ajax URL) to access the data property. See Match the Ajax Payload Parameters to learn how to define the filters to match the payload parameters.

The context object has the following properties:

PropertyDescriptionData TypeRequirement to Access Property
method The HTTP method used to make the Ajax request.stringXHR call
url The URL used to make the Ajax request.stringXHR call
data The request payload attached to the Ajax request.Any data type that can be passed as the body to xhr.send.
  • XHR call
  • XHR filter for the payload parameter

responseHeaders

The response headers made available with the config, getAjaxResponseHeaders, separated by "|". string
  • XHR call
  • getAjaxResponseHeaders configured with whichever header names you specified in getAjaxResponseHeaders .

Match the Ajax Payload Parameters

To access the request payload, you need to use xhr.payloadParams array to match the HTTP method and/or the Ajax URL. To match the Ajax URL, you can specify one or more patterns. To match the HTTP method, you include one or more objects specifying HTTP methods.

In the "Match HTTP Methods" example, the payloadParams array is used to match the HTTP methods "POST" and "GET". In the "Matching URLs" example, the payloadParams array is used to match URLs with the following string: '.*/xhr/uptime'.
Match HTTP Methods
<script type = 'text/javascript' charset = 'UTF-8' >
    window['adrum-config'] = {
        xhr: {
            payloadParams: [{
                method: 'POST'
            }, {
                method: 'GET'
            }]
        },
        ...
    }
Match URLs
window['adrum-config'] = {
    xhr: {
        payloadParams: [{urls: [{pattern: '.*/xhr/uptime'}]}]
    },
    ...
}

Ajax Payload Filter Examples

Conventional Ajax Requests

In the following examples, the data from a conventional Ajax request payload is used to set custom user data. For capturing the request payload for Fetch API calls, see Ajax Requests Using the Fetch API.
Match HTTP Methods Example

This example only sets the user data configuration objects with data from the Ajax request payload if the HTTP method is POST.

<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>
Match URLs Example

This example only sets the user data configuration objects with data from the Ajax request payload if the Ajax URL matches the pattern ".*/transaction". For example, the URL http://example.com/transaction would match the pattern and cause the user data configuration to be set with data from the Ajax request payload.

<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>

Ajax Requests Using the Fetch API

The example below demonstrates how to use the JavaScript Agent configuration to match the HTTP method, the request URL, and the request body for Ajax calls using the Fetch API. The Fetch API call is also provided to add context. The JavaScript Agent cannot access the request body, however, if you supply your own Request object to the fetch method.
Fetch API Call

This Fetch API example sets the from the Ajax request payload if the HTTP method is POST.

<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>
Match HTTP Method and URL Example

This example only sets the user data configuration objects with data from the Ajax request payload if the HTTP method is POST and the Ajax URL matches the pattern ".*/posts".

<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>

AjaxresponseHeadersExample

The following example show you how to use getAjaxResponseHeaders, which takes either a string or an array of strings.

Match Ajax Response Headers Example

This example defines the ajax response headers we want to capture, and uses context.responseHeaders to populate the userData field.

<script type='text/javascript' charset='UTF-8'>
    window['adrum-config'] = {
        getAjaxResponseHeaders: ['ResponseHeaderName1', 'ResponseHeaderName2'],
        userEventInfo: {
            "Ajax" : function(context) {
                if (context.responseHeaders) {
                    let responseHeaders = context.responseHeaders;
                    // Do a regex search on this variable to read from the responseHeader string as needed.
                    // An example of a returned responseHeader string would be
                    // content-type: text/javascript | content-length: 599622
                    let header1 = "//Regex saved var here";
                    let header2 = "//Regex saved var here";
                    return {
                        userData: {
                            Header1: header1,
                            Header2: header2
                        }
                    }
                }
            }
        }
    }
</script>
<script src='//cdn.appdynamics.com/adrum/adrum-latest.js' type='text/javascript' charset='UTF-8'></script>

カスタムユーザデータの例

次の例は、さまざまなページタイプのカスタムデータを設定し、さまざまなメソッドを使用する方法を示しています。

トレースコンテキストを使用したユーザーデータの設定

次のスクリプト例では、JavaScript エージェントが Ajax リクエストの traceid と traceparent を送信できるようにします。

<script charset="UTF-8" type="text/javascript">
        window["adrum-start-time"] = new Date().getTime();
        (function(config){
            //other configs
            config.traceparentHeaderEnabled = true;
            config.userEventInfo = {
                "Ajax": function (context) {
                    return {
                        userData: {
                            traceparent:context.traceParent,
                            traceid: context.traceParent.split("-")[1]
                        }
                    };
                }
            }
        })(window["adrum-config"] || (window["adrum-config"] = {}));
    </script>

関数ポインタを使用したユーザデータの設定

次の例では、関数 userPageName を実行して PageView オブジェクトの extractUserData プロパティに値を割り当てます。これにより、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>