開発者向けインストールガイド(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. また、ページアラートをサブスクライブすると、ページの更新が必要になったときにメールで通知されるのでお勧めです。