React Nativeフレームワークで作成されたモバイルアプリでは、アプリがReact Nativeとナビゲーションライブラリの基準を満たしていれば、Pendoのコードレスソリューションを利用できます。
これには、SDKのインストール時までさかのぼって機能するノーコード分析や、ツールチップやウォークスルーを含むあらゆるモバイルガイドのタイプなど、ネイティブモバイルアプリケーションで利用できるPendoの優れたモバイル機能すべてが含まれます。
注:モバイルアプリがコードレスのReact Nativeサポートの技術要件を満たさない場合は、トラックイベントベースのソリューションを使用できます。
前提条件
- React Nativeバージョン0.6以降の上に構築されたReact Nativeアプリケーション
- 「React Navigation」ライブラリバージョン5以降を使用するReact Nativeアプリケーション
- または
- 「React Native Navigation」ライブラリバージョン6以降を使用するReact Nativeアプリケーション
どのReact Native設定をアプリで使用しているかについては、開発者に確認してください。
インストール手順
- [設定(Settings)]>[サブスクリプション設定(Subscription Settings)]>[他のアプリを追加(Add Another App)]を選択し、React Nativeアプリタイプを選択して、iOSアプリを作成します。
Pendoでは、2種類のアプリケーション(iOS用およびAndroid用)が[サブスクリプション設定(Subscription Setting)]ページに作成されます。
-
アンケートに記入して統合するiOSアプリを選択します。
- 使用しているReact Nativeのバージョンを選択し、[次へ(Next)]をクリックします。
- 使用しているナビゲーションライブラリを選択し、[次へ]をクリックします。
- 使用しているナビゲーションライブラリのバージョンを選択し、[次へ]をクリックします。
- [インストール続行(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の難読化を変更する
アプリケーションの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スキームを追加します。
-
- [アプリターゲット(App Target)]>[情報(Info)]>[URLのタイプ(URL Types)]で、「+」ボタンをクリックして新しいURLを作成します。
- [識別子(Identifier)]を「pendo-pairing」または任意の名前に設定します。
- [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)
React Nativeバージョン0.6以降
React Nativeバージョン0.6以降では何が変わったのですか?
React Nativeバージョン0.6以降の階層レイアウトの変更が、Pendo SDKによるAndroidアプリのページの識別方法に影響することを確認しました。注:これは、React Nativeバージョン0.6以降を使用している、または使用を計画しているAndroidアプリにのみ適用されます。
タグ付きページへの影響は?
一部のページでは、分析の収集やガイドの表示を行うために、更新が必要な場合があります。このようなページは、 Pendoの[ページアラート(Page Alert)]タブにアクセスすることで、簡単に確認し、修正することができます。ページアラートは、以前はアクティビティがあったにもかかわらず、現在は閲覧数がゼロになっているページをプロアクティブに表示するため、必要に応じてページをすぐにチェックして更新することができます。
- ページアラートを確認し、「ページを更新」して新しいページ構造をキャプチャします。これが完了すると、ページに関連するアナリティクスやガイドが期待通りに表示されます。
- また、ページアラートをサブスクライブすると、ページの更新が必要になったときにメールで通知されるのでお勧めです。