To capture touch gestures in your web application, perform the following tasks:
- Integrate the hammer.js gestures library with your application.
- 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).
- 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 Acoustic Experience Analytics (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.
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.
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.
|
![]() Note: Accompanying arrows indicate the direction (open or close) of the pinch. |
Pinch close | This gesture is a two-finger gesture.
|
![]() 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 Acoustic Experience Analytics (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. |