Collect Data From Your Web Application

This article explains how to integrate your web application with
App Experience Analytics
.
maasaas
This article explains how to integrate your web application with
App Experience Analytics
.
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-appVersion="1.0" data-use-axa-appname="true"
    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-appVersion="1.0" data-use-axa-appname="true"
      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 the
    Broadcom 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.
If you are using
the older version of the Browser Agent
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.
  • You may replace the existing script tag in the web pages with the new tag that is generated in the
    App Experience Analytics
    Admin Console.
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 the Broadcom Support.
Step 1 - Register Your Application
The first step is to register your application that you want to monitor. For more information, see the 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.
Follow these steps:
  1. Log in to
    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.
    <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-appVersion="1.0" data-use-axa-appname="true" 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.
      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 Extension 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.
        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.
      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 the
      Broadcom Support
      .
    6. Run the web application and navigate to the monitored page.
      Data is pushed to
      App Experience Analytics
      .
How to Configure Browser Agent
This video walks you through the steps to configure the Java agent with the browser agent and to download the package, troubleshoot and view data in the
App Experience Analytics
console. Also this video also shows the traces correlation from
App Experience Analytics
to Team Center.

(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.
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
    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.
      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.
    • Resource Metrics
    • 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.
      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
.