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

トラックイベントを使用したExpo

Expoを使用して、iOSとAndroidの両方に対応するReact Navigationアプリを簡単に開発してデプロイします。react-native-navigation 6.0以降、またはreact-navigation 5.0以降のどちらのナビゲーションライブラリバージョンも使用しない場合は、コードレスソリューションを使用できないため、アナリティクスイベントを収集してPendoに通知するようにPendoトラックイベントを設定する必要があります。

注：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", 
            }
          ],
       ]
   }
}

 

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

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

'rn-pendo-sdk'から{ PendoSDK, NavigationLibraryType }をインポートします。

 

トラックイベントの設定

1. componentDidMountメソッドに次のコードを追加します。

    const navigationOptions = {library: NavigationLibraryType.Other, 
navigation: null};
    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);

3. イベントを追跡するアプリケーションファイルに、以下のコードを追加します。

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

    ...
    PendoSDK.track('name', {firstProperty: 'firstPropertyValue', 
secondProperty: 'secondPropertyValue'});

備考

  • 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ドキュメントはこちらから入手できます。

 

関連記事