トラックイベントを使用した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",
           }
         ],
      ]
  }
}

 

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

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

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

 

トラックイベント

react-native-navigation 6.0以降、またはreact-navigation 5.0以降のどちらのナビゲーションライブラリバージョンも使用しない場合は、Pendoトラックイベントを設定して分析をキャプチャします。つまり、コードレスソリューションを使用することはできず、コードを使用してイベントを追跡し、Pendoに分析イベントを通知する必要があります。

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