## Overview After you install Tealeaf, you complete several tasks to implement Tealeaf functions in your application. These tasks involve modifying your application to capture controls, events, and screen views. Before you can implement Tealeaf, perform these tasks: * Install the Tealeaf SDK for Android development in your app. For information, see [Getting Started with Tealeaf SDK for Android](doc:getting-started-with-acoustic-experience-analytics-tealeaf-sdk-for-android). * Enable gestures. Otherwise, Overstat does not work. For information about CX Overstat on Cloud, see How do I use snapshots and overlays with CX Overstat on Cloud add-on? in the Acoustic Analytics Help Center. ## Configure the logging screen layout for Android Mobile App session replay Tealeaf has functions to log screen layouts for screenviews of native mobile app sessions. You can replay a mobile app session in cxImpact Browser Based Replay as you would an HTML web session instead of viewing the mobile app session as a series of screen captures. The screen layouts of the native mobile app sessions are captured in Tealeaf JSON format. The screen layouts are then sent back to replay server. The replay server uses a template engine, which interprets the JSON into HTML format. You can then replay the screen layout from the native mobile app session as HTML pages in cxImpact Browser Based Replay. There are several advantages to using JSON data to replay mobile app session over screen captures. * Reduce bandwidth. Screen captures for each screenview generate relatively large image data. It not only consumes large amounts of wireless and cellular bandwidth, but it also consumes more memory inside the device. It also impacts the app performance. * Mask sensitive information. You cannot mask sensitive information in a screen capture. When you use JSON data to replay mobile app sessions, you can mask EditTexts by adding View IDs to the MaskIdList attribute in TealeafBasicConfig.properties. * Draw user interactions (UI events) onto the HTML pages that are created from the JSON data. **TealeafBasicConfig.properties changes** For native app session replay to be activated, you must set LogViewLayoutOnScreenTransition to true. If you do not, the library functions as it currently does. [block:code] { "codes": [ { "code": "#Capture native layout\nLogViewLayoutOnScreenTransition = true", "language": "text" } ] } [/block] During predeployment, you must perform all the replay cases to collect all the images with GetImageDataOnScreenLayout set to true. This creates a large payload sent to server that contains base64 images that are used for replay. When the application is ready to be deployed to Play Store, GetImageDataOnScreenLayout must be changed to false. [block:code] { "codes": [ { "code": "#Current only done on ImageView\nGetImageDataOnScreenLayout = true", "language": "text" } ] } [/block] **Understand your activity** In Android, an Activity can be considered a page, which is displayed on mobile device. By default, you should record an activity that is displayed. For more information, see [http://developer.android.com/training/basics/activity-lifecycle/starting.html](http://developer.android.com/training/basics/activity-lifecycle/starting.html). You can record an activity that is displayed, by placing the following information in the OnCreate method. [block:code] { "codes": [ { "code": "// this will indicate logical page name.\nTealeaf.logScreenview(activity, \"Name\", ScreenviewType.LOAD);\n// this will get layout of page after it being created.\nTealeaf.logScreenLayoutOnCreate(activity, \"Name\");", "language": "java" }, { "code": "// this will indicate logical page name.\nTealeaf.logScreenview(activity, \"Name\", ScreenviewType.LOAD);\n// this will get layout of page after it being created.\nTealeaf.logScreenLayoutOnCreate(activity, \"Name\");", "language": "kotlin" } ] } [/block] If you need to log a layout, you can enable the AutoLayout controller in your application which gives that ability to log a screen layout without making additional changes to your application code. The Tealeaf Android SDK can use the settings that are defined in TealeafLayoutConfig.json to log type 10 screen layouts for screenviews of native mobile application sessions. The AutoLayout controller also enables the application to automatically continue logging type 10 screen layouts when it resumes to the foreground. You can replay a mobile app session in cxImpact Browser Based Replay as you would an HTML web session instead of viewing the mobile app session as a series of screen captures. TealeafLayoutConfig.json is in the assets folder and is formatted as a JSON file. ## Edit TealeafLayoutConfig.json to configure Autolayout to log screen layouts. (Sub-entries) ##ScreenChange This entry replaces do in Tealeaf SDK 10.3.4 (and later). *Boolean value* Indicates if the screen should be tracked or not. true (Capture Type 2s for this screen): Tracks the screen. false (Don't Capture Type 2s for this screen): Does not track the screen. *Example*: To enable tracking for the screen: "ScreenChange": true ##DisplayName This entry is replacing screenViewName in Tealeaf SDK 10.3.4 (and later). *String value* Provides the name of the screen to be shown during replay, instead of showing the view controller name or activity name. DisplayName is displayed during replay in the navigation list. If DisplayName is empty, view controller class name is used. For example, the DisplayName for a payments page might be "Payment Screen". *Example*: To set the value of DisplayName to Payment Screen: "DisplayName": "Payment Screen" ##CaptureLayoutDelay This entry is replacing delay in Tealeaf SDK 10.3.4 (and later). *Numeric value* The delay in milliseconds before Tealeaf SDK takes a layout capture of a screen. Increasing the value of this setting increases the amount of time that must pass between when the layout is loaded and when the layout logging action occurs. The CaptureLayoutDelay value is used for ScreenChange and ScreenShot. *Example*: To set the delay between layout load and layout logging to 500 milliseconds: "CaptureLayoutDelay": 500 ##ScreenShot This entry is replacing takeScreenShot in Tealeaf SDK 10.3.4 (and later). Note that takeScreenShot applied only for type 2 load events but ScreenShot applies to type 2, 4, 10, 11. *Boolean value* Indicates whether or not to capture screenshots on this screen. true (Capture screenshots on type 2, 4, 10, 11): Takes a screen capture. false (Don't capture screenshots on this screen): Does not take a screen capture. If you do not want Tealeaf SDK to take any screenshots on a specific screen, set ScreenShot to false. *Example*: To turn on screen capturing for the screen activity: "ScreenShot": true Note: Android SDK per screen configuration is not supported in this release. Use IBMGlobalSettings to enable/disable screenshot. ##CaptureUserEvents This entry is replacing CaptureScreenContents in Tealeaf SDK 10.3.4 (and later). *Boolean value* Indicates whether or not to track user events like type 4s or 11s. true (Capture type 4, 11): Tealeaf SDK resumes capturing user events (type 4, 11) on the specified screen. false (Don't capture type 4, 11): Tealeaf SDK pauses, does not capture type 4, 11 events, and based on the value of CaptureScreenVisits, captures screen load/unload events. *Example*: To turn on user event capturing for the screen activity: "CaptureUserEvents": true ##CaptureLayoutOn *Numeric value* The event to capture layout on. Never, or on first user gesture, or on screen change. 2 (Capture Layout on screen change): Tealeaf SDK captures the layout as soon as the view controller is loaded. 1 (Capture Layout on first user gesture): Tealeaf SDK captures the layout after the end user makes a first gesture on a given view controller. 0 (Don't Capture Layout): the layout is not captured. *Example*: To capture layout on screen changes: "CaptureLayoutOn": 2 ##CaptureScreenshotOn *Numeric value* The event to capture screenshots for view controller load events: Never, or on first user gesture, or on screen changes. 2 (Capture screen load screenshot on screen change): Captures screen load screenshot on screen changes. Tealeaf SDK captures the screenshot as soon as the view controller is loaded. 1 (Capture screen load screenshot on first user gesture): Tealeaf SDK captures the screenshot after the end user makes a first gesture on a specified view controller. 0 (Don't capture screen load screenshot): Does not take a screen capture. Note that even if CaptureScreenshotOn is set to 0 and ScreenShot is true, the Tealeaf SDK continues to capture screenshots on other user events, such as type 4 and type 11. CaptureScreenshotOn applies only to screenshots on view controller load. *Example*: To capture screen load screenshot on screen changes: "CaptureScreenshotOn": 2 Note: The Android SDK does not support this property in this release. ##CaptureWebViewScreenshotOn *Numeric value* The event to capture the first screenshot on for a web view, if there is any. 2 (Capture webview screen load screenshot on screen change): Captures the webview screen load screenshot on screen changes. 1 (Capture webview screen load screenshot on first user gesture): Captures the webview screen load screenshot on the first user gesture. 0 (Don't capture webview screen load screenshot): Does not capture the webview screen load screenshot. *Example*: To capture webview screen load screenshot on screen changes: "CaptureWebViewScreenshotOn": 2 ##NumberOfWebViews This entry is replacing numberOfWebviews and isWebView in Tealeaf SDK 10.3.4 (and later). If you set isWebView = false in earlier releases, you can now set NumberOfWebViews = 0. Non-zero values for NumberOfWebViews indicate the number of web views on a view controller. *Numeric value* Indicates the amount of webviews on the page. Default value is 0. ##CaptureScreenVisits *Boolean value* Indicates whether you want type 2 objects on pages that you set CaptureUserEvents to false. This property helps you understand how your users are using your application by showing how they get to a page. Default value is true. If you do not want to track screen load/unload events, set this entry to false. CaptureScreenVisits applies only if CaptureUserEvents = false. If CaptureUserEvents = true, CaptureScreenVisits is ignored and load/unload events are tracked because it doesn't make any sense to track user events on a screen where visits are not tracked. ##AppendMapIds *JSON* Assigns an identifier to a target item. You can assign a readable identifier to the mid that maps to the target item. You can then configure events to fire when the identifier is encountered. You can use the same identifier for Android devices as well as iOS devices. When you assign the same identifier to your Android and iOS devices, you can create a single event in Event Manager that fires on the identifier. The event fires for both Android and iOS devices. *Example*: "AppendMapIds": { "[PWDV,0][ABOL,0][FL,0][TH,0][LL,0][TW,0][LL,1][LL,0]": { "mid": "LoginButton" }, "ibm.com.demoapp.main_activity_login:id\/send": { "mid": "LoginButton" } Uses the mid setting to assign an identifier to two targets. The first target is for an iOS device and the second target is for an Android device. The target for both devices is identified as LoginButton. You can create a single event that fires when LoginButton is encountered in either application. The following snippet shows an example of the TealeafLayoutConfig.json file. [block:code] { "codes": [ { "code": "{\n \"AutoLayout\": {\n \"IBMGlobalScreenSettings\": {\n \"ScreenChange\": true,\n \"DisplayName\": \"\",\n \"CaptureLayoutDelay\": 500,\n \"ScreenShot\": false,\n \"NumberOfWebViews\": 0,\n \"CaptureUserEvents\": true,\n \"CaptureScreenVisits\": true,\n \"CaptureLayoutOn\": 2,\n \"CaptureScreenshotOn\": 0\n },\n \"PaymentActivity\": {\n \"ScreenChange\": false,\n \"DisplayName\": \"The Payment Screen\",\n \"CaptureLayoutDelay\": 0,\n \"ScreenShot\": false,\n \"NumberOfWebViews\": 0,\n \"CaptureUserEvents\": false,\n \"CaptureScreenVisits\": true,\n \"CaptureLayoutOn\": 0,\n \"CaptureScreenshotOn\": 0\n }\n },\n \"AppendMapIds\": {\n \"[w,9290],[v,0]\": {\n \"mid\": \"ASimpleUIView\"\n },\n \"tag2999999\": {\n \"mid\": \"giveAdditionalId1\"\n },\n \"idxPathValue\": {\n \"mid\": \"giveAdditionalId2\"\n }\n }\n}", "language": "json" } ] } [/block] You can also manually configure a screen to log a layout by adding the following code snippet. [block:code] { "codes": [ { "code": "Tealeaf.logScreenLayout(activity, \"Name\", delayInMS);", "language": "json" }, { "code": "Tealeaf.logScreenLayout(activity, \"Name\", delayInMS);", "language": "java" } ] } [/block] ** Capture specific pages by pausing and resuming the library** There are two ways of pausing and resuming the library: * Edit TealeafLayoutConfig.json. This is the preferred method. **Edit TealeafLayoutConfig.json** By default, if you are missing the IBMGlobalScreenSettings section, you have the following defaults, which capture all pages, events, and gestures, but no screenshots: [block:code] { "codes": [ { "code": "\"AutoLayout\": {\n \"IBMGlobalScreenSettings\": {\n \"ScreenChange\": true,\n \"DisplayName\": \"\",\n \"CaptureLayoutDelay\": 500,\n \"ScreenShot\": false,\n \"NumberOfWebViews\": 0,\n \"CaptureUserEvents\": true,\n \"CaptureScreenVisits\": true,\n \"CaptureLayoutOn\": 2,\n \"CaptureScreenshotOn\": 0\n },\n},\n\"AppendMapIds\": {}", "language": "json" } ] } [/block] You use CaptureUserEvents to indicate that you want to pause the library and no longer capture information on a page. To pause the library, set CaptureUserEvents to false. To resume the library, set CaptureUserEvents to true. Remember that pausing the library pauses only capture of user events. If you do not want to capture screens at all, set ScreenChange to false. If you do not want to capture screen visits, set CaptureScreenVisits to false. For example, to capture all data except for user events on "FirstViewController", which is the first page, enable the library to resume on "SecondViewController", which is the second page. [block:code] { "codes": [ { "code": "{\n \"AutoLayout\": {\n \"IBMGlobalScreenSettings\": {\n \"ScreenChange\": true,\n \"DisplayName\": \"\",\n \"CaptureLayoutDelay\": 500,\n \"ScreenShot\": false,\n \"NumberOfWebViews\": 0,\n \"CaptureUserEvents\": true,\n \"CaptureScreenVisits\": true,\n \"CaptureLayoutOn\": 2,\n \"CaptureScreenshotOn\": 0\n },\n \"FirstViewController\": {\n \"ScreenChange\": false,\n \"DisplayName\": \"First Screen\",\n \"CaptureLayoutDelay\": 500,\n \"ScreenShot\": false,\n \"NumberOfWebViews\": 0,\n \"CaptureUserEvents\": false,\n \"CaptureScreenVisits\": false,\n \"CaptureLayoutOn\": 0,\n \"CaptureScreenshotOn\": 0\n },\n \"SecondViewController\": {\n \"ScreenChange\": true,\n \"DisplayName\": \"Second Screen\",\n \"CaptureLayoutDelay\": 0,\n \"ScreenShot\": false,\n \"NumberOfWebViews\": 0,\n \"CaptureUserEvents\": true,\n \"CaptureScreenVisits\": true,\n \"CaptureLayoutOn\": 2,\n \"CaptureScreenshotOn\": 0\n }\n },\n \"AppendMapIds\": {}\n}", "language": "json" } ] } [/block] Additionally, you can disable capture of all data except for specific pages, as shown in the following example. [block:code] { "codes": [ { "code": "{\n \"AutoLayout\": {\n \"IBMGlobalScreenSettings\": {\n \"ScreenChange\": false,\n \"DisplayName\": \"\",\n \"CaptureLayoutDelay\": 0,\n \"ScreenShot\": false,\n \"NumberOfWebViews\": 0,\n \"CaptureUserEvents\": false,\n \"CaptureScreenVisits\": false,\n \"CaptureLayoutOn\": 0,\n \"CaptureScreenshotOn\": 0\n },\n \"FirstViewController\": {\n \"ScreenChange\": true,\n \"DisplayName\": \"First Screen\",\n \"CaptureLayoutDelay\": 0,\n \"ScreenShot\": false,\n \"NumberOfWebViews\": 0,\n \"CaptureUserEvents\": true,\n \"CaptureScreenVisits\": true,\n \"CaptureLayoutOn\": 2,\n \"CaptureScreenshotOn\": 0\n },\n \"SecondViewController\": {\n \"ScreenChange\": true,\n \"DisplayName\": \"Second Screen\",\n \"CaptureLayoutDelay\": 0,\n \"ScreenShot\": false,\n \"NumberOfWebViews\": 0,\n \"CaptureUserEvents\": true,\n \"CaptureScreenVisits\": true,\n \"CaptureLayoutOn\": 2,\n \"CaptureScreenshotOn\": 0\n }\n },\n \"AppendMapIds\": {}\n}", "language": "json" } ] } [/block] For more information about configuring properties in TealeafLayoutConfig.json for pausing and resuming the library, see Table 1. **Call TealeafLayoutConfig.json programmatically** Use IBMGlobalScreenSettings to set values for all view controllers in TealeafLayoutConfig.json that are not documented. If you want to call TealeafLayoutConfig.json programmatically, go to the page where you want to start pausing the library on onStart and onResume, which is always called when an activity is displayed. [block:code] { "codes": [ { "code": "@Override\nprotected\nvoid onResume() {\n Tealeaf.pauseTealeaf();\n super.onResume();\n}\n\n@Override\nprotected\nvoid onStart() {\n Tealeaf.pauseTealeaf();\n super.onStart();\n}", "language": "java" }, { "code": "override fun onResume() {\n Tealeaf.pauseTealeaf()\n super.onResume()\n }\n\n override fun onStart() {\n Tealeaf.pauseTealeaf()\n super.onStart()\n }", "language": "kotlin" } ] } [/block] Next, go to the page where you want to start resuming the library on onPause, which is always called when an activity is displayed. [block:code] { "codes": [ { "code": "@Override\nprotected\nvoid onPause() {\n Tealeaf.resumeTealeaf(true);\n super.onPause();\n}", "language": "json" }, { "code": "override fun onPause() {\n Tealeaf.resumeTealeaf(true)\n super.onPause()\n }", "language": "kotlin" } ] } [/block] ## Hybrid WebView Setup WebView and add Tealeaf Javascript bridge interface. [block:code] { "codes": [ { "code": "public MyWebView(Context context, AttributeSet attrs) {\n super(context, attrs);\n init();\n }\n\n public MyWebView(Context context, AttributeSet attrs, int defStyle) {\n super(context, attrs, defStyle);\n init();\n }\n\n public final PropertyName getWebViewId() {\n return webViewId;\n }\n\n public final void setWebViewId(final PropertyName webviewId) {\n this.webViewId = webviewId;\n }\n\n public void loadUrl(final String url) {\n loadUrl(url, null);\n }\n \n public final void loadUrl(final\n String url, final Map < String, String > extraHeaders) {\n Tealeaf.setTLCookie(url);\n super.loadUrl(url, extraHeaders);\n }\n\n public MyWebViewClient getMyWebViewClient() {\n return myWebViewClient;\n }\n public MyChromeClient getMyChromeClient() {\n return myChromeClient;\n }\n \n private void init() {\n this.setWebViewId(Tealeaf.getPropertyName(this));\n // This sets up the javascript bridge to communicate from web to native to collect data\n this.addJavascriptInterface(new JavaScriptInterface(this.getContext(), getWebViewId().getId()), \"tlBridge\");\n }\n}", "language": "java" }, { "code": "fun MyWebView(context: Context?, attrs: AttributeSet?) {\n super(context, attrs)\n init()\n }\n\n fun MyWebView(context: Context?, attrs: AttributeSet?, defStyle: Int) {\n super(context, attrs, defStyle)\n init()\n }\n \n @JvmOverloads\n fun loadUrl(url: String?, extraHeaders: Map? = null) {\n Tealeaf.setTLCookie(url)\n super.loadUrl(url, extraHeaders)\n }\n\n private fun init() {\n webViewId = Tealeaf.getPropertyName(this)\n // This sets up the javascript bridge to communicate from web to native to collect data\n this.addJavascriptInterface(JavaScriptInterface(this.getContext(), webViewId.getId()), \"tlBridge\")\n }", "language": "kotlin" } ] } [/block] Register Javascript bridge with native app. [block:code] { "codes": [ { "code": "@Override\n public void onPageFinished(final WebView view, final String url) {\n view.loadUrl(\"javascript:TLT.registerBridgeCallbacks([ \"\n + \"{enabled: true, cbType: 'screenCapture', cbFunction: function (){tlBridge.screenCapture();}},\"\n + \"{enabled: true, cbType: 'messageRedirect', cbFunction: function (data){tlBridge.addMessage(data);}}]);\");\n }", "language": "java" }, { "code": "fun onPageFinished(view: WebView, url: String?) {\n view.loadUrl(\"javascript:TLT.registerBridgeCallbacks([ \"\n + \"{enabled: true, cbType: 'screenCapture', cbFunction: function (){tlBridge.screenCapture();}},\"\n + \"{enabled: true, cbType: 'messageRedirect', cbFunction: function (data){tlBridge.addMessage(data);}}]);\")\n }", "language": "kotlin" } ] } [/block] Note: It is important to first call your server to get first cookie to sessionize on, which is automatically obtained when you enable the kill switch URL on the application. This is used to aggregate all the data on capture. ## Instrument your application for Android gestures You can capture gestures that the users make on your Android application. Several types of gestures are captured, as described in the Gesture events captured section of this step. To enable gestures for an Activity class, you modify the Activity class. For example, you modify the MainActivity.java file and call the Tealeaf.dispatchTouchEvent method inside dispatchTouchEvent or onTouchEvent method. Additionally, for any Activity class that you want Gesture logging, you edit the TealeafBasicConfig.properties file and set the SetGestureDetector property to true. Touch event methods You add your variables to one of these methods: onTouchEvent - use this method if your activity is not using a customized gesture view. dispatchTouchEvent - use this method if your activity is using a customized gesture view. If your application uses a customized gesture view, onTouchEvent does not detect the gestures because they are already captured by the customized gesture view. If you are using a customized gesture view, you must use dispatchTouchEvent. You can use either the onTouchEvent or the dispatchTouchEvent. If you use both, the gestures are captured twice. To instrument your application for Android gestures, follow these steps: 1. To use the Android gestures module, you must compile the Android Support Library in the build.gradle file: [block:code] { "codes": [ { "code": "implementation 'androidx.appcompat:appcompat:xx.x.x'", "language": "java" } ] } [/block] 2. Open the MainActivity.java file for your application. 3. Override either the dispatchTouchEvent or the onTouchEvent method, depending on how you are using gestures in your application: [block:code] { "codes": [ { "code": "// Override the dispatchTouchEvent\n public boolean dispatchTouchEvent(MotionEvent e)\n {\n //detector.onTouchEvent(e);\n Tealeaf.dispatchTouchEvent(this, e);\n return super.dispatchTouchEvent(e);\n }", "language": "java", "name": "Java" }, { "code": "override fun dispatchTouchEvent(e: MotionEvent?): Boolean {\n //detector.onTouchEvent(e);\n Tealeaf.dispatchTouchEvent(this, e)\n return super.dispatchTouchEvent(e)\n }", "language": "kotlin" } ] } [/block] 4. Edit the the TealeafBasicConfig.properties file, Set SetGestureDetector to true. ## Gesture events captured Gestures that are used to select items in an application or to adjust views in the application are captured by Tealeaf. 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. ## Tap gestures These are the tap gestures that are captured from web and mobile apps. Note: The arrows that illustrate the direction of a swipe or pinch gesture are not supported by the Internet Explorer browser. [block:image] { "images": [ { "image": [ "https://files.readme.io/8188bc6-42ef043-SingleTap_1.jpg", "42ef043-SingleTap_1.jpg", 84, 101, "#dce7ea" ], "caption": "Tap\n\nThis gesture is a one-finger gesture.\n\nFor a tap gesture, one-finger taps and lifts from the screen in 1 location.", "sizing": "smart" } ] } [/block] [block:image] { "images": [ { "image": [ "https://files.readme.io/831a9f8-c32f638-Tap_Hold_2.jpg", "c32f638-Tap_Hold_2.jpg", 92, 110, "#dae3e7" ], "caption": "Tap and Hold\n\nThis gesture is a one-finger gesture.\n\nFor 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, or present the user with a context menu." } ] } [/block] [block:image] { "images": [ { "image": [ "https://files.readme.io/a52cb1d-29c998f-doubleTap_2.jpg", "29c998f-doubleTap_2.jpg", 84, 101, "#d8e3e6" ], "caption": "Double Tap\n\nThis gesture is a one-finger gesture.\n\nFor a double tap gesture, one-finger taps twice in close succession in 1 location of the screen." } ] } [/block] ## Swipe gestures [block:image] { "images": [ { "image": [ "https://files.readme.io/b1b2ed1-06264e4-swipe_vertical_2.jpg", "06264e4-swipe_vertical_2.jpg", 94, 148, "#e0ebf1" ], "caption": "Swipe vertically \n\nThis gesture is a one-finger gesture.\n\nFor a swipe vertically gesture, one-finger:taps and holds in 1 location of screen,\ncontinues to engage screen while it moves up or down\nlifts from the screen in different location. Note: The initial tap becomes lighter in color, while the destination is highlighted by a darker color" } ] } [/block] [block:image] { "images": [ { "image": [ "https://files.readme.io/04b0349-9cd6668-swipe_horizontal_3.jpg", "9cd6668-swipe_horizontal_3.jpg", 178, 53, "#e3ecf1" ], "caption": "Swipe horizontally\n\nThis gesture is a one-finger gesture.\n\nFor a swipe horizontally gesture, one-finger:\n\n1. taps and holds in 1 location of screen,\n2. continues to engage screen while it moves left or right\n3. lifts from the screen in different location.\n\nNote: The initial tap becomes lighter in color, while the destination is highlighted by a darker color" } ] } [/block] ## Resize gestures [block:image] { "images": [ { "image": [ "https://files.readme.io/cffadfb-aee89d7-pinch_5.jpg", "aee89d7-pinch_5.jpg", 75, 78, "#e2e6e7" ], "caption": "Pinch open\n\nSometimes referred to as a spread gesture, this is a two-finger gesture.\n\nFor a pinch open gesture, 2 fingers:\n\n1. tap and hold in 1 location of the screen,\n\n2. maintain contact with the screen while the fingers move apart from each other in any direction,\n\n3. lift from the screen at a new location.\nNote: Accompanying arrows indicate the direction (open or close) of the pinch" } ] } [/block] [block:image] { "images": [ { "image": [ "https://files.readme.io/87fa078-aee89d7-pinch_5.jpg", "aee89d7-pinch_5.jpg", 75, 78, "#e2e6e7" ], "caption": "Pinch close\nThis gesture is a two-finger gesture.\n\nFor a pinch close resize gesture, 2 fingers:\n\n1. tap and hold in 1 location on the screen,\n\n2. maintain contact with the screen while the fingers move toward each other,\n\n3. lift from the screen at a new location.\nNote: Accompanying arrows indicate the direction (open or close) of the pinch" } ] } [/block] ## 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: [block:image] { "images": [ { "image": [ "https://files.readme.io/286786e-b6c482a-double_tap_un_5.jpg", "b6c482a-double_tap_un_5.jpg", 55, 70, "#f4e4db" ] } ] } [/block] The following images are displayed in BBR for unresponsive gestures captured from web and mobile apps: [block:image] { "images": [ { "image": [ "https://files.readme.io/78a4619-74b3c47-tap_un_2.jpg", "74b3c47-tap_un_2.jpg", 54, 70, "#f5e9e1" ], "caption": "Unresponsive tap" } ] } [/block] [block:image] { "images": [ { "image": [ "https://files.readme.io/08fbd1f-ff0b64d-tap_hold_un_2.jpg", "ff0b64d-tap_hold_un_2.jpg", 54, 75, "#f6e9e1" ], "caption": "Unresponsive tap and hold" } ] } [/block] [block:image] { "images": [ { "image": [ "https://files.readme.io/d23345d-47c01db-swipe_vert_un_2.jpg", "47c01db-swipe_vert_un_2.jpg", 144, 201, "#fdf7f4" ], "caption": "Unresponsive Swipe vertically" } ] } [/block] [block:image] { "images": [ { "image": [ "https://files.readme.io/99dcf14-bfff194-swipe_horizontal_un_3.jpg", "bfff194-swipe_horizontal_un_3.jpg", 140, 97, "#faf0ea" ], "caption": "Unresponsive Swipe horizontally" } ] } [/block] [block:image] { "images": [ { "image": [ "https://files.readme.io/4510860-4f26db6-pinch_open_un_3.jpg", "4f26db6-pinch_open_un_3.jpg", 121, 122, "#faefe8" ], "caption": "Unresponsive Pinch open" } ] } [/block] [block:image] { "images": [ { "image": [ "https://files.readme.io/52ada5e-3a43f9f-pinch_close_un_2.jpg", "3a43f9f-pinch_close_un_2.jpg", 98, 127, "#faeee7" ], "caption": "Unresponsive Pinch close" } ] } [/block] ## Add exception logging to your application Exceptions are the way that a system or framework communicates to the application that something is wrong. Tealeaf provides two mechanisms to log exceptions. You can manually log exceptions by using the logException API. Or, the Tealeaf SDK automatically logs uncaught exceptions. The exception information can be used for analytics. **Automatically log exceptions** When your application throws an uncaught exception, Tealeaf Android SDK records the stack trace and state of the device at the time the exception was thrown. Tealeaf Android SDK sends the crash information to your target servers for processing. **Manually log exceptions** In the Android SDK, you modify your catch block to report caught exceptions to the target server for processing. When you modify your catch block, you get the full stack trace and same device information that Tealeaf collects for fatal crashes. [block:code] { "codes": [ { "code": "public static Boolean logException(final Throwable exception, final HashMap < String, String > data, final\nBoolean unhandled)", "language": "java", "name": "Java" }, { "code": "fun logException(exception: Throwable?, data: HashMap?, unhandled: Boolean?): Boolean", "language": "kotlin" } ] } [/block] **Parameters**: @param exception - the exception to be logged. @param data - the value to be given to event. @param unhandled - whether the exception is unhandled. @return - whether exception was logged. To add exception logging to your application, follow these examples: 1. Determine the method for which you want to log exceptions. For example, you have a method: [block:code] { "codes": [ { "code": "public\nvoid clientMethod1() {}", "language": "java" }, { "code": "fun clientMethod1() {}", "language": "kotlin" } ] } [/block] 2. Optional: Add the exception method to the method for which you want to log the exceptions. Add @try, @catch, and the Tealeaf.logException(e, data, false) method to handle the exception: [block:code] { "codes": [ { "code": "public\nvoid clientMethod1() {\n try {\n int[] array = new\n int[1];\n int i = array[2]; // Index out of bound exception\n }\n Catch(Exception e) {\n HashMap < String,\n String > data = new HashMap < String,\n String > ();\n data.put(\"extraMessage\", \"custom value1\");\n Tealeaf.logException(e, data, false);\n }\n}", "language": "java" }, { "code": "fun clientMethod1() {\n try {\n val array = IntArray(1)\n val i = array[2] // Index out of bound exception\n } catch (e: Exception) {\n val data = HashMap()\n data[\"extraMessage\"] = \"custom value1\"\n Tealeaf.logException(e, data, false)\n }\n }", "language": "kotlin" } ] } [/block] ## Configure automatic geolocation logging in your application You can log geolocation information for the users of your applications. You can configure automatic geolocation logging when the application starts or you can use APIs to log geolocation information at specific places in your application. Replay and reporting of geolocation data is not available currently. **Automatic logging** You configure automatic logging with the TealeafBasicConfig.properties file and the manifest file. 1. To give permission to the device to log geolocation data, add the following to the Android manifest file. [block:code] { "codes": [ { "code": "", "language": "xml" }, { "code": "", "language": "java" } ] } [/block] 2. Configure the following items in TealeafBasicConfig.properties: [block:parameters] { "data": { "h-0": "Property", "h-1": "Description", "0-0": "LogLocationEnabled", "1-0": "LogLocationTries", "2-0": "LogLocationTimeout", "0-1": "Use this property to enable geolocation logging. Values are:\n\nTrue - logging is enabled\nFalse - logging is not enabled", "1-1": "Use this property to set the number of times the device tries to get the geolocation information when the device's signal is weak.", "2-1": "Use this property to set the amount of time between retries for the device to get the geolocation information when the device's signal is weak." }, "cols": 2, "rows": 3 } [/block] For example, when the device signal is weak you want the device to try 3 times to get the geolocation signal and for the device to wait 30 seconds between retries, you set the configurable items to these values: [block:code] { "codes": [ { "code": "#Auto Geolocation logging enabled or not\nLogLocationEnabled = true\nLogLocationTries = 3\nLogLocationTimeout = 30", "language": "json" } ] } [/block] **APIs** There are three APIs you can use to manually enable geolocation information logging in your application: * * public static Boolean logGeolocation() - Use this API at a specific point in your application to log geolocation only at that point. * public static GeoLocation logGeolocation(final Boolean getGeolocation) - Use this API at a specific point in your application to return a geolocation object that contains latitude, longitude, and accuracy values. * public static Boolean logGeolocation(final int logLevel) - Use this API at a specific point in your application to log geolocation information based on log level. **Disable geolocation capture in the Web application** 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 application should use the native SDK capture the geolocation information. To disable geolocation capture in the Web application: 1. Locate the UI Capture library configuration. The configuration is typically at the end of the UI Capture SDK file as part of the call to the TLT.init() API. 2. Locate the geolocation configuration section in the replay module configuration object (modules.replay.geolocation). 3. If the geolocation configuration section does not exist, the feature is disabled automatically. If the section does exist, then ensure that the enabled setting is set to false. The following example shows the geolocation section for the UI Capture SDK with geolocation disabled. [block:code] { "codes": [ { "code": "geolocation: {\n enabled: false,\n triggers: [{\n event: \"load\"\n }]\n},", "language": "json" } ] } [/block] ** Logging geolocation information in your app automatically** Before you begin this task you need to know: * The number of times you want the application to try to get the geolocation information when the signal is weak. * The amount of time, in seconds, that you want the application to wait before again trying to get the geolocation information. 1. In your application in Eclipse, open the TealeafBasicConfig.properties file. * Set LogLocationEnabled to true. * Set LogLocationTries to the number of times you want the application to try log the geolocation information. * Set LogLocationTimeout to the number of seconds that the device should retry when the signal is weak. * Save and exit the file. 2. In your application in Eclipse, open the AndroidManifest.xml file. * Add the following line to the file. [block:code] { "codes": [ { "code": "", "language": "xml" } ] } [/block] * Save and exit the file.