Versions Compared

    Key

    • This line was added.
    • This line was removed.
    • Formatting was changed.
    Comment: Published by Scroll Versions from this space and version 20.7-next
    Sv translation
    languageen
    Appd tocbox

    Related pagesPages:

    For most situations, This page covers how to configure the JavaScript Agent works correctly with the default settings. You can, however, customize adrum.js in specific situations, either by adding on to the manual injection scripts, or, in the case of automatic or assisted injection, by having your web application insert the appropriate code.

    Add Custom Configuration for the JavaScript Agent

    You can add the custom configuration to the Controller UI and then generate the HTML snippet with your configuration.

    To do so, follow the steps below:

    1. Open the Configuration page.
    2. Click Configure and download JavaScript Agent.
    3. Expand the Advanced section.
    4. Enter your custom configuration in the text area.
    5. Click Save Config & Generate HTML Snippet.
    6. Copy the HTML snippet to your clipboard or download the JavaScript file.

    Set the Beacon URL for On-Premises Deployments

    The beacon URL is used to transmit metrics about your application to the EUM Server. When you create a custom configuration, the URLs assigned to the variable config.beaconUrlHttp and  config.beaconUrlHttps in the HTML snippet must be the same as the URL assigned to the EUM property eum.beacon.host and eum.beacon.https.host in the Controller Setting page of the Controller Admin.

    For example, the Controller Settings page shown below displays the URLs appdynamics.controller.eum.beacon.hostname and appdynamics.controller.eum.beacon.https.hostname for the properties eum.beacon.host and eum.beacon.https.host respectively.

    controller settings UI screenImage Removed

    In the HTML snippet containing your custom configuration, the variables config.beaconUrlHttp and config.beaconUrlHttps shown below must have the same values as given in the Controller Settings of the Controller Admin. In the case that you're using multiple instances of the EUM Server, for example, one SaaS EUM Server and one on-premises EUM Server, you can modify the values to point to one of the EUM Servers.

    Code Block
    languagejs
    <script type='text/javascript' 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>

    Synchronous versus Asynchronous Script Load

    It is recommended that the adrum.js file loads synchronously because once downloaded, the JavaScript Agent begins monitoring for page data such as Ajax events, resources, and errors. If adrum.js loads asynchronously for the first time (via the async attribute), the JavaScript Agent might not report all page data. in the Controller UI. To set up Browser Real User Monitoring, you must configure the JavaScript Agent and then inject the JavaScript Agent code snippet.

    To access JavaScript configuration:

    1. In the Controller UI, go to a browser application. 
    2. In the left-hand panel, go to Configuration Configure the JavaScript Agent

    Configure the JavaScript Agent

    To configure the JavaScript Agent in the Controller:

    1. Select a hosting option.

    2. Customize the code snippet in Step 2: Advanced settings (Optional). 

    3. Click Save.

    Anchor
    advanced
    advanced
    Configure Advanced Configurations in the Controller UI

    Info

    The UI-based advanced configurations are available for SaaS Controller version 20.7.0 and later.

    In the Controller UI, you can specify advanced configurations. When you check a box, such as Use HTTPS by default, the HTML snippet automatically updates to reflect the selection, such as config.useHTTPSAlways = true. The table below lists each setting's documentation and summary. 

    ConfigurationSummary
    Use HTTPS by defaultUse HTTPS as the default transport protocol for the JavaScript Agent. If unchecked, the agent chooses the transport protocol used to load the base page.
    Set cookie to strict domainLimit the cookie to the full strict domain name. If unchecked, the cookie is set to the broadest version of the originating domain (e.g., *.domain.com).

    Set GeoServer URL

    If your application uses internet IP addresses or users connect through a VPN, enter your custom GeoServer URL to map internal IP addresses to physical locations. If unchecked, end-user locations are resolved using the default GeoServer.
    Configure URL length Set the maximum number of segments and characters in resource URLs to view more or less of a URL in the Controller UI.
    Hide URL query stringBy default, URL query strings may be long or contain sensitive information. Check this box to hide the full string from the Controller UI.
    Cross-domain session correlationEnable sessions to continue across subdomains. If unchecked, sessions are restricted to one domain and navigating from one domain to another will end the session.
    Configure request origin locationSet a specific IP address or location as the origin of the request. You can specify only the IP address, or the complete location (IP, country, region, and city).
    Configure resource optionsConfigure which resources are monitored based on how they are ordered, the maximum number of resources that will be evaluated, and whether the resource timing buffer should be cleared when it's full.
    Modify resource sampling optionsYou can modify how the resources are ordered (using the sampling algorithm) and the maximum number of resources to be evaluate.
    Capture page titleCapture the page title as part of the beacon, displayed in Browser Snapshots. Uncheck this setting to hide the page title for security/privacy reasons.
    Enable SPA2 monitoringMonitor single-page applications (SPAs) to detect virtual pages and correlate resources, JavaScript errors, and AJAX requests.
    Enable resource timing buffer clearing for SPAsFor SPAs, the JavaScript Agent, by default, clears the resource timing buffer after it is full and saves the data in a local buffer. You can configure the JavaScript Agent so that the resource timing buffer is not cleared to capture resource timing data. 
    Set the custom page nameThis page name is used to identify and group pages in Pages & AJAX Requests. If unchecked, the default page name consists of the hostname, port, and path.
    Filter virtual pagesConfigure rules to exclude specific virtual pages from being monitored.
    Monitor Fetch API callsBy default, the JavaScript Agent monitors Fetch API calls for all SPAs except applications using Zone libraries, including Angular applications. Only consider disabling this setting for specific use cases.
    Set AJAX request limitTo prevent an overload of AJAX requests, you can limit the number of requests sent per base and virtual pageview. The limit is 250 requests for single-page applications (SPAs) and 50 for non-SPAs.
    Filter XHR calls by URLInclude or exclude specific XHR calls to be monitored.

    Additional Manual Configurations

    The table below lists additional advanced configurations not included in the Controller UI. 

    ConfigurationSummary
    Report events with the JavaScript APIThe JavaScript API enables you to manually report events to the agent so that it can time the various parts of your virtual page loads and correlate Ajax calls to those page loads. You can also capture and report errors with this API.
    Limit beacon typesBy default, sending image beacons is disabled and beacons are only sent with Cross-Origin Resource Sharing (CORS). If you have an older browser that does not support CORS beacons, you can enable sending image beacons.
    Disable browser monitoring programmaticallyFor pages in which the JavaScript Agent was injected manually, you can disable the agent programmatically by adding a script to the header.
    Handle the window.onerror event

    If any script on your monitored web pages or library code sets the JavaScript window.onerror event, add the method ADRUM.listenForErrors() to the page immediately after setting window.onerror.

    Set Ajax request names based on captured POST parametersYou can configure the JavaScript Agent to capture POST parameters and then use the parameter(s) to name the Ajax request in Pages & Ajax Requests. This configuration enables you to identify and sort Ajax requests from the same page based on POST parameter(s).
    Set custom virtual page namesYou can configure the JavaScript Agent to use any arbitrary string (that is not necessarily a part of the URL) to name a virtual page.
    Add custom user data to a page browser snapshotYou can add user information that is specific to your application to a browser snapshot. The information is expressed as key-value pairs that are attached the JavaScript Agent configuration and later included in the beacons sent to the EUM Server.

    Configure On-Premises Hosting

    The sections below describe hosting options for on-premises setups. 

    Anchor
    config-shared-hosting-jsagent
    config-shared-hosting-jsagent
    Configure Shared-Hosting for On-Premises

    If you are using shared hosting and do not want to use the default CDN, follow these instructions to provide your own CDN for only hosting the main JavaScript Agent file (adrum-[version].js):

    1. From the Controller Admin, navigate to the Controller Settings page.
    2. Find the settings eum.jsagent.cdn.host.http and eum.jsagent.cdn.host.https.
    3. For the values of those two settings, enter the URLs to where the JavaScript Agent files are being hosted.
    4. Confirm that these URLs are used in the HTML snippet that you manually inject in the page.

    Anchor
    config-self-hosting-jsagent
    config-self-hosting-jsagent
    Configure Self-Hosting for On-Premises 

    If you are self-hosting and don't want to use the default CDN, you can follow these instructions to provide your own CDN for hosting all of the JavaScript Agent files:

    1. From the Controller Admin, navigate to the Controller Settings page.
    2. Find the settings eum.jsagent.cdn.host.http and eum.jsagent.cdn.host.https.
    3. For the values of those two settings, enter the URLs to where the JavaScript Agent files are being hosted.
    4. Confirm that these URLs are used in the HTML snippet that you manually inject in the page.

    Next Steps

    After you configure the JavaScript Agent, you inject the code snippet with one of the following methods:

    See Overview of Injection Types for information about the differences between the injection methods.


    Sv translation
    languageja
    Appd tocbox

    On this page

    Table of Contents
    maxLevel2

    Related pages

    ほとんどの場合、JavaScript エージェントはデフォルト設定で正常に動作します。ただし、特定の状況では adrum.jsをカスタマイズできます。これは、手動インジェクション スクリプトに追加するか、自動または補助インジェクションの場合は、Web アプリケーションで適切なコードを挿入することによって実行できます。

    JavaScript エージェントのカスタム構成の追加

    カスタム構成をコントローラ UI に追加してから、この構成を使用して HTML スニペットを生成できます。

    これを行うには、次の手順を実行します。

    1. [Configuration] ページを開きます。
    2. [Configure and download JavaScript Agent] をクリックします。
    3. [Advanced] セクションを展開します。
    4. テキストエリアにカスタム構成を入力します。
    5. [Save Config & Generate HTML Snippet] をクリックします。
    6. HTML スニペットをクリップボードにコピーするか、JavaScript ファイルをダウンロードします。

    オンプレミスデプロイのビーコン URL の設定

    ビーコン URL は、アプリケーションに関するメトリックを EUM サーバに送信するために使用されます。カスタム構成を作成する場合、HTML スニペットの変数 config.beaconUrlHttpconfig.beaconUrlHttps に割り当てた URL は、コントローラ管理者の [Controller Setting] ページの EUM プロパティ eum.beacon.hosteum.beacon.https.host に割り当てられた URL と同じである必要があります。

    たとえば、次の [Controller Settings] ページには、プロパティ eum.beacon.hosteum.beacon.https.host それぞれの URL appdynamics.controller.eum.beacon.hostnameappdynamics.controller.eum.beacon.https.hostname が表示されます。

    カスタム構成を含む HTML スニペットでは、次に示す変数 config.beaconUrlHttpconfig.beaconUrlHttps には、コントローラ管理者の [Controller Settings] と同じ値が設定されている必要があります。たとえば、1 つの SaaS EUM サーバと 1 つのオンプレミス EUM サーバなど、EUM サーバの複数のインスタンスを使用している場合は、いずれかの EUM サーバを指すように値を変更できます。

    Code Block
    languagejs
    <script type='text/javascript' 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>

    同期スクリプトロードと非同期スクリプトロード

    ダウンロードが完了すると、JavaScript エージェントが Ajax イベント、リソース、エラーなどのページデータのモニタリングを開始するため、adrum.js ファイルを同期的にロードすることを推奨します。(Async 属性を使用して)初めて adrum.js が非同期でロードされた場合、JavaScript エージェントは必ずしもすべてのページデータを報告しない場合があります。