1. Pendoヘルプセンター
  2. モバイル
  3. インストール

開発者向けインストールガイド（iOS向けReact Native）

React Nativeバージョン0.6以降。ExpoのBareワークフローのみ。
React Native Navigationライブラリバージョン6.xにはSDK 2.11以降が必要です
React Navigationライブラリバージョン5.xにはSDK 2.11以降が必要です

モバイルアプリがコードレスのReact Nativeサポートの技術的要件を満たさない場合は、トラックイベント（Track Events）ベースのソリューションを使用できます。

概要

React Nativeフレームワークで作成されたモバイルアプリでは、アプリがReact Nativeとナビゲーションライブラリの基準を満たしていれば、Pendoのコードレスソリューションを利用できます。

これには、ノーコード分析（SDKのインストール時までさかのぼって機能します）や、ツールチップやウォークスルーを含むあらゆるモバイルガイドのタイプなど、ネイティブモバイルアプリケーションで利用できるPendoの優れたモバイル機能すべてが含まれます。

前提条件

  • ReactNativeバージョン0.6以降で構築されたReact Nativeアプリケーション
  • 「React Navigation」ライブラリバージョン5.xを使用するReact Nativeアプリケーション
    • または
  • 「React Native Navigation」ライブラリバージョン6.xを使用するReact Nativeアプリケーション

どのReact Native設定をアプリで使用しているかについては、開発者に確認してください。

インストール手順

  1. ［設定（Settings）］>［サブスクリプション設定（Subscription Settings）］>［他のアプリを追加（Add Another App）］を選択し、React Nativeアプリタイプを選択して、iOSアプリを作成します。

    1.png

 

Pendoでは、2種類のアプリケーション（iOS用およびAndroid用）が［サブスクリプション設定（Subscription Setting）］ページに作成されます。


2.png

  1. アンケートに記入して統合するiOSアプリを選択します。
    1. 使用しているReact Nativeのバージョンを選択し、［次へ（Next）］をクリックします。
    2. 使用しているナビゲーションライブラリを選択し、［次へ］をクリックします。
    3. 使用しているナビゲーションライブラリのバージョンを選択し、［次へ］をクリックします。
    4. ［インストール続行（Continue to installation）］を選択します。

ステップ1：Pendo SDKのインストール

1. アプリケーションフォルダで次のコマンドを実行します。

NPMを使用する場合：

npm install --save rn-pendo-sdk

YARNを使用する場合：

yarn add rn-pendo-sdk

 

2. iOS フォルダで、次のコマンドを実行します。

pod install

3. こちらのAppleのドキュメントの説明に従って、ブリッジングヘッダーを追加します。

4. ブリッジングヘッダーに次のインポートの記述を追加します。

@import Pendo;

5. JavaScriptの難読化を変更する

本番用にバンドルする際、React Nativeでは、クラス名や関数のシグネチャにminificationを適用してバンドルサイズを縮小します。つまり、コードレスソリューションに使用される元のコンポーネント名にはアクセスできません。

アプリケーションのmetro.config.jsファイルで、transformerに次の記述を追加します。

module.exports = {
  transformer: {
    // ...
    minifierConfig: {
        keep_classnames: true, // クラス名を保持
        keep_fnames: true, // 機能名を保持
        mangle: {
          keep_classnames: true, // Preserve class names
          keep_fnames: true, // Preserve function names
        }
    }
  }
}

ステップ2：Pendo SDKのインテグレーション

1. アプリケーションのメインファイル（App.js/.ts/.tsx）に、以下のコードを追加します。

'rn-pendo-sdk'から{ PendoSDK, NavigationLibraryType }をインポートします。
Navigation.events().registerAppLaunchedListener(()=> {
    const navigationOptions = {library: NavigationLibraryType.ReactNativeNavigation, navigation: Navigation};
    const pendoKey = 'eyJhbGciOiJSUzI1NiIsImtpZCI6IiIsInR5cCI6IkpXVCJ9.eyJkYXRhY2VudGVyIjoidXMiLCJrZXkiOiI0ZTQzN2Y4OTFiOTM4YTY0MWVmYzA0YTlhZmE0Yzc5MTI0OWY5MjY0OTExODQzMTQzNDFhMGUxNGYwMTQ1ODViMjFkMzk1NzJkMGJhZTNlZDQyZjQ2NmFiMmViY2YxMWExNDQyMjAxMDc0NWY2NmZiZTYxYjhlMDJkOTE3MDM5Nzk5NmY3MjA0ZmNhMzBkZDc5ZTVmZjM0OWVlNjAxZDY0ODMyYjU4ZDU3MDBjNDUwOGQwNDk0NmNkMTIwZTIwM2MxMjcxNmRkZTcwMTQ3YTQ4NGM4YThmMDNjNjVlZjIzMC5iMzlmN2U0NGIxOWYwOWNhYjI0N2EzZTkxMDJmZmYxOC44NzEwNDAyYWIzM2FkMGEyOGY3ZDk1YTViZmVhOTkyY2JmZjFkOTYyZGNhOTkxMzU1MDdkYmZjYzUxMmE3ZmQ0In0.fliEaAy1joOyxOidzjv58HBfbTmta_9Q7JwW2WeFyVOeW7BhrvQPwzJ7VQya7n92JOf9eqnOk0wLyZq_jIkW5oiPAX_zw-4geBQcDol1iUIvIIh4tV3z--MXn62ST8CIlaApysqx1x6luPvYzXSMLvo_By2fqBPVAcL4blvVs54';

PendoSDK.setup(pendoKey,navigationOptions);
});

2. ログイン、登録など、訪問者が識別されるPendoを初期化します。

const visitorId = 'VISITOR-UNIQUE-ID';
const accountId = 'ACCOUNT-UNIQUE-ID';
const visitorData = {'Age': '25', 'Country': 'USA'};
const accountData = {'Tier': '1', 'Size': 'Enterprise'};

PendoSDK.startSession(visitorId,accountId, visitorData, accountData);

備考

  • visitorId：ユーザーの識別子（例：John Smith）
  • visitorData：ユーザーのメタデータ（例：メール、電話、国など）
  • accountId：ユーザーの特定の企業やグループの所属（例：Acme Inc.）
  • accountData：アカウントのメタデータ（例：種別、レベル、ARRなど）

nullまたは""をvisitorIdに渡す、もしくはinitParams.visitorIdを設定しないと、匿名の訪問者IDが生成されます。

 

ステップ3：タグ付けとテストのためのモバイルデバイス接続

以下の手順により、ページのタグ付けとガイドテスト機能が有効になります。

1. info.plistファイルにPendoのURLスキームを追加します。

    1. ［アプリターゲット（App Target）］＞［情報（Info）］＞［URLのタイプ（URL Types）］で、「+」ボタンをクリックして新しいURLを作成します。
    2. ［識別子（Identifier）］を「pendo-pairing」または任意の名前に設定します。
    3. ［URLスキーム（URL Scheme）］をpendo-787d1d7dに設定します。

2. 関数（application、openURL、options）を追加または修正します。

func application(_ app: UIApplication,
open url: URL,
options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool
{
  if url.scheme?.range(of: "pendo") != nil {
    PendoManager.shared().initWith(url)
      return true
  }
  //コードをこちらに挿入…
  return true
}

ステップ4：インストールの検証

  • Xcodeを使用したテスト：
    • Xcodeにアタッチしてアプリを実行します。
    • デバイスログを確認し、次のメッセージを探します。

Pendo Mobile SDK was successfully integrated and connected to the server.
（PendoモバイルSDKは正常に統合され、サーバーに接続されました。）

  • クリックして、SDKインテグレーションのための検証プロセスに進みます。
  • Pendo UIを使用したテスト：
    • ［サブスクリプション設定（Subscription Settings）］で、アプリが［インテグレーション済（Integrated）］として表示されていることを確認します。

 

アプリをPendo SDKと統合できたら、ページへのタグ付けや各アプリのガイドの作成を開始できます。

 

訪問者とアカウントはどのように追跡できますか？

setup：このAPIを使用して、サーバーとの接続を作成します。訪問者セッションは、使用しているナビゲーションライブラリを示します。

PendoSDK.setup(appkey,navigationlibrary);

startSession：このAPIを使用して、訪問者セッションの記録を開始します。

セッションを開始するために、APIは現在の訪問者IDとそれに関連付けられたデータ（アカウントID、訪問者データ、アカウントデータ）を更新します。通常、ユーザーがすでにログインしている場合に使用されます。

PendoSDK.startSession(visitorId, accountId, visitorData, accountData);

startSession：このAPIを使用して、匿名の訪問者のデータを収集するための訪問者セッションの記録を開始します。

PendoSDK.startSession(null,null, null, null)
setVisitorData：このAPIを使用して、セッションの途中で訪問者のデータを更新できます。主に訪問者が詳細を更新する際に使用されます。
PendoSDK.setVisitorData({"KEY1":"VALUE1","KEY2":"VALUE2",...})
setAccountData：このAPIを使用して、セッションの途中でアカウントデータを更新できます。主にアカウントデータを更新したい場合に使用されます。
PendoSDK.setAccountData({"KEY1":"VALUE1","KEY2":"VALUE2",...})

React Nativeバージョン0.6以降

 

React Nativeバージョン0.6以降では何が変わったのですか？

React Nativeバージョン0.6以降の階層レイアウトの変更が、Pendo SDKによるAndroidアプリのページの識別方法に影響することを確認しました。注：React Nativeバージョン0.6以降を使用している、または使用する予定のAndroidアプリにのみ適用されます。

タグ付きページへの影響は？

一部のページでは、分析の収集やガイドの表示を行うために、更新が必要な場合があります。このようなページは、 Pendoの［ページアラート（Page Alert）］タブにアクセスすることで、簡単に確認し、修正することができます。ページアラートは、以前はアクティビティがあったにもかかわらず、現在は閲覧数がゼロになっているページをプロアクティブに表示するため、必要に応じてページをすぐにチェックして更新することができます。

  1. ページアラートを確認し、「ページを更新」して新しいページ構造をキャプチャします。これが完了すると、ページに関連するアナリティクスやガイドが期待通りに表示されます。
  2. また、ページアラートをサブスクライブすると、ページの更新が必要になったときにメールで通知されるのでお勧めです。

 

 

関連記事