モバイルでのタグ付け：技術情報

最終更新日: 2023年09月14日 02:31

この記事では、Pendoのモバイル上のタグ付けの技術的な概要を説明します。

モバイルアナリティクスの識別は、次の2つの点でウェブの識別とは異なります。

モバイルではページを表すURLがない
ボタン/フィーチャーを表すCSSルール

画面やボタンの特定は、ガイド表示の基本でもあります。

Pendo SDKはどのように機能するのですか？

ページの閲覧数、フィーチャーのクリック数、ページ滞在時間、アプリ滞在時間などを自動的に収集します
スクロール、クリック、表示画面のビュー階層の変化（Activity/fragments/UIViewControllers）など、UIの変化を検出します
iOSでは、ページ閲覧数とクリック数のリアルタイムな識別を、実行時に既存のセレクタの実装を変更するプロセスであるスウィズリングによって実現します
ページの閲覧数およびフィーチャーのクリック数をレポートします
新しいページやボタンを検出するたびに、そのページやボタンでアクティブにすべきガイドがあるかどうかをチェックします

Androidページの識別

Pendoは、表示可能なフラグメントと、それらをホストする現在のアクティビティ、およびそれらの間の階層によってページを識別します。
選択したタブとテキスト（TabLayouts）、選択したページ（ViewPager）、選択したタイトル（BottomNavigationView）などの追加のヒントも使用されます。
ユーザーは類似した構造のページを区別するために、「カスタム識別子」としてUIラベルをページに割り当てることができます。これは、［管理ページ（Manage Page）］の［ページルール（Page Rules）］タブでユーザーが実行できます。これを実現するために、Pendoは完全にハッシュ化されたページテキストを使用します。これはオフにすることもできますが、ページの識別に支障をきたす可能性があります。
ヒント：別のページに同じアナリティクスデータがある場合（ページ閲覧数、訪問者数、アカウント数が同じ場合）には、ページにカスタム識別子を追加してみてください。
もし「ページルール」がまだ十分に具体的でない場合は、サポートチームが微調整を行います。

iOSページの識別

Pendoは、構成するUIViewControllersとその階層によってiOSのページを識別します。
選択したタブのインデックスなど、他のヒントも使用されます。
ページにタイトルがある場合、タイトルはデフォルトでページルールに含まれますが、エンドユーザーはこのページの［ページルール（Page rules）］タブで削除することができます。

ヒント：ページのデータが少なすぎる場合は、タイトルを削除してみてください。
ユーザーは類似した構造のページを区別するために、「カスタム識別子」としてUIラベルをページに割り当てることができます。これは、［ページルール］タブでユーザーが実行できます。これを実現するために、Pendoは完全にハッシュ化されたページテキストを使用します。これはオフにすることもできますが、ページの識別に支障をきたす可能性があります。
ヒント：別のページに同じアナリティクスデータがある場合（ページ閲覧数、訪問者数、アカウント数が同じ場合）には、ページにカスタム識別子を追加してみてください。
もし「ページルール」がまだ十分に具体的でない場合は、サポートチームが微調整を行います。

フィーチャーの識別

Pendoは、クリックハンドラを持つ要素をクリック可能と認識します。
Pendoは、テキスト、アクセシビリティ、クラス名、アクション、リスト内のインデックス、親のインデックスの多くのデータを使ってフィーチャーを特定します。
この情報をもとに、デフォルトの「フィーチャールール」が作成されます。
場合によっては、このルールが狭すぎたり、広すぎたりすることがありますが、その場合はサポートチームにルールの変更を依頼し、ニーズに合わせて微調整できます。将来的には、どの属性をフィーチャールールに含めるかをエンドユーザーがコントロールできるようにする予定です。
また、iOS SDK 2.6+では、ジェスチャーで実装されたビューがクリック可能なものとして認識されます。

フィーチャーでできること

タグ付けされたフィーチャーでは、以下の属性を使用できます。

テキストを含める/除外する：ボタンのテキストが動的な場合、そのテキストをフィーチャールールから除外できます。ただしテキストを削除すると、非常に重要なヒントが削除されるため、本当に必要な場合にのみ使用してください。
リスト内の任意の要素を含める：リスト内の位置に関係なくクリックを取得する場合に使用します。この場合はボタンのテキストを無視します。必要であれば、サポートチームがテキストを戻します。
アプリ全体：共通のフィーチャー（例：タブ）では、そのフィーチャーがどのページにあるかに関わらず、クリック数を収集します。

サポートにより、「リスト内のあらゆる場所でこのテキストを含める」など、より詳細なルールを設定できます。

モバイルタグ付け用のコードベースのソリューションを設定する

当社のコードベースのソリューションは、Pendoがアプリのフィーチャーを正しく認識しない場合の問題を解決します。

コードベースのソリューションを設定するには、以下を行ってください。

ネイティブアプリケーションの場合：

iOSの場合、`enableClickAnalytics` APIを使用して、フィーチャーをタグ付け可能としてマークし、その分析結果を収集します。
Androidの場合、PendoのUIはクリックできるビューにしかタグを付けることができないため、フィーチャーのプロパティが`clickable:trueになっていることを確認してください。タグ付けしたフィーチャーに対してアナリティクスが得られない場合は、`sendClickAnalytic` APIを使って解決してください。

この方法でフィーチャーをタグ付けしたら、そのアプリバージョンをデバイスにインストールし、ページにタグ付けするか、既存のものを更新する必要があります。

React Nativeアプリケーションの場合：

任意の要素をクリック可能としてマークするには、「nativeID」プロパティを使用します。

<Image
    nativeID="pendoClickableImage"
    source={require('../../../assets/icons/react_native.png')}
    style={{resizeMode: 'contain', width: 100, height: 100, alignSelf: 'center'}}
    onTouchEnd={()=> { Alert.alert("Wohoo I love react native");}}
/>

「nativeID」は正規表現テンプレートと一致する必要があります。デフォルトは「nativeID」のプレフィックス形式である「pendoClickable」で、この場合設定は必要ありません。他の正規表現テンプレートで、顧客がすでに「nativeID」を定義している場合、開発者は次のように正規表現を構成します。
- navigationOptions.clickableElementsNativeIDsRegex経由のReact Native Navigationライブラリの場合：

const navigationOptions = {library: NavigationLibraryType.ReactNativeNavigation, navigation: Navigation, clickableElementsNativeIDsRegex: '^clickable|^pendo_|customRegex'};
PendoSDK.setup(pendoKey,navigationOptions, options);

- traversalOptionsObject.clickableElementsNativeIDsRegex経由のReact Navigationライブラリの場合：

let traversalOptionsObject: RNTraverseOptions = {clickableElementsNativeIDsRegex: '^clickable|^pendo_|...'};

export default withPendoRN(RootNavigator, traversalOptionsObject);

お客様自身で正規表現を設定する場合、すべての正規表現のテンプレートがデフォルトテンプレートに含まれていることを確認する必要があります。'pendoClickable'つまりclickableElementsNativeIDsRegex: '^clickable|^pendoClickable|customRegex'が含まれていることを確認します。
要素をマークした後にクリックアナリティクスが生成されない場合、開発者は「sendClickAnalytics」APIを呼び出し、「nativeID」をパラメーターとして渡す必要があります。次に、ネイティブSDKはレイアウト階層でこのビューを検索し、要素情報を収集して、アナリティクスを送信します。

onTouchEnd={()=> {
  Alert.alert("Wohoo I love react native");
  PendoSDK.sendClickAnalytic("pendoClickableImage")
}

注：APIを使用する場合、分析は遡及されません。このAPIを使用した後にのみ、データは収集されます（トラックイベントと同様）。

例 - プロパティを使用してトラックイベントを送信する

let traversalOptionsObject: RNTraverseOptions = {clickableElementsNativeIDsRegex: '^clickable|^pendo_|...'};

const PendoNavigationContainer = WithPendoReactNavigation(PendoNavigationContainer, traversalOptionsObject)
   <PendoNavigationContainer> 
   {/* Rest of your app code */} 
   </PendoNavigationContainer>