Set Ajax Request Names Based on Captured POST Parameters

Related pages:

You can configure the JavaScript Agent to capture POST parameters and then use the parameter(s) to name the Ajax request in the Pages & Ajax Requests page. This enables you to identify and sort Ajax requests from the same page based on POST parameter(s).

For example, customers on your home page of your website can either register an account or log in. The Ajax request may pass the parameter action to reflect one of these user actions. By capturing the action parameter, you can differentiate the Ajax requests to monitor performance and debug issues.

Configure the JavaScript Agent to Capture Parameters

You use the xhr object to configure the JavaScript Agent to capture POST parameters. The xhr object has the property parameter that is used to match resource URLs and define a callback for parsing the request body and return the desired results. In the example below, the configuration sets a pattern to match the URL http://www.mystore.com, parses the request body, and returns an object containing the parameter action. As mentioned earlier, you could use a configuration like this to differentiate Ajax requests that are sending requests to register or log in users.
<script type='text/javascript' charset='UTF-8'>
    window['adrum-start-time'] = new Date().getTime();
    window['adrum-config'] =  { 
        xhr: {
            parameter : {
                urls : [{pattern : '^https?:\\/\\/www\\.mystore\\.com'}],
                getFromBody: function(data) {
                    if (typeof data === 'string') {
                        var fields = data.split("&");
                        for (var i = 0; i < fields.length; i++) {
                            var keyAndValue = fields[i].split('=');
                            if (keyAndValue.length > 1) {
                                var key = keyAndValue[0],
                                value = keyAndValue[1];
                            if (key === 'action')
                                return {action: value};
                            }
                        }
                    }
                }
            }
        }
    }
</script>
<script charset='UTF-8'>
    (function(config){
        config.appKey = '<EUM_APP_KEY>';
        config.adrumExtUrlHttp = 'http://cdn.appdynamics.com';
        config.adrumExtUrlHttps = 'https://cdn.appdynamics.com';
        config.beaconUrlHttp = 'http://col.eum-appdynamics.com';
        config.beaconUrlHttps = 'https://col.eum-appdynamics.com';
        config.xd = {enable : true};
    })(window['adrum-config'] || (window['adrum-config'] = {}));

    (function (cfg) {
        if (cfg.beacon) cfg.beacon.neverSendImageBeacon = true;
        else cfg.beacon = { neverSendImageBeacon: true };
    })(window['adrum-config'] || (window['adrum-config'] = {}));
</script> 
<script src='//cdn.appdynamics.com/adrum/adrum-latest.js' type='text/javascript' charset='UTF-8'></script>

Create an Ajax Include Rule

To name an Ajax request based on a captured request parameter, you need to define an include rule that specifies the captured POST parameter. See Configure Naming for Ajax Requests to learn how to create include rules for Ajax requests.

The example include rule below uses the full domain and the captured POST parameter to name the Ajax request in the Pages & Ajax Requests page. For example, if an Ajax request is made to www.mystore.com and the value of the action parameter is register, the Ajax request will be named www.mystore.com/register.

Include Rule

View Results in Pages & Ajax Requests

From the Pages & Ajax Requests page, you can view the Ajax requests that are named based on your include rule.

Using the configuration and include rule shown above, you might see the following Ajax request with the name mystore.com/register.