Overview

Skill Level: Any

Prerequisites

The configuration process is iterative. You start with one setting or feature, configure the properties that you want and then verify with the Replay team that everything is working. Then, move on to the next feature or setting. You configure Browser, Queue, Message, Serializer, and Encoder services that the SDK uses. Then, you configure the features that you want to use in your application, Performance, DOM Capture, and Geolocation.

The Configuration wizard is in the installation package. You must download and install the package before you can run the wizard. The file for the Configuration wizard is configwizard.html.

As you complete each step, verify with the Replay team that the settings you entered work.

You must know which options you want to configure and the modules and settings that you want to enable:

To configure the… You must know…
Browser service

The browser service that you want to use, either jQuery or W3C

You also need to know whether you want to specify any additional options:

  • jQuery object (jQuery only)
  • Sizzle URL (W3C only)
  • Sizzle object (W3C only)
  • Blacklist elements
  • Custom attributes
  • Links to exclude
Queue service

The queue information:

  • Target page URL
  • Max size of the queue, in messages
  • Timer interval to flush the queue irrespective of the number of messages
  • Max size (serialized queue length), for the length of the serialized queue, at whichpoint the queue is flushed
  • Whether to check the Target page availability when the UIC initializes
  • If you are testing the Target page availabilty, the time in milliseconds, to wait for a response from the Target page before the UIC shuts down

You also need to know whether you need to enable cross-domain POST messages or asynchronous XHR on page unload.

Message service

The number and type of privacy masks that you want to configure. For each mask you need:

  • MaskType
  • Target
  • ID
  • IDTypes
Serializer Whether you want to use a built-in parser or serializer if none is available. You can add more than on serializer and more than 1 parser.
Encoder Whether you want to enable the gzip encoder service.
Modules

The modules for the features that you want to enable.

For the Performance module, which provides data for the Performance reports, you need to know whether you want to:

  • Specify a render time threshold
  • Disable any of the performance data filters

For the Replay module, which determines which events and messages are used by Replay, you need to know whether you want to:

  • Disable capturing Mobile events
  • Disable screenview messages from hashchange
  • Disable scroll and window size tracking

You also need to know whether you want to record a Custom Event. You can use a custom event to trigger a DOM capture. If you are configuring DOM capture to trigger after the frames on a page load, you configure a Replay custom “load” event called “loadWithFrames”. Configuring the “loadWithFrames” event will cause the UIC to record a screenview load message with screenview name: “rootWithFrames” when the same-origin frames/iframes on the page have finished loading. The screenview “rootWithFrames” can be used as a trigger for performing a DOM Capture. To create a custom event, you need to know:

  • Name of the event
  • Target for the event
  • State for the event
DOM Capture

For DOM Capture, you need to know whether:

  • To specify a Max Length threshold for snapshots and what the threshold is
  • Frames are captured
  • To remove scripts
  • To use events to trigger DOM Capture. Remember if you want to capture a page after frames and iframes are loaded, configure a “load” trigger for the “rootWithFrames” screenview. This trigger works with the custom Replay event “loadWithFrames” that you created in the Replay module.
  • Whether you are going to use DOM Diff or full DOM Capture.
    Note: DOM Diff functionality is not supported within Hybrid Mobile apps.

At replay time, the method of capture (DOM, DIFF, or Network) is listed in Capture field in the Page statistics banner of the BBR user interface.

Geolocation

Whether to enable collecting geographic location information. When you enable capturing geographic location information, the information is collected only if the device user gave the app permission to use location data.

Note: The UI Capture library typically tracks geolocation information within the Web application. When geolocation is enabled in a hybrid mobile application, the geolocation tracking feature in the Web application should be disabled and the mobile application should use the native SDK to capture the geolocation information.

Miscellaneous settings

For Miscellaneous settings you need to know whether:

  • You want to Blacklist frames and the names of the frames
  • You want to share session data
  • Cookies are used for sessionization
  • Query Parameters are used for sessionization
  • Value needs to be hashed to derive the Session ID

 

Step-by-step

  1. Start either a Chrome or Firefox browser

    In the browser, open the configwizard.html file.

  2. Configure the browser services on the Browser Service Configuration page

    1. Navigate to the Browser Service Configuration page.
    2. Select the browser service that you want to use, either jQuery or W3C.
    3. Enter information for any Advanced Options that you want to configure.
    4. Verify that the browser service that you configured is working. If the settings are not working, repeat the configuration steps and modify the information until the settings work.
  3. Configure the queue services on the Queue Service Configuration page

    1. Navigate to the Queue Service Configuration page.
    2. Enter the queue name.
    3. Enter the queue size, in messages.
    4. Enter the target page URL.
    5. Leave the Timer Interval set to 0.
    6. Enter the Max Size (serialized queue length), if you want the queue to be flushed when the serialized queue length meets or exceeds the specified size. Leave the Max Size set to 0 if you do not want to use this setting.
    7. Indicate whether to test the Target page availability when the UIC initializes. Default is enabled.
    8. If you are testing the Target page availability, enter the time to wait for a response from the Target page.
    9. Enter information for any Advanced Options that you want to configure.
    10. Click Finish.
    11. Verify that the Queue Services that you configured are working. If the settings are not working, repeat the configuration steps and modify the information until the settings work.
  4. Configure the message service privacy masking on the Message Service Configuration page

    1. Navigate to the Message Service Configuration page.
    2. Enter the HTML ID, XPath, or Custom Attribute ID (‘attrName=attrValue’) of the element that is masked.
    3. Enter the ID Type.
    4. Enter a single CSS selector string.
    5. Enter the Mask Type for how the value is transformed.
    6. Click Finish.
    7. Verify that the Message Services Privacy Masking that you configured is working. If the settings are not working, repeat the configuration steps and modify the information until the settings work.
  5. Configure the serializers on the Serializer page

    1. Navigate to the Serializer page.
    2. Leave the Use built-in parser/serializer if none available option selected.
    3. Enter the parser functions that the SDK uses.
    4. Enter the serializer functions that the SDK uses.
    5. Click Finish.
    6. Verify that the serializers and parsers that you configured are working. If the settings are not working, repeat the configuration steps and modify the information until the settings work.
  6. Enable the encoder Service on the Encoder page

    1. Navigate to the Encoder page.
    2. Select Enable to enable encoder services.
    3. Click Finish.
    4. Verify that the encoder services are working. If the settings are not working, repeat the configuration steps and modify the information until the settings work.
  7. Configure the feature Modules that you want to use on the Modules page

    1. Navigate to the Modules page.
    2. Select the boxes for the modules that you want to enable. A checked box means that the module is enabled.
    3. Optional: For Performance Settings, use the Advanced Options to set how the Render Time is calculated for the Render Time reports, enter a renderTimeThreshold for excluding data outliers, and to turn off any predefined metrics that you do not want to capture.
    4. Optional: For the Replay module, use the advanced settings to disable capturing Mobile events, disable screenviews from hashchange, and disable scroll and window size tracking.
      • If you want to create a custom event:
        • Define the event.
        • Define the trigger or state.
      • To trigger a DOM capture after frames are loaded on a page, create a custom “load” event for “loadWithFrames.”
        1. Indicate whether you are using the TLFCookie module. Enter the cookie name and Tealeaf App Key.
        2. Click Finish.
        3. Verify that the feature modules that you configured work. If the modules are not working, repeat the configuration steps and modify the information until the modules work.
  8. Optional: On the DOM Capture page, enable DOM Capture and specify the capture options that you want

    1. Navigate to the DOM Capture page.
    2. Indicate whether you want to enable DOM Capture. If you enable DOM Capture, use the advanced options to tune the DOM Capture feature:
      • Indicate whether you want to capture child Frames or iFrames.
      • Indicate whether you want to remove scripts from the captured snapshots.
      • Disable or enable the DOM diff service. Default is enabled.
      • Enter the Max Length threshold for snapshots.
      • If you want to use events to trigger DOM Captures:
        1. Select the Event trigger. If you created a custom event in the Replay section, that event appears on the list of events. For example, to configure DOM captures to happen after frames are loaded, create a “load” trigger.
        2. Enter the screenview for the trigger. For example, to configure DOM captures to happen after frames are loaded, enter a “rootWithFrames” for the screenview.
        3. If you want to delay the capture for the triggered event, specify the delay time in milliseconds.
        4. Optional: Specify if a full DOM snapshot should be captured for this trigger, including when DOM Diff is enabled.
    3. Click Finish.
    4. Verify that the configuration you entered works. If DOM Capture is not working, repeat the configuration steps and modify the information until DOM Capture works.
  9. Optional: Enable Geolocation logging on the Geolocation page

    1. Navigate to the Geolocation page.
    2. Indicate whether you want to enable Geolocation.
    3. Click Finish.
    4. Verify that the geolocation logging works.
  10. Configure more settings on the Miscellaneous Settings page

    1. Navigate to the Miscellaneous Settings page.
    2. Enter the CSS selectors of frames to exclude from data collection.
    3. Indicate whether session data is shared.
    4. Indicate whether cookies are used for sessionization.
    5. Indicate whether a query parameter is used for sessionization.
    6. If you are using cookies for sessionization, enter the cookie name.
    7. Indicate whether the cookie name needs to be hashed to derive the session ID.
    8. Click Finish.
    9. Verify that the miscellaneous settings are working. If the settings are not working, repeat the configuration steps and modify the information until the settings work.
  11. When you are done configuring services, modules, and settings, exit the Configuration wizard.

Join The Discussion

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