Documentation
Help CenterCommunityDevelopersAcademyStatus

Deploy the Tealeaf Web SDK

Suggest Edits

Overview

Rapidly deploy Web SDK in local environments for development and testing

Stage 1: Development environment

In the development environment, the goals for Web SDK deployment are to integrate the required files into the web infrastructure and to establish basic connectivity between the web server, the client, and the Passive Capture Application for capture.

File to add to web pages

The Web SDK JavaScript file must be included in each web page in the application that you want to monitor.

Server placement

On your web server, place the Web SDK JavaScript file with the other static files served by your site.

Include location

Every served page that requires client event tracking must have

In each page, the JavaScript file must be included in the section as follows.

<script async src="/tealeaf.js"></script>

If you place the Tealeaf Web SDK JavaScript file anywhere other than the root directory on your web server, you must adjust the src= parameter in reference to point to the correct location.

📘

Note:

You are not required to place the Web SDK JavaScript at the top of the page.

Installing Web SDK

  1. If you did not do so already, configure the JavaScript.
  2. Deploy the Tealeaf target page in the location where the library is configured to POST to it.
  3. Place the required JavaScript in the appropriate web server location.
  4. Modify the served pages to reference the JavaScript.
  5. When the JavaScript is referenced in the served pages and can post to the target page, Web SDK is operational.

Verify Stage 1

To verify that Web SDK is working properly in your Development environment, you complete the following tests.

  • No JavaScript errors on the page
    Through your web browser, visit a sampling of the served pages. Verify that the included JavaScript is not generating JavaScript errors.
  • Verify client events are being posted
    Deploy a browser monitoring tool such as Fiddler, HTTPWatch, or Firebug to verify that client events are being posted to the target page.

📘

Note:

Normal POSTs from Web SDK are asynchronous, with one exception.

  • In the POST traffic stream, look for request headers that contain X-Tealeaf® and a JSON message such as:
    {"messageVersion":"2.1.0.0","serialNumber":1,"sessions":...
    The version number varies from release to release.

📘

Note:

If Web SDK data is being forwarded to Tealeaf, through the Tealeaf Portal you can search for the Tealeaf target page to see whether any sessions are retrieved. In the Testing and Production environments, use the Portal search test.

Stage 2: Testing environment

In the Testing environment, the goals are to deploy Web SDK to verify correct operation and end-to-end monitoring of UI events, such that you can search for, replay, and report on client UI events.

Requirements for the Testing environment
Your Testing environment must meet certain requirements to complete end-to-end testing.

  • Passive Capture Application
    The Passive Capture Application must be implemented, enabled, and functioning properly. Passive Capture Application must be configured to capture the appropriate content types.
  • Browser-Based Replay
    To verify the replay of UI events, use Browser-Based Replay to verify that the UI events appear in the navigation pane.
  • Search
    You must be able to search for and retrieve specific client UI fields in the request. Verify basic search capability beforehand in both the Portal and RealiTea Viewer.
  • Reporting
    Client UI events can appear in reports that are configured through the Tealeaf Report Builder.

Installation in the Testing environment

To install and deploy in the Testing environment, follow the same steps that are used in the Development environment, modifying the JavaScript as needed to work in Testing.

  1. If you did not do so already, configure the JavaScript.
  2. Deploy the Tealeaf target page in the location where the library is configured to POST to it.
  3. Place the required JavaScript in the appropriate web server location.
  4. Modify the served pages to reference the JavaScript.
  5. When the JavaScript is referenced in the served pages and can post to the target page, Web SDK is operational.

Verify Stage 2

To validate your Web SDK deployment in your Testing environment, complete the following tests.

Generate a session with UI events in it

Using your web browser, visit the web application that is monitored by the Tealeaf Testing environment.

Requirements

  • Do not use Client-Side Capture for this test. Use Tealeaf to capture and process the data.
  • Visit a series of pages that contain UI events. Trigger all test UI events so that they are included in your captured session.
  • Generate the session so that you have a uniquely identifiable way to locate the session through search.
  • As the session is being generated, you can use Fiddler or a similar tool to review the request data to locate the Tealeaf session identifier.
  • You can also do browsing tricks such as inserting a unique string in a form field and then submitting it.
  • Be sure to close your session so that it can be indexed for search.

Replaying a captured session in BBR

After you capture a session, you replay it through Browser-Based Replay to confirm that client UI events are present. Based on your review of the replay, you can adjust configuration settings and develop replay rules, after which you can replay the session.

📘

Note:

Replay of captured sessions in RealiTea Viewer is not fully supported for Web SDK, depending on your application. Beginning in Release 8.6 or later, you use Browser-Based Replay for replay.

  1. Locate the session through search.
  2. Replay the session in Browser-Based Replay.
  3. Switch to request view.
  4. Step through the pages of the session.
  5. At the top of the display panel, the following link displays.
    Click here to view Step Attributes
  6. This link indicates that JSON data was captured as part of the session, which means that Web SDK is submitting it correctly.
  • You can click the link to review the JSON data in a readable form.
  • From this area, you can create Tealeaf events and step attributes of the data. See [Create events for client UI data](Create events for client UI data).
  • When the Tealeaf events are created from the JSON data, those events are marked in subsequent sessions that are captured by Tealeaf. Then, you can search for them using the Portal interface.
  1. To ensure a good replay experience, you can create replay rules or modify your existing ones to properly manage the replay of sessions that are captured by Tealeaf Web SDK. See [Tweak replay rules](Tweak replay rules).
  2. After Tealeaf events are created, you can create reports in the Tealeaf Report Builder with these events to begin tracking client-side events. See [Verify Tealeaf Portal reporting](Verify Tealeaf Portal reporting).
  3. Repeat the tests in this section until you achieve a satisfactory replay.

Create events for client UI data

After you implement Web SDK, you can test for the availability of data for eventing purposes through Browser Based Replay.

Browser Based Replay enables the creation of attributes and events from the JSON steps that are submitted from the Tealeaf client frameworks. Using this simple mechanism, you can quickly create the step attributes and events that are needed to capture traffic from the client interface, as submitted by Web SDK.

📘

Note:

If you are upgrading from a Web SDKversion from 2012.06.01.1 or earlier, the following request fields are not populated by this version of Web SDK:

  • TLT_CUI_URL
  • TLT_CUI_APPLICATION_NAME

Any eventing, indexing, or search templates configured based on the presence of these request fields do not work for Web SDK.

Tweak replay rules

Client UI events often require replay rules to manage proper display of them. A replay rule is an action that is applied to session data before replay for purposes of enhancing the replay experience.

📘

Note:

Replay rules are stored in a user profile. When Web SDK is deployed in a production environment, you make this profile available to all RealiTea Viewer and Browser-Based Replay users.

Replay rules can be applied through Browser-Based Replay.

Verify Tealeaf Portal reporting

You can review the following reports to verify that client UI events are being posted to and submitted to the reporting databases.

After you create an event with Step-Based Eventing in Browser-Based Replay, wait at least 1 hour for report data to gather.

Then, you can create a simple report in the Tealeaf Report Builder containing your event and constrained to the current date as the focus period. If data is present, then the reporting functions are working for Web SDK data.

Stage 3: Production environment

After you complete all of the tests in your Testing environment, you can deploy the Web SDK solution to your Production environment.

Deploy profile

If you develop profile rules or modify RealiTea Viewer settings in your Testing environment, make the changes available to all RealiTea Viewer and Browser-Based Replay users who can access the Production environment.

Install in Production

To install and deploy in the Production environment, follow the same steps that are used in the Development environment, modifying the JavaScript as needed to work in Production.

  1. If you did not do so already, configure the JavaScript.
  2. Deploy the Tealeaf target page in the location where the library is configured to POST to it.
  3. Place the required JavaScript in the appropriate web server location.
  4. Modify the served pages to reference the JavaScript.
  5. Web SDK is operational when the JavaScript is referenced in the served pages and can post to the target page.
    Verify Stage 3
    Repeat all tests that you completed in Development (Stage 1) and Testing (Stage 2) in the Production environment.

Updated 6 months ago