Collect images with the target simulator tool

Overview

When using Tealeaf to capture a mobile session, images from the mobile application are sent to the Tealeaf server. If the images from the mobile application are already stored on the replay server, the mobile application does not upload the images during an active session. Uploading the images to the replay server reduces the amount of data sent from the mobile device and can display the images when you replay a native mobile session.
For the traditional replay, you can use the target simulator tool provided by Tealeaf to capture images embedded in the application.

📘

Note:

You must use the target simulator tool only when the Image Capture tool cannot support your image replay experience.

How the target simulator works
The tool acts as a target page on your local machine. When you run the tool, it accesses every page in your application and takes the embedded images. Then it uses the image checksum to create a unique file name for each image and saves the images in the directory where the target simulator tool is located. You must then transfer the saved images to the replay server images folder.

Before you begin

Download the target simulator tool

The target simulator tool is included with the Tealeaf SDK packages and tools zip file for iOS and Android.

  1. Download the SDK package from SDK_Tools.
  2. Extract the target simulator files.

Run the target simulator with the node.js

  1. Open a terminal or command line prompt and change your directory to the target simulator tool folder cd <path to Target Simulator>.
  2. Run the command node target_sim.js.

📘

Tip:

The tool supports SHA256 formats. For example, to capture SHA2, run the command as follows: node target_sim.js SHA2.

The target simulator starts listening to the port. By default, the target simulator listens for SDK posts based on the port where the Node.js is installed. For example, if the node.js is installed globally on your machine and uses port 9000, the target simulator uses port 8080. If you want the target simulator to use a different port, specify a port number at the end of the command. For example, to change the port to 8080, enter:node target_sim.js 8080

The target simulator program provides the URL with an IP address that points to the machine where the tool listens to the SDK payloads containing images.
http://<IP addres>:<portnumber>

Modify the SDK settings

You must modify the SDK properties to send the images in the payload in production. You must also change the settings to point to the target page of the machine where the target simulator runs and not the production Acoustic Tealeaf target page.

  1. Open your application’s project in Xcode.
  2. From the assets folder, open the TLFConfigurableItems.plist file.
  3. Replace the PostMessageUrl value with the target URLs returned in the terminal/ command line console window. PostMessageURL - http://localhost:<port number>
  4. Set the GetImageDataOnScreenLayout=Yes.
  5. Save and exit the file.
  6. Run the application from your Xcode project.
  1. Open your application’s project in Android studio.
  2. From the assets folder, open the TealeafBasicConfig.properties file.
  3. Replace the PostMessageUrl value with the target URLs returned in the terminal/ command line console window. PostMessageURL - http://localhost:<port number>
  4. Set the GetImageDataOnScreenLayout=true.
  5. Save and exit the file.
  6. Run the application from Android Studio.

As the application runs, every image in the application is extracted and saved. You can see the images found and saved on the terminal/command line console window.
Once you are done capturing the images, complete the following steps:

  • Go to the terminal/command prompt window and press Control-C to exit the simulator tool.
  • Reset the SDK settings to standard run-time settings.

Transfer the images to the replay server

The images are saved to an images folder in the directory where the target simulator tool is located.

  1. Create a zip file called images .zip of the images folder. The .zip file should contain the contents of the destination folder. Do not create any other folder hierarchies while creating the zip.

📘

Note:

The zip file must be named images.zip. Tealeaf server requires one imagez.zip file for all your applications across all the native mobile platforms. For this reason, if you have multiple applications on multiple native mobile platforms, such as iOS, iPadOS, Android, run the respective image tool for each application on the iOS and Android platforms. After you copy all images from all applications, create one images.zip folder with the flat folder hierarchy.

  1. Copy the images.zip file to the replay server.
    Tealeaf SAAS
    If you use Tealeaf SaaS, upload the zip file to Admin > Company settings > Native replay files > Image package Upload file. For more information, see Copy native and hybrid application images to the replay server.
    Tealeaf On Premises
    If you are using Tealeaf OnPrem, add the images.zip file under Replay Server. For more information, see Replay mobile app sessions as screen captures.