Skip to content
CA Experience Collector
Documentation powered by DocOps

Add the Snippet to Web Pages

Last update March 5, 2018

The JavaScript snippet must be added into the application pages. You can add the snippet automatically or manually.

JavaScript Snippet for the Browser Agent

Snippet files instruct the Browser Agent where to download the BA.js profile and the BAExt.js file. The snippet must be customized for each tenant and each app.  Automatic and manual snippet injection use this content.

The snippet.basnippet snippet file for default-tenant and default-app has the following content:

<script type="text/javascript" id="ca_eum_ba" src="http://<DxC_host:port>/api/1/urn:ca:tenantId:default-tenant/urn:ca:appId:default-app/bajs?agent=browser" data-profileUrl="http://<DxC_host:port>/api/1/urn:ca:tenantId:default-tenant/urn:ca:appId:default-app/profile?agent=browser" data-tenantID="default-tenant" data-appID="default-app" data-appKey="b0361800-4736-11e6-b8e5-bddc75280658"></script>

Note: Replace DxC_host and port with host and port of the Digital Experience Collector server.

If you use an extension for the Browser Agent, you add the following content to the snippet file:

<script type="text/javascript" id="ca_eum_ba_ext" src="http://<DxC_host:port>/api/1/urn:ca:tenantId:default-tenant/urn:ca:appId:default-app/extjs?agent=browser"></script>
<script type="text/javascript" id="ca_eum_ba" src="http://<DxC_host:port>/api/1/urn:ca:tenantId:default-tenant/urn:ca:appId:default-app/bajs?agent=browser" data-profileUrl="http://<DxC_host:port>/api/1/urn:ca:tenantId:default-tenant/urn:ca:appId:default-app/profile?agent=browser" data-tenantID="default-tenant" data-appID="default-app" data-appKey="b0361800-4736-11e6-b8e5-bddc75280658"></script>

Note: For more information about extending the Browser Agent, see Extend the Browser Agent.

Add the JavaScript Snippet Automatically to Web Pages

The following procedure describes how to add JavaScript snippet automatically to web pages.

Follow these steps:

  1. Create the snippet.basnippet snippet file for default-tenant and default-app with the default content.

    Note: If you use an extension for the Browser Agent, add the extension content to the snippet file:

  2. Configure Browser Agent with this snippet file. The Browser Agent gets BA.js, BAExt.js, and profile file from the Digital Experience Collector server based on the snippet.
    The following example displays the Browser Agent snippet file. The example specifies the location and tenant or app ID of the Digital Experience Collector:

    <script type="text/javascript" id="ca_eum_ba"
    src="http://<DxC_host:port>/api/1/urn:ca:tenantId:default-tenant/urn:ca:appId:default-app/bajs?agent=browser"
    data-profileUrl="http://<DxC_host:port>/api/1/urn:ca:tenantId:default-tenant/urn:ca:appId:default-app/profile?agent=browser"
    data-tenantID="default-tenant"
    data-appID="default-app"
    data-appKey="b0361800-4736-11e6-b8e5-bddc75280658">
    </script>

    Note: Replace the italicized text with the actual profile information.

  3. (Optional) If custom tenants and applications were created other than the default-tenant and default-app, create a separate snippet file for each application under each tenant.

    Note: A tenant can have multiple applications but an application can only belong to one tenant.Push the new or customized profiles from the profile directory structure to Digital Experience Collector using the following command:

  4. Push the new or customized profiles from the profile directory structure to the Digital Experience Collector using the following command:

    ./uploadBA.sh  -baDir   <DigitalExperienceCollector_Home>/browserAgent/wa/

Enable or Disable Automatic JavaScript Snippet Injection

After you install the Browser Agent, configure the IntroscopeAgent.profile file to enable automatic JavaScript snippet injection for monitoring web pages. If automatic snippet injection is disabled, you can use the Browser Agent by manually inserting the snippet and enabling response cookie for business transaction matching support and end-to-end transaction trace correlation.

Follow these steps:

  1. Go to <Agent_Home>/core/config and open the IntroscopeAgent.profile file in a text editor.
  2. Go to this section:

    ##############################################
    # Browser Agent Business Transaction Monitoring properties
  3. Enable (true) or disable (false) automatic snippet injection into a web page using the Java agent:

    introscope.agent.browseragent.autoInjectionEnabled=true/false
  4. Enable and specify values for the following properties. Use the examples in the file as a guide.

    introscope.agent.browseragent.autoInjection.appID=<key1>
    Specifies that the agent gets the snippetLocation and the includeURLsRegex property of the app ID.
    introscope.agent.browseragent.autoInjection.<key1>.snippetLocation=<full path to the snippet file>

    Specifies the full file path to the snippet file. For example, the path can be to within the wily folder or the application location.

    Note: For information about editing the snippet file, see the Browser Agent configuration information in Browser Agent Profile Management.
    introscope.agent.browseragent.autoInjection.<key1>.includeURLsRegex=<Regex>
    Specifies that the agent inserts the snippet in only those URLs that match the Java regular expression.

    The following example matches all URLs with path "/mypage.jsp":

    introscope.agent.browseragent.autoInjection.<key1>.includeURLsRegex=.*/mypage.jsp

    The following example matches all URLs except for the path including “webstat.html”:

    introscope.agent.browseragent.autoInjection.default.includeURLsRegex=(?!.*webstat.html).*
  5. Save and close the file.

More Information:

Advanced Browser Agent Configuration

Add the JavaScript Snippet Manually to Web Pages

You can manually add the JavaScript snippet to web pages for the following use cases:

  • For business transaction matching support and end-to-end transaction trace correlation, enable response cookies with manual snippet injection, and then add the snippet content manually.
  • For no business transaction matching support and end-to-end transaction trace correlation, add the snippet content manually.

End-to-end correlation means that traces associate the browser request with the application request (useful when browser and application transaction traces are created).

Follow these steps:

  1. Go to <Agent_Home>/core/config and open the IntroscopeAgent.profile file in a text editor.
  2. Go to this section:

    ###############################################
    Browser Agent Business Transaction Monitoring properties
  3. Change the following property to FALSE:

    introscope.agent.browseragent.autoInjectionEnabled=FALSE
  4. Save and close the file.

  5. Open each HTML page that you want to monitor. Paste the  snippet content as follows:

    In the following cases, 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>

    If the page has a <head> tag, add the snippet content immediately after the <head> tag.

  6. Restart the application.

Monitor Multiple Apps for the Same Agent

You can monitor multiple apps for the same agent by using multiple snippet content files per agent. Each snippet content file has one or more script tags with the Browser Agent JavaScript files and profile. This script tag matches each application with its own JavaScript files and profile.

Note: For more information about the snippet file, see Browser Agent Profile Management

Follow these steps:

  1. Go to <Agent_Home>/core/config and open the IntroscopeAgent.profile file in a text editor.
  2. Go to this section:

    ##############################################

    # Browser Agent Business Transaction Monitoring properties

    ##############################################

  3. Enable the following properties by uncommenting and adding them, and specifying property values, for example:
    introscope.agent.browseragent.autoInjection.appID=<APP1>,<APP2>
    introscope.agent.browseragent.autoInjection.<APP1>.snippetLocation=<snippet content file location>
    introscope.agent.browseragent.autoInjection.<APP1>.includeURLsRegex=<URI>
    introscope.agent.browseragent.autoInjection.<APP2>.snippetLocation=<snippet content file location>
    introscope.agent.browseragent.autoInjection.<APP2>.includeURLsRegex=<URI>
  4. Save and close the file.

Was this helpful?

Please log in to post comments.