React Native Navigationを使用したExpo

Expoを使用して、iOSとAndroidの両方に対応するReact Navigationアプリを簡単に開発してデプロイします。

注:Pendoは、Expo SDK 41以降とのインテグレーションをサポートしています。

 

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

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

NPMを使用する場合:

npm install --save rn-pendo-sdk

YARNを使用する場合:

yarn add rn-pendo-sdk

2. アプリケーションフォルダーapp.jsonを開き、rn-pendo-sdkプラグインをPluginsセクションに追加します。

{
 "expo": {
   ...
      "plugins": [
       ...
         [
           "rn-pendo-sdk",
           {
               "ios-scheme": "COPY YOUR IOS SCHEME HERE",
               "android-scheme": "COPY YOUR ANDROID SCHEME HERE",
           }
         ],
      ]
  }
}

3. Javascriptの難読化を変更します。
本番用にバンドルする際、React Nativeでは、クラス名と関数名を縮小してバンドルのサイズを縮小します。つまり、コードレスソリューションに使用される元のコンポーネント名にはアクセスできなくなります。

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

const { getDefaultConfig } = require('expo/metro-config');
const config = getDefaultConfig(__dirname);
config.transformer.minifierConfig= {
   keep_classnames: true, // Preserve class names
   keep_fnames: true, // Preserve function names
   mangle: {
      keep_classnames: true, // Preserve class names
      keep_fnames: true, // Preserve function names
   }
}
module.exports = config;

 

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

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

import { PendoSDK, NavigationLibraryType } from 'rn-pendo-sdk';

    Navigation.events().registerAppLaunchedListener(() => {
       const navigationOptions = {library:
NavigationLibraryType.ReactNativeNavigation, navigation: Navigation};

       const pendoKey = "アプリキーをここにコピーしてください";

        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. EASを使用するかローカルでアプリケーションを開発し、シミュレーターまたは実際のデバイスでアプリケーションを実行します。
  2. デバイスログを確認し、次のメッセージを探します。
    Pendo Mobile SDK was successfully integrated and connected to the server.
    (PendoモバイルSDKは正常に統合され、サーバーに接続されました。)
  3. Pendo UIを使用してテストを行います。
  4. [サブスクリプション設定(Subscription Settings)]に、[インテグレーション済(Integrated)]と示されたアプリが表示されていることを確認します。

 

開発者向けドキュメント

  • APIドキュメントはこちらから入手できます。
  • Pendo SDKを組み込んだReact Nativeアプリのサンプルはこちらから入手できます。