The Acoustic Analytics Developer Hub

Welcome to the Acoustic Analytics developer hub. You'll find comprehensive guides and documentation to help you start working with Acoustic Analytics as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    

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 UI Capture 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 a 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 are not supported. The UI Capture library 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 .

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


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.


tap hold


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.


double tap

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:

  1. taps and holds in 1 location of the screen
  2. continues to engage screen while it moves up or down
  3. 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 vertical


Swipe horizontally


This gesture is a one-finger gesture.
For a swipe horizontally gesture,one-finger:

  1. taps and holds in 1 location of screen
  2. continues to engage screen while it moves left or right
  3. 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 horizontal

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:

  1. tap and hold in 1 location of the screen
  2. maintain contact with the screen while the fingers move apart from each other in any direction
  3. lift from the screen at a new location.

pinch open
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:

  1. tap and hold in 1 location on the screen
  2. maintain contact with the screen while the fingers move toward each other
  3. lift from the screen at a new location.

pinch
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 .
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 show the images that are displayed in BBR:
Tap gestures

Unresponsive gesture
Image displayed in Replay

Unresponsive tap

unresponsive tap


Unresponsive double tap


unresponsive double tap


Unresponsive tap and hold


unrepsonsive tap and hold

Swipe gestures

Unresponsive gesture
Image displayed in Replay

Swipe vertically

swipe vertically
Note: Accompanying arrows indicate the direction of the swipe.


Swipe horizontally


swipe horizontally
Note: Accompanying arrows indicate the direction of the swipe.

Resize gestures

Unresponsive gesture
Image displayed in Replay

Pinch open

pinch open
Note: Accompanying arrows indicate the direction of the pinch.


Pinch close


pinch close
Note: Accompanying arrows indicate the direction of the pinch.

Updated 2 days ago


Gestures configuration for UI Capture


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.