This article provides guidance on how to troubleshoot problems that occur when you try to tag pages in your mobile app.
Environment: Mobile
Feature can't be selected in the screen capture
Typically, Pendo can only detect clickable elements of your screen layout as features that can be tagged. If your Feature is built using custom components or unsupported implementations, you might find that the Feature on your screen capture can't be tagged. To resolve this, you can verify your components and Pendo typically provides modifications that you can perform on your Pendo SDK installation to allow tagging these Features. If these modifications are not useful, you can contact Pendo support for further assistance.
React Native custom components might not be detected as clickable elements
If you find that a clickable element on your screen can't be tagged, Pendo allows you to manually add this component to the Feature detection flow by adding a nativeID to the component.
<TouchableOpacity onPress={open} nativeID={'component_native_id'}> </TouchableOpacity>
You can then modify the Pendo navigation container in your installation to include these native iDs in its definition.
const PendoNavigationContainer = WithPendoReactNavigation (NavigationContainer, { nativeIDs: ['component_native_id'] });
React Navigation modal on Android is not clickable
If you can't tag your modal in your screen capture, Pendo allows you to detect it manually through the Pendo SDK. This is done by wrapping the modal with a custom Pendo modal tag, in place of the current modal tag.
const PendoModal = WithPendoModal(ModalComponent);
<PendoModal>
{/* Rest of your app code */}
</PendoModal>
Jetpack Compose (UI Toolkit for Android) tagging is not supported
If your Android application uses Jetpack compose, any Feature built using this UI toolkit is not taggable, and any Features under a Compose component are not taggable.
iOS Native View component is not detected as clickable despite being a clickable view
There are some cases where a UIView is not detected as taggable, or tooltip guides can't be pinned to the view. For these cases, you can manually make the view recognizable to Pendo using the following method:
pendoRecognizeClickAnalytics()
Exmaple:
View.pendoRecognizeClickAnalytics();
iOS SwiftUI View is not detected as taggable
If you use SwiftUI, or you added a SwiftUI view to your iOS app, but your Feature is not detected as taggable, check that you added SwiftUI support to your SDK installation:
struct YourView: View {
var body: some View {
Text("RootView")
.pendoEnableSwiftUI()
}
}
Note: SwiftUI support is automatically added in SDK’s 3.1+. In these versions, the above call is ignored. For a full list of the API calls Pendo allows to modify your installation, see our API mobile documentation.
A Feature is blocked from selection by an overlay
When tagging, Pendo highlights Features that can be tagged when hovering over them in your capture. The Features that are highlighted are determined by the location of your mouse while hovering and all other Features on the screen that contain the same or similar Feature properties as the one you are hovering over.
Sometimes, the Feature you are trying to tag is covered by another element at the same location, preventing you from tagging your desired Feature. Pendo allows you to remove this overlay by clicking the x on the top right of the highlighted element. A count of deleted layers is shown at the bottom of the capture, and you can also undo any layers you have removed from there.
In other cases, you need to remove multiple layers before you can tag the Feature you are aiming for.
Multiple Features are highlighted for one saved Feature
It’s common to encounter multiple highlights for a single selected Feature. It suggests that Pendo is finding multiple Features on the screen that share the same Feature rules as the one you've selected. You can further refine the Feature rules for the selected Feature by expanding the Advanced Feature rules section and editing the Feature rule identifiers to make the rule more specific.
If you can't find unique Feature rules and other Features are still being highlighted, you can modify the Feature at the code level by adding more unique identifiers.
You can add the following suggested identifiers:
Accessibility labels
These are text values added to applications to enable or improve your applications' accessibility, for example, for use in screen readers. Adding accessibility labels in different frameworks and languages varies slightly, but the concept is similar across platforms.
React Native
Use the `accessibilityLabel` prop for most components.
Swift (iOS)
Set the `accessibilityLabel` property for UI elements.
Java/Kotlin (Android)
Use the `setContentDescription()` method
Xamarin (cross-platform)
You can set the `ContentDescription` property for accessibility labels.
Note: Accessibility label text is typically language-specific, so if your app is multilingual, this won't serve as a good identifier, as Pendo only supports one text variation for Feature identifier at a time.
Accessibility Identifiers
Accessibility identifiers are used in automated testing frameworks or localization to identify and interact with UI elements programmatically. They are non-customer facing and static, so they are ideal for Feature identifiers in Pendo.
These are typically platform-specific attributes or properties.
React Native
You can use the `testID` prop.
In iOS, this maps to `accessibilityIdentifier`.
In Android this maps to `setTag`
Swift (iOS)
You can set the `accessibilityIdentifier` property for UI elements.
Java (Android)
You can use `setTag()` to attach any Java object to a View object. For this use case, it should be a string value. It will surface as “viewTag” in your Feature identifiers.
Note: Pendo does not surface this value in SDK versions earlier than 2.22.4, there is no alternative in earlier versions of the SDK.
Xamarin (cross-platform)
You can set the `AutomationId` property for accessibility identifiers.
Only Features below the current screen or from the previous screen are highlighted
Pendo uses static captures of screen states as saved references. When you navigate through your app, Pendo scans the page when a new screen is detected. Capturing a page means sending the scanned page to Pendo with a screenshot and information about all the Features it can detect on that page and their locations.
In some cases, Pendo does not detect that a screen has changed, so the capture you send is still of the previous screen, with the image of the current screen.
This means that:
- Highlights do not match what is on your current screen.
- An animated view, such as a drawer, is not showing as clickable when captured.
To resolve this, Pendo allows you to manually trigger another scan using Pendo APIs when you are on the page that demonstrates this issue.
React Native
static screenContentChanged(): void
Example:
PendoSDK.screenContentChanged();
Android Native
static void screenContentChanged()
Example:
Pendo.screenContentChanged();
iOS Native
func screenContentChanged()
Example:
PendoManager.shared().screenContentChanged();
Note: In all instances, first verify that the issue is present before using these API’s to avoid unintended behavior. If the new screen that is scanned using this API does not have the same view name, it will conflict with associated captures and needs to be saved as a separate screen, rather than overriding the associated capture, for example, if a screen with a slide-out drawer has a different view name than the same screen without the slide-out drawer.
For a full list of API calls, see the API documentation.
(MAUI Framework) Views with tap gestures are not tracked by Pendo
When working with MAUI, you need to register effects in the hosting app. Add PendoEffect to your MauiProgram.cs file:
using PendoMAUIPlugin;
public static class MauiProgram
{
public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder();
builder.UseMauiApp<App>();
builder.ConfigureEffects(effects =>
{
effects.Add<PendoRoutingEffect, PendoPlatformEffect>();
});
return builder.Build();
}
}
See Reuse effects in .NET MAUI for more information.