Gestures configuration for UI Capture

To capture touch gestures in your web application, perform the following tasks:

1. Integrate the hammer.js gestures library with your application.
2. Take the gestures module (tealeaf.gestures.js) from the UI Capture SDK release bundle and add it to your UI Capture JS file. Ensure the module is added at the end of the library source (tealeaf.js or tealeaf.min.js) but before the configuration and invocation of TLT.init (defaultconfiguration.js).
3. Update the UI Capture configuration to enable the gestures module and optionally add module specific configuration.

hammer.js library

UI Capture uses the hammer.js library to enable gesture capture. The hammer.js library can be found and downloaded through GitHub, here: https://github.com/hammerjs/hammer.js/tree/1.1.x

Note: hammer.js version 2 and above is not supported. The UI Capture SDK only supports hammer.js version 1.X.X.

hammer.js limitations

• hammer.js does not support Internet Explorer 8. If your customer base is using Internet Explorer 8, do not load hammer.js.
• hammer.js depends on touch events in the browser to work. Touch events are canceled in chrome =<35, the native android browser, and webviews in android apps. Because of this the end points of gesture events are not accurate and both the start and end coordinates of pinches and swipes are reported as the same. Because events are canceled, slower swipes may also not be captured. the option dragMinDistance sets how many pixels a finger must be moved along the screen before the swipe is captured. By default the value is set to 10. Because of the touch event canceling in the mentioned browsers the swipe event might be canceled before it reaches the 10 pixel threshold.
• There is a limitation with mobile Safari on iOS7. During resize events, clientX and clientY can be reported as negative values causing events to replay in the wrong position.
• To replay events correctly, window.innerWidth must be updated correctly. To ensure that the width is set correctly, include the following meta tag in the head of your application pages:

  <meta name="viewport" content="width=device-width">​​​​​​

• Pinch gestures that cause web content to scale by “zoom-in/zoom-out” are currently not supported and may not replay correctly for certain mobile browsers.

Gestures configuration object

To enable the Gestures module, add the following module specific configuration object to the core configuration:

"core": {
    "modules": {
        "gestures": {
            "enabled": true,
            "events": [
                {
                    "name": "tap",
                    "target": window
                },
                {
                    "name": "hold",
                    "target": window
                },
                {
                    "name": "drag",
                    "target": window
                },
                {
                    "name": "pinch",
                    "target": window
                },
                {
                    "name": "release",
                    "target": window
                },
                {
                    "name": "unload",
                    "target": window
                }               
            ]
        }
    }

}

Add to your page

To replay events correctly, window.innerWidth must be updated correctly. To insure that the width is set correctly, include this code in the head for your page

<meta name="viewport" content="width=device-width">

Example Gestures options configuration

This example shows the gestures module configuration option for specifying the maximum interval (in milliseconds) between two successive tap events so that they are processed as a doubletap gesture.

"modules": {
    "gestures": {
        "options": {
            "doubleTapInterval": 300
        }
    }
}

Gesture events captured

Gestures that are used to select items in an application or to adjust views in the application are captured by Tealeaf.

Tap gestures

This table lists and describes the tap gestures that are captured from web and mobile apps.

Note: The default usability request for traffic type=MOBILE_APP in native and hybrid apps is taps and swipes, never clicks. Thus, if you are requesting usability data for the MOBILE_APP traffic type, request metrics for gestures (Gestures – type 11), such as taps, double taps, tap and hold, pinch, and spread. Otherwise, heatmaps in the overlay will not show data.

If you are using the webview traffic type for hybrid apps, configure Tealeaf to capture all gestures.

Note: The arrows that illustrate the direction of a swipe or pinch gesture are not supported by the Internet Explorer browser.

Gesture name	Description	Image displayed in Replay
Tap	This gesture is a one-finger gesture. For a tap gesture, one-finger taps and lifts from the screen in 1 location.
Tap and Hold	This gesture is a one-finger gesture. For a Tap and Hold gesture, one-finger presses and stays on the screen until information is displayed or an action occurs. Note: The response to a Tap and Hold gesture can vary from one application to another. For example, a Tap and Hold gesture might display an information bubble, magnify content under the finger, pr present the user with a context menu.
Double tap	This gesture is a one-finger gesture. For a double tap gesture, one-finger taps twice in close succession in 1 location of the screen.

Swipe gestures

This table lists and describes the swipe gestures that are captured from web and mobile apps.

Gesture name	Description	Image displayed in Replay
Swipe vertically	This gesture is a one-finger gesture. For a swipe vertically gesture, one-finger: taps and holds in 1 location of the screen continues to engage screen while it moves up or down lifts from the screen in different location. Note: The initial tap becomes lighter in color, while the destination is highlighted by a darker color.
Swipe horizontally	This gesture is a one-finger gesture. For a swipe horizontally gesture,one-finger: taps and holds in 1 location of screen continues to engage screen while it moves left or right lifts from the screen in different location. Note: The initial tap becomes lighter in color, while the destination is highlighted by a darker color.

Resize gestures

This table lists and describes the resize gestures that are captured from web and mobile apps.

Gesture name	Description	Image displayed in Replay
Pinch open	Sometimes referred to as a spread gesture, this is a two-finger gesture. For a pinch open gesture, 2 fingers: tap and hold in 1 location of the screen maintain contact with the screen while the fingers move apart from each other in any direction lift from the screen at a new location.	Note: Accompanying arrows indicate the direction (open or close) of the pinch.
Pinch close	This gesture is a two-finger gesture. For a pinch close resize gesture, 2 fingers: tap and hold in 1 location on the screen maintain contact with the screen while the fingers move toward each other lift from the screen at a new location.	Note: Accompanying arrows indicate the direction (open or close) of the pinch.

Unresponsive gesture events captured

Unresponsive gestures are gestures that do not respond when a user tries to select items in an application or tries to adjust views in the application. Like other gesture events, unresponsive gestures are captured by Tealeaf.

Unresponsive gestures are displayed graphically in BBR as orange outlined icons accompanied by a circled “X”. The circled “X” denotes that the gesture was unresponsive. For example, if a double tap gesture did not yield a response in the mobile application, then at replay time that gesture is displayed with the following icon in BBR:

The following table lists the unresponsive gestures that are captured from web and mobile apps and shows the images that are displayed in BBR:

Unresponsive gesture	Image displayed in Replay
Tap gestures
Unresponsive tap
Unresponsive double tap
Unresponsive tap and hold
Swipe gestures
Swipe vertically	Note: Accompanying arrows indicate the direction of the swipe.
Swipe horizontally	Note: Accompanying arrows indicate the direction of the swipe.
Resize gestures
Pinch open	Note: Accompanying arrows indicate the direction of the pinch.
Pinch close	Note: Accompanying arrows indicate the direction of the pinch.