Skip to content
App Experience Analytics
Documentation powered by DocOps

Collect Data From Your Web Application

Last update March 17, 2019

This article explains how to integrate your web application with CA App Experience Analytics.

Follow these steps:

Step 1 - Register Your Application

The first step is to register your application that you want to monitor. For more information, see the Manage Apps section.

Step 2 - Integrate and Start Your Web Application

The next step is add the script tag to the web pages to monitor the performance of the browser. Add this script tag to all the web pages to be monitored. The script tag instructs the Browser Agent where to download the BA.js, BAExt.js, and profile.json files from. This tag must be customized for each tenant and each app. The script tag also points to information such as web profile location, tenant ID, app ID, and app key. 

App Experience Analytics 17.3.2

Browser Agent - 2.4.0.6

The BA.js, BAExt.js, and profile.json files are combined into a single JavaScript file. As a result, a single script tag replaces the Browser Agent and Extensibility tags. The APIs in the BAExt.js are available even in the BA.js file.

The JavaScript file captures metrics using of the following modes:

  • Async or Safe Mode (Default): In this mode, the web page does not wait for the JavaScript file to download completely but continues to load the resources. While the web page loads, the JavaScript file loads asynchronously and records the metrics without impacting the end-user experience. The JavaScript file records the metrics only after the file is downloaded which usually takes a few milliseconds after the page execution because of the asynchronous loading. Use this mode if you want your application to be unaffected while the BA.js file is loading on your system.

    <script type="text/javascript" id="ca_eum_ba" src="https://<hostname>:<port>/api/1/urn:ca:tenantId:<tenantID>/urn:ca:appId:<appID>/bajs?agent=browser" data-profileUrl="https://<hostname>:<port>/api/1/urn:ca:tenantId:<tenantID>/urn:ca:appId:<appId>/profile?agent=browser" data-tenantID="<tenantID>" data-appID="<appId>" data-appKey="<appKey>" async></script>

    During the recording,

    • The Browser Agent may not capture all the metrics during the blind spot period. The blind spot period is when the BA.js file is still downloading and the web page has already started loading.

    • Metrics that were recorded using the W3C Web Timing APIs are not affected. However, some specialized instrumentation from the Browser Agent may be affected.

  • Sync or Detailed Mode: In this mode, the Browser Agent captures all the metrics. Use this mode if:

    • Any initial delay in capturing the metrics during the page load is acceptable while the BA.js file is still loading.

    • You want all the instrumentation to be loaded before the page is executed.

      <script type="text/javascript" id="ca_eum_ba" src="https://<hostname>:<port>/api/1/urn:ca:tenantId:<tenantID>/urn:ca:appId:<appID>/bajs?agent=browser" data-profileUrl="https://<hostname>:<port>/api/1/urn:ca:tenantId:<tenantID>/urn:ca:appId:<appId>/profile?agent=browser" data-tenantID="<tenantID>" data-appID="<appId>" data-appKey="<appKey>" </script>

For Extensibility, you can:

  • Download the default BAExt.js (BAExt-default.js) file from the App Experience Analytics Admin Console. After you make the required changes, upload the custom BAExt.js file using the Upload link. The maximum file size of the custom extension file that you can upload is 2 Mb. If the file size is more 2 Mb, contact CA Technologies Support.

Once you upload the file:

  • The uploaded custom BAExt.js file is written to the database and is served from the Digital Experience Collector instead of you hosting it locally.
  • All the three files (BA.js, BAExt.js, and profile.json) are concatenated to generate an artifact that you can host in your local environment. To host it locally, download the complete artifact from the Admin Console. Also ensure that you modify the path to the file in the snippet.

Note: If you host the artifact file in your local environment, any app profile changes in the Admin Console do not take effect immediately. You must download the artifact and host it again for the changes to take effect. Alternatively, you may contact CA Technologies.

Follow these steps:

  1. Log in to CA App Experience Analytics.

  2. Navigate to the MANAGE APPS page.

  3. Click on the App.

  4. Select the platform: WEB APP

    The Please add following snippet after the <head> tag to all the web pages that you want to monitor field displays the script tag.

  5. Copy the tag that is displayed on the UI. Alternatively, click the COPY TO CLIPBOARD button.

    Sample Tag
    <script type="text/javascript" id="ca_eum_ba" src="https://<hostname>:<port>/api/1/urn:ca:tenantId:<tenantID>/urn:ca:appId:<appID>/bajs?agent=browser" data-profileUrl="https://<hostname>:<port>/api/1/urn:ca:tenantId:<tenantID>/urn:ca:appId:<appId>/profile?agent=browser" data-tenantID="<tenantID>" data-appID="<appId>" data-appKey="<appKey>" async></script>
  6. Add the script tag to the web application you want to monitor.

    1. Open the source code for the web page of interest.

    2. Paste the tag into your website HTML on the page.

      Note: If the page has a <head> tag, add the snippet content immediately after the <head> tag. If <head> tag does not exist, either create one or paste the line immediately after the <body> tag. We recommend that you add the <head> tag, otherwise, some data might not be captured.

      If meta-tags exist after the <head> tag, paste the snippet after the meta-tags. For example:

      <head>

        <meta charset="UTF-8">

        <Snippet goes here after meta tags>

    3. Save and close the page.

      All configuration updates take effect when the monitored page refreshes.

    4. For Extensibility, perform the following steps to collect custom metrics using the Browser Agent APIs.

      1. Under Step 2, click the Download link to download the default extension file (BAExt-default.js).
      2. Edit the file.
      3. Click the Upload link to upload the edited extension file to Digital Experience Collector.

        Note: The maximum file size of the custom extension file that you can upload is 2 Mb. For file sizes more than 2 MB, contact CA Technologies support.

        After upload, Digital Experience Collector concatenates all the three files (BA.js, BAExt.js, and profile.json) and generates an artifact.

      4. (Optional) You can download the custom extension file.
    5. (Optional) To maximize the performance and to remove external dependencies, you can download the complete Artifact to co-host with your application. The Artifact includes the profile, BA Extension, and BA JS files.

      Note: To co-host the file, update the <src> tag in the snippet with the correct location of the BA.js file.

      If you host the artifact file in your local environment, any changes that are made to the app profile in the Admin Console do not take effect immediately. You must download and host the artifact again for the changes to take effect. Alternatively, you may contact CA Technologies.

    6. Run the web application and navigate to the monitored page.

      Data is pushed to CA App Experience Analytics.

Note:

If you are using Browser Agent 2.3 and have already added the script tags to the web pages, you can do one of the following:

  • You may continue to use the existing script tag. However, for extensibility, referencing the latest Browser Agent JavaScript file using the earlier version of the Extensibility snippet is not supported. We recommend you to replace the existing snippet with the new tag. For more information, see the Browser Agent - 2.4.0.6 section.

  • You may replace the existing script tag in the web pages with the new tag that is generated in the CA App Experience Analytics Admin Console. For more information, see the Browser Agent - 2.4.0.6 section.

App Experience Analytics 17.3.0

(Optional) Step 3 - Configure the Application Data Collection 

After you register and integrate the application with App Experience Analytics, the application is enabled to share data with App Experience Analytics. The Data Collection Profile section lets you change the default metrics that you want to collect for an application.

Note: You cannot edit or delete the default app profile. To edit the data collection profile properties, you must create a profile, and must save it with a different name after editing.

Follow these steps:

  1. Click MANAGE APPS to view applications that are already registered with CA App Experience Analytics.
  2. Select the application for which you want to enable data collection.
  3. Click WEB APP.
  4. Click Edit Profile.
  5. Select the application version from the Data Collection Profile for <App_Name> drop-down list.
  6. Select the type of data you want to collect from the Choose which data to collect drop-down list.
  7. Verify that the Data Collection option is enabled: ON | OFF
  8. Select other Options:
    • Geolocation
      Toggles Browser Agent geolocation monitoring.

      Important! If enabled, this property provides a confirmation pop-up to allow or deny geolocation.

      For the calls other than for AJAX, geolocation requires at least one callback to show performance data. The Browser Agent uses the Geolocation API for the browser. This API uses callbacks. A location for a user is not ready at the time it is requested. Instead, the location becomes available asynchronously and handled with call-back functions. This behavior affects the Browser Agent users because geolocation might not be available during a page load or page refresh.

    • Error Reporting
      Toggles the capture of JavaScript errors, AJAX errors, or both.
    • JavaScript
      Toggles the capture of JavaScript errors.
    • Ajax
      Toggles the capture of Ajax errors.
    • Browser Logging
      Toggles the logging of messages in the browser console.
    • Cookie Capture
      Toggles the capturing of the application cookies. Enables the Browser Agent to capture and report the cookies set by the application in the first payload that goes out.
      Default: False
    • DOM Change Timeout
      Maximum timeout for the soft page DOM observation.
      Default: 10000 milliseconds
      Range: 200 milliseconds to 15000 milliseconds
    • DOM Change Polling Interval
      Specifies the soft page DOM change polling interval. This value must be less than the DOM change timeout value.
      Default: 100 milliseconds
    • Range: 50 milliseconds to 1000 milliseconds
    • In the Send Data section, enter a value in milliseconds for Metric Frequency, or leave the default. Metric Frequency specifies the interval in which the Browser Agent metrics are dispatched to the collector from the browser. When the value is set to 0 milliseconds, the Browser Agent dispatches its metrics in real time. A non-zero value triggers batching of Browser Agent metrics at regular intervals as set in milliseconds. We recommend using non-zero values for this configuration. A zero value for this configuration can result in a higher number of networks calls. A frequency increase can cause batch mode to occur where multiple browser metric sets from different application requests are sent back to the collector. If you navigate away from the page before the page load metric threshold is reached, metrics are not sent.

      Note: Page load metrics do not use this property. Page load metrics are always sent when the page load timing is ready.

  9. Click SAVE.
    All configuration updates take effect when the monitored page refreshes.
  10. Run the web application and navigate to the monitored page.

Data is pushed to App Experience Analytics.

Was this helpful?

Please log in to post comments.

  1. Stig Skilbred
    2018-08-24 09:03

    The Ajax option in Error Reporting is now visible in the solution..

    1. Sunder Rosy
      2018-08-27 12:58

      Hi Stig,

      Thank you for the feedback. Will check and update the documentation shortly.

      Regards,

      Rosy