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

React Native Navigationを使用したExpo

最終更新日:

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

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

 

ステップ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アプリのサンプルはこちらから入手できます。

 

関連記事