この記事では、モバイルアプリケーションでページやフィーチャーにタグを付けようとしたときに発生する問題のトラブルシューティング方法について説明します。
環境:モバイル
画面キャプチャでフィーチャーが選択できない
通常、Pendoは画面レイアウトのクリック可能な要素のみをタグ付け可能なフィーチャーとして検出します。機能がカスタムコンポーネントまたはサポートされていない実装を使用して構築されている場合、画面キャプチャ上の機能にタグ付けできない場合があります。これを解決するには、コンポーネントを検証してください。Pendoは通常、これらのフィーチャーにタグを付けることができるように、Pendo SDKのインストールに対して実行できる変更を提供します。これらの変更が役に立たない場合は、Pendoサポートに連絡してさらなるサポートを受けてください。
React Nativeカスタムコンポーネントがクリック可能な要素として検出されないことがある
画面上のクリック可能な要素にタグを付けることができない場合、PendoではコンポーネントにNativeIDを追加することで、このコンポーネントをフィーチャー検出フローに手動で追加できます。
<TouchableOpacity onPress={open} nativeID={'component_native_id'}> </TouchableOpacity>
その後、インストール先のPendoナビゲーションコンテナを修正して、これらのネイティブIDを定義に含めることができます。
const PendoNavigationContainer = WithPendoReactNavigation (NavigationContainer, { nativeIDs: ['component_native_id'] });
Android上のReactナビゲーション モーダルがクリックできない
画面キャプチャでモーダルにタグを付けられない場合は、Pendo SDKを使用して手動で検出できます。これは、現在のモーダルタグの代わりにカスタムのPendoモーダルタグでモーダルをラップすることで行います。
const PendoModal = WithPendoModal(ModalComponent);
<PendoModal>
{/* Rest of your app code */}
</PendoModal>
iOS Native Viewコンポーネントがクリック可能なビューであるにもかかわらずクリック可能として検出されない
UIViewがタグ付け可能として検出されなかったり、ツールチップガイドをビューにピン留めできないケースもあります。このような場合は、以下の方法で手動でビューをPendoに認識させることができます。
pendoRecognizeClickAnalytics()
例:
View.pendoRecognizeClickAnalytics();
iOSのSwiftUIビューがタグ付け可能として検出されない
SwiftUIを使用しているか、iOSアプリにSwiftUIビューを追加したにもかかわらず、フィーチャーがタグ付け可能として検出されない場合、SDKのインストールにSwiftUIのサポートが追加されているか確認してください。
struct YourView: View {
var body: some View {
Text("RootView")
.pendoEnableSwiftUI()
}
}
注:SwiftUIのサポートは、SDKの3.1以上で自動的に追加されます。これらのバージョンでは、上記の呼び出しは無視されます。Pendoがインストール環境の変更に使用できるAPI呼び出しの完全なリストについては、モバイルAPIドキュメントを参照してください。
フィーチャーがオーバーレイによって選択からブロックされている
タグ付け時、Pendoはキャプチャ時にタグ付け可能なフィーチャーをハイライトします。強調表示されるフィーチャーは、マウスカーソルがホバーしている場所と、画面上の他のすべてのフィーチャーのうち、ホバーしているフィーチャーと同じか類似したフィーチャープロパティを持つものによって決定されます。
場合によっては、タグ付けしようとしているフィーチャーが同じ場所にある別の要素によって覆われてしまい、目的のフィーチャーにタグ付けできないことがあります。Pendoでは、強調表示された要素の右上にある×をクリックすることで、このオーバーレイを削除できます。キャプチャの下部には削除されたレイヤーの数が表示され、そこから削除したレイヤーを元に戻すことも可能です。
また、ターゲットのフィーチャーにタグ付けする前に複数のレイヤーを削除する必要がある場合もあります。
保存された1つのフィーチャーに対して複数のフィーチャーがハイライトされる
選択した1つのフィーチャーに対して、複数のハイライトが表示されることはよくあります。これは、Pendoが画面上で、選択したフィーチャーと同じフィーチャールールを共有する複数のフィーチャーを検出していることを示唆しています。選択したフィーチャーのフィーチャールールをさらに細かく設定するには、「高度なフィーチャールール」セクションを展開し、フィーチャールール識別子を編集してルールをより具体的にします。
固有のフィーチャールールが見つからず、他のフィーチャーが引き続き強調表示される場合は、コードレベルでフィーチャーを変更し、固有の識別子を追加することができます。
以下の推奨識別子を追加できます。
アクセシビリティラベル
これらは、アプリケーションのアクセシビリティを有効化または向上させるためにアプリケーションに追加されるテキスト値です。たとえば、スクリーンリーダーで使用するために使用されます。アクセシビリティラベルの追加方法は、フレームワークや言語によって若干異なりますが、基本的な概念はプラットフォーム間で共通しています。
React Native
ほとんどのコンポーネントには`accessibilityLabel`プロパティを使用してください。
Swift (iOS)
UI要素の`accessibilityLabel`プロパティを設定します。
Java/Kotlin (Android)
`setContentDescription()`メソッドを使用します。
Xamarin(クロスプラットフォーム)
アクセシビリティラベルには`ContentDescription`プロパティを設定できます。
注:アクセシビリティラベルのテキストは通常、言語固有のものであるため、アプリが多言語対応の場合、これは適切な識別子として機能しません。Pendoはフィーチャー識別子に対して一度に1つのテキストバリエーションしかサポートしていないためです。
アクセシビリティ識別子
アクセシビリティ識別子は、自動テストフレームワークやローカライゼーションにおいて、UI要素をプログラム的に識別し、操作するために使用されます。これらは顧客向けではなく、静的であるため、Pendoの機能識別子には理想的です。
これらは通常、プラットフォーム固有の属性またはプロパティです。
React Native
`testID`プロパティを使用できます。
iOSでは、これは`accessibilityIdentifier`にマッピングされます。
Androidでは、これは`setTag`に相当します。
Swift (iOS)
UI 要素に`accessibilityIdentifier`プロパティを設定することができます。
Java (Android)
`setTag()`を使うと、任意のJavaオブジェクトをViewオブジェクトにアタッチすることができます。この用途では、文字列の値であるべきです。フィーチャー識別子には「viewTag」として表示されます。
注:Pendoは2.22.4以前のSDKバージョンではこの値を表示しません。以前のバージョンのSDKには代替手段はありません。
Xamarin(クロスプラットフォーム)
アクセシビリティ識別子には、`AutomationId`プロパティを設定できます。
現在の画面下または前の画面のフィーチャーのみがハイライトされる
Pendoは画面状態の静的キャプチャを保存参照として使用しています。アプリをナビゲートするとき、Pendoは新しい画面が検出されるとページをスキャンします。ページをキャプチャするということは、スキャンしたページをスクリーンショットと、そのページで検出できるすべてのフィーチャーとその位置に関する情報とともにPendoに送るということです。
場合によっては、Pendoが画面の変更を検出しないため、送信されるキャプチャには、現在の画面の画像とともに、前の画面の画像が含まれた状態になります。
次のことに注意してください。
- ハイライトが現在の画面と一致しない
- ドロワーなどのアニメーション表示は、キャプチャ時にクリック可能な状態として表示されません。
この問題を解決するために、Pendoでは、この問題を示しているページにいるときに、Pendo APIを使用して手動で別のスキャンをトリガーすることができます。
React Native
static screenContentChanged(): void
例:
PendoSDK.screenContentChanged();
Android Native
static void screenContentChanged()
例:
Pendo.screenContentChanged();
iOS Native
func screenContentChanged()
例:
PendoManager.shared().screenContentChanged();
注:いずれの場合も、意図しない行動を避けるため、これらのAPIを使用する前にまず問題が存在することを確認してください。このAPIを使用してスキャンされた新しい画面のビュー名が既存の画面のビュー名と異なる場合、関連付けられたキャプチャと競合するため、関連付けられたキャプチャを上書きするのではなく、別の画面として保存する必要があります。たとえば、スライドアウトドロワーのある画面と、スライドアウトドロワーのない同じ画面でビュー名が異なる場合などがこれに該当します。
API呼び出しの完全なリストについては、APIドキュメントを参照してください。
(MAUIフレームワーク) タップジェスチャーを含むビューがPendoによって追跡されない
MAUIを使用する場合、ホスティングアプリにエフェクトを登録する必要があります。MauiProgram.csファイルにPendoEffectを追加します。
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();
}
}
詳細については、.NET MAUI のエフェクトの再利用を参照してください。