Overview

Skill Level: Any

Prerequisites

You also add the hammer.js library to the application that you are developing. After you add the libraries to your application, you can use the default gesture events that are installed with Tealeaf¬ģ. You can also customize the default gesture events by adding Options to the gesture events.

Note: If your customer base uses Internet Explorer 8, do not load hammer.js in your application. Hammer.js does not support Internet Explorer 8.

The hammer.js library is not included in the Tealeaf installation package. Download the hammer.js library from the GitHub site. Tealeaf supports only hammer.js 1.1.x.

Step-by-step

  1. Configure gestures by adding the gestures module to the defaultconfiguration.js file.

    For example,

    "core": {
     "modules": {
     "gestures": {
     "events": [{
     "name": "tap",
     "target": "window"
     }, {
     "name": "hold",
     "target": "window"
     }, {
     "name": "drag",
     "target": "window"
     }, {
     "name": "pinch",
     "target": "window"
     }, {
     "name": "release",
     "target": "window"
     }],
     }
     }
    },
    "modules": {
     "gestures": {
     "options": {
     doubleTapInterval: 300
     }
     }
    }
    
     

    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.

     

     

  2. Install the hammer.js library in the application that you are developing.

  3. Set the window.innerWidth for your page.

    For example,

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

Join The Discussion

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