関連ページ：

このページでは、カスタム仮想ページ名を作成する方法について説明します。以下の API 呼び出しを使用して、URL の一部ではなく、任意の文字列を使用して仮想ページに名前を付けるように JavaScript エージェントを設定できます。

要件

  • SPA2 モニタリングを有効にする必要があります。「SPA2 モニタリングの設定」を参照してください。SPA1 モニタリングを使用している場合、仮想ページの名前を設定するために呼び出されるメソッドは無視されます。
  • 仮想ページ名は、760 文字以下の英数字で構成する必要があります。文字列の長さが 760 文字を超えると、ページ名は設定されません。

既存の仮想ページにカスタム名を設定する

既存の仮想ページにカスタム名を設定するには、API 呼び出し ADRUM.setVirtualPageName("myCustomVPName") を使用する必要があります。この API は、ブラウザ API の history.pushState/history.replaceState やハッシュ履歴の変更などを使用して JavaScript エージェントが追跡できる手段を使用して、仮想ページを作成した直後に呼び出す必要があります。

次に例を示します。

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

新しい仮想ページにカスタム名を設定する

新しい仮想ページにカスタム名を設定するには、setVirtualPageName メソッドを ADRUM.command とともに使用します。ADRUM オブジェクトは、JavaScript エージェント（adrum-latest.js）をロードした後にグローバルにアクセスできます。

次に例を示します。

<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

setVirtualPageName を使用して仮想ページに名前を付けると、カスタム名が markVirtualPageBegin を使用して手動でマークを付けた次の仮想ページに適用されます。そのため、現在モニタされている仮想ページでは、カスタム名は取得されません。  

次のコード例は、仮想ページの開始と終了を手動でマークし、モニタ対象の次の仮想ページに対して名前を付けるために setVirtualPageName を実行するメソッドを呼び出す方法を示しています。この 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