Overview

Skill Level: Any

Step-by-step

  1. Stage 1: Development environment

    In the development environment, the goals for UI Capture 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 UI Capture 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 UI Capture JavaScript file with the other static files served by your site.

    Include location

    Every served page that requires client event tracking must have <script> tags in it to load the UI Capture JavaScript file.

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

    <script async src="https://dw1.s81c.com/customer-engagement/tealeaf.js"></script>

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

    Note: You are not required to place the UI Capture JavaScript at the top of the page.

    Installing UI Capture

    1. If you did not do so already, configure the JavaScript.
    2. Deploy the IBM 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, UI Capture is operational.

    Verify Stage 1

    To verify that UI Capture 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 UI Capture 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 UI Capture data is being forwarded to IBM® Tealeaf, through the IBM Tealeaf Portal you can search for the IBM Tealeaf target page to see whether any sessions are retrieved. In the Testing and Production environments, use the Portal search test.

     
  2. Stage 2: Testing environment

    In the Testing environment, the goals are to deploy UI Capture 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.

    • IBM® Tealeaf® 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 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 IBM 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 IBM 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, UI Capture is operational.

    Verify Stage 2

    To validate your UI Capture 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 IBM Tealeaf Testing environment.

    Requirements

    • Do not use Client-Side Capture for this test. Use IBM 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 IBM 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 UI Capture, 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 UI Capture is submitting it correctly.
      • You can click the link to review the JSON data in a readable form.
      • From this area, you can create IBM Tealeaf events and step attributes of the data. See Create events for client UI data.
      • When the IBM Tealeaf events are created from the JSON data, those events are marked in subsequent sessions that are captured by IBM Tealeaf. Then, you can search for them using the Portal interface.
    7. 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 IBM Tealeaf UI Capture. See Tweak replay rules.
    8. After IBM Tealeaf events are created, you can create reports in the IBM Tealeaf Report Builder with these events to begin tracking client-side events. See Verify IBM Tealeaf Portal reporting.
    9. Repeat the tests in this section until you achieve a satisfactory replay.

    Create events for client UI data

    After you implement UI Capture, 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 IBM 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 UI Capture.

    Note: If you are upgrading from a UI Capture version from 2012.06.01.1 or earlier, the following request fields are not populated by this version of UI Capture:

    • 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 UI Capture.

    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 UI Capture 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 IBM Tealeaf Portal reporting

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

    After you create an IBM Tealeaf 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 IBM 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 UI Capture data.

  3. Stage 3: Production environment

    After you complete all of the tests in your Testing environment, you can deploy the UI Capture 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 IBM 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, UI Capture is operational.

    Verify Stage 3

    Repeat all tests that you completed in Development (Stage 1) and Testing (Stage 2) in the Production environment.

Join The Discussion

Your email address will not be published. Required fields are marked *