Articles in this section

Validating Proper Blue Triangle SDK Installation in the App

Kirsten Ross
  • Updated
Follow

Table of Contents

Overview

The following will describe how to validate that the SDK has been correctly integrated with the native app. It assumes the following:

  • The latest SDK is being used
  • The “Mandatory” and “Recommended” steps in the installation guide (iOS, Android) have been completed
  • Client has access to the Blue Triangle Portal

Validate that native views are reported correctly

Validation

  • Head to Native App – Performance Overview
  • Set the “Data originated from” filter on “Native App”
  • (Recommended) set the timeframe to 3 hours if the app has run recently.
  • In the table you should see native view names, the number of views for the time period and their performance.

This table should show automatically captured native views including:

  • For iOS:
    • names of UIViewController subclasses
    • SwiftUI View Page names
    • HotLaunchTimer, ColdLaunchTimer
  • For Android:
    • Activity & Fragment subclasses names
    • Composable provided pageNames
    • HotLaunchTimer, ColdLaunchTimer & WarmLaunchTimer
  • Any other custom timers the SDK was instrumented with
  • You can also search for these pages using the search bar shown in the image below:

1.jpg

Troubleshooting

If no pages show, it probably is related to one of the following

  • An error in the integration - You should follow the steps described in the installation guides
  • Wrong site ID - See site ID configuration (iOS, Android)
  • To see WarmLaunch for Android, put the app in the background by pressing the home button of the device and then launch again.
  • Note: screens are tracked when the user leaves the screen or the app is put in the background, so try putting the app in background by pressing the home button after navigating to a few screens.

 

Validate that native views are reported network traffic correctly

Validation

  • Head to Native App – Performance Details page
  • Set the “Data originated from” filter on “Native App”
  • Under “Page views” select “Object level details only” and click on one of the markers

2.jpg

 

Below you should see a table of the session details, including a waterfall chart of the network interaction of the app with the backend.

3.jpg

 

Troubleshooting

If no network traffic shows, it probably is related to one of the following

  • The native side of the app is not interacting with the backend. This is very common, for example, when the app is made of a framework that wraps HTML pages (webviews) and native technology only to represent it as a native app and provide access to local resources such as Camera, Face ID etc.
  • An error in the integration- You should follow the steps described in the installation guides
  • Network traffic is a result of HTTP(s) API calls initiated from the app, so in order to validate these, please be sure to visit screens in the app which have HTTP/s API calls.

 

Validate that native app webviews are reported correctly

Validation

Option 1

  • Head to Native App – Performance overview page
  • Set the “Data originated from” filter on “Native Webviews”
  • (Recommended) set the timeframe to 3 hours if the app has run recently.

4.jpg

The reason webviews show on the Native App – Performance pages is to allow the native app team to see the entire composition of their app, including native and webviews.

 

Option 2

  • Head to Real User Monitoring – Performance overview page
  • Set the “Data originated from” filter on “Native Webviews”
  • (Recommended) set the timeframe to 3 hours if the app has run recently.

In both cases, the page names should show in the filter to the right.

5.jpg

 

Troubleshooting

If no webviews show, it probably is related to one of the following:

  • The webviews are not using the Blue Triangle JS tag. Please work with your account manager to ensure the tag is properly installed.
  • The webviews are not using the correct site ID in the Blue Triangle JS tag. Please work with your account manager to ensure the tag is properly installed.
  • The tag is being blocked from loading or sending data. Please trace the log in your IDE to see if that is the case. In this case you may need to discuss with your network/security team the removal of the tag restrictions.
  • While configuring the SDK, you can enable logging.  If logging is enabled, put a filter in Xcode or Android studio log window as “BlueTriangle”.  When you check webview you should see session log messages. If you are not seeing any traffic from web views you can also consider inspecting webview using Chrome (for Android) and Safari (for iOS).  While inspecting, make sure that your tagURL which ends with btt.js is loaded.
  • For iOS there is a troubleshooting chapter in the Webview integration section in SDK readme: BTTWebViewTracker.verifySessionStitchingOnWebView()  This function can be used to validate the webview integration.

 

Validate that native app webviews are reported network traffic correctly

Validation

Option 1

  • Head to Native App – Performance details page
  • Set the “Data originated from” filter to “native webviews”
  • Set the selector in the “Page Views” visualization to “Object level details” only
  • Select one of the markers
  • You should see the filled table with the webview metrics and below that, the waterfall chart for that webview

6.jpg

Option 2

  • Head to Real user monitoring – Performance details page
  • Set the “Data originated from” filter to “native webviews”
  • Set the selector in the “Page Views” visualization to “Object level details” only
  • Select one of the markers
  • You should see the filled table with the webview metrics and below that, the waterfall chart for that view

7.jpg

Troubleshooting

If no webviews network traffic data shows, it probably is related to one of the following

  • The webviews are not using the Blue Triangle JS tag. Please work with your account manager to ensure the tag is properly installed.
  • The webviews are not using the correct site ID in the Blue Triangle JS tag. Please work with your account manager to ensure the tag is properly installed.

Validate that session stitching is working as expected

Validation

  • Head to Marketing Insights – Customer journey analysis and select “path flow”
  • Set the “Real user data type” to “native app data”
  • You should see paths, all beginning from a native view, some traversing through webviews and back to native views

8.jpg

Troubleshooting

  • No data showing
    • Check the filters for native app
    • Check that there are native views reported (see earlier section)
    • Check that there are native webviews reported (see earlier section)
    • Ensure that the instructions in the guide for session stitching are implemented
    • Ensure that both are sending data to the same site ID.
  • Only native views show
    • Follow the steps above for native webviews

 

Validate CPU, Memory, ANR Warnings, Crashes and Errors

Validation

Option 1 - Dashboards

  • Head to Dashboards – configured dashboards- Native App Detailed Metrics for Android or iOS (you should check both dashboards)
  • You should see data for performance timing, network traffic reported, crashes, ANR, Errors etc.

9.jpg

 

Option 2

  • Head to Native App Monitoring- Error explorer
  • You should see various errors, ANR, warnings etc. You can filter by OS and by native views/webviews.

10.jpg

 

Troubleshooting

  • No errors showing
    • Ensure that the instructions in the guide for errors instrumentation are implemented

Related articles

Comments

0 comments

Article is closed for comments.