Related pages:

This page explains how to create custom virtual page names. Using the API calls below, you can configure the JavaScript Agent to use any arbitrary string (not necessarily a part of the URL) to name a virtual page.

Requirements

  • You must have SPA2 monitoring enabled. See Configure SPA2 Monitoring. If you are using SPA1 monitoring, the method called to set the name the virtual page will be ignored.
  • The virtual page name must consist of a string of 760 or fewer alphanumeric characters. If the string length exceeds 760 characters, the page name will not be set.

Set Custom Names for Pre-existing Virtual Pages

To set a custom name for pre-existing virtual pages, you should use the API call ADRUM.setVirtualPageName("myCustomVPName"). This API should be called soon after you make your virtual page by means that the JavaScript Agent can track, such as with the browser API's history.pushState/history.replaceState or hash history changes.

For example:

head>
    <script charset='UTF-8' type='text/javascript'>
        window['adrum-start-time'] = new Date().getTime();
        (function(config){
            config.appKey = '<EUM_APP_KEY>';
            ...
        })(window['adrum-config'] || (window['adrum-config'] = {}));
    </script>
    <script charset='UTF-8' src='//cdn.appdynamics.com/adrum/adrum-latest.js' type='text/javascript' ></script>
    <script type='text/javascript' charset='UTF-8'>
        ...   
        <!--- Browser API call triggering VP detection --->
        window.history.pushState({}, '', "#myUrlHere");
        <!--- Marking the previous virtual page with a custom name ---> 
        ADRUM.setVirtualPageName("myCustomVPName");
     </script>
</head>
JS

Set Custom Names for New Virtual Pages

To set a custom name for a new virtual page, use the method setVirtualPageName with ADRUM.command. The ADRUM object is globally accessible after you load the JavaScript Agent (adrum-latest.js).

For example:

<head>
    <script charset='UTF-8' type='text/javascript'>
        window['adrum-start-time'] = new Date().getTime();
        (function(config){
            config.appKey = '<EUM_APP_KEY>';
            ...
        })(window['adrum-config'] || (window['adrum-config'] = {}));
    </script>
    <script charset='UTF-8' src='//cdn.appdynamics.com/adrum/adrum-latest.js' type='text/javascript' ></script>
    <script type='text/javascript' charset='UTF-8'>
        ...
        ADRUM.command("setVirtualPageName", "myCustomVPName");
    </script>
</head>
JS

When you name a virtual page with setVirtualPageName, the custom name will be applied to the next virtual page you manually mark with markVirtualPageBegin. Thus, the virtual page currently being monitored will not get the custom name.  

The code example below shows how to call the methods to manually mark the beginning and end of the virtual page as well as execute setVirtualPageName to name the next virtual page that is monitored. See Report Virtual Pages to learn how to manually mark the beginning and end of virtual pages with this JavaScript API.

.controller('VPNaming', ['$scope', '$http', function ($scope, $http) { 
            $scope.startVirtualPageWithCustomUrl = function () {
                console.log("Marking the beginning of the virtual page and waiting for the end to be manually marked.");
                ADRUM.markVirtualPageBegin("homepage", true);
            }
            $scope.startVirtualPageNotWaitingForMarkVirtualPageEnd = function () {
                console.log("Marking the beginning of the virtual page and allowing the JS Agent to mark the end of the virtual page.");
                ADRUM.markVirtualPageBegin("homepage", false);
            }
            $scope.endVirtualPage = function () {
                console.log("Manually marking the end of the virtual page.");
                ADRUM.markVirtualPageEnd();
            }
            $scope.setVirtualPageName = function () {
                console.log("Setting a custom name for the next virtual page to be monitored: have it's beginning and end marked.");
                ADRUM.command("setVirtualPageName", "myCustomVPName");
            }
        }
    ]
);
JS