導入: React Native¶
React Native SDK のインストール¶
注釈
本ページでは、Expo を使用しない場合 および Bare Workflow で Expo を利用する場合の導入方法を紹介しています。 Expo (Managed Workflow) で開発を行う場合の方法は 導入: React Native (Expo) を参照してください。
注釈
Reproでは React Native のバージョン 0.41.2 以上を推奨しています。
注釈
react-native init
ではなく、 create-react-native-app
もしくは expo init
を利用してプロジェクトを作成した場合は、プロジェクトを eject する必要があります。詳細な手順については、ご利用のビルド環境に応じたドキュメントを参照ください。 Expo のサンプル
React Native プロジェクトが下記のようなディレクトリ構造となっていることをご確認ください:
<PROJECT_ROOT>
├── app.json
├── package.json
├── node_modules
│ └── ...
├── android
│ ├── ...
│ └── build.gradle
└── ios
├── ...
└── <APP_NAME>.xcodeproj
下記のコマンドで Repro の React Native SDK をインストールしてください:
React Native 0.60.0以上¶
$ npm install react-native-repro --save
iOSプロジェクトへの導入¶
$ cd ios
$ pod install
Androidプロジェクトへの導入¶
android/build.gradle
を開き、下記の設定を追加してください:
allprojects {
repositories {
...
maven {
url "$rootDir/../node_modules/react-native-repro/sdk-android"
}
}
}
React Native 0.60.0未満¶
$ npm install react-native-repro --save
$ react-native link repro-react-native
iOSプロジェクトへの導入(CocoaPodsを利用している場合)¶
$ cd ios
$ pod install
iOSプロジェクトへの導入(CocoaPodsを利用していない場合)¶
プロジェクトがCocoaPodsを利用していない場合のみ、ReproをXcodeプロジェクトに手動で追加する必要があります。次の2つのステップを実施してください。
Framework Pathの設定¶
次に、 Project Setting > メインプロジェクトのTarget > Build Settings を開き、 Framework Search Path を選択し、下記のパスを追加してください:
$(PROJECT_DIR)/../node_modules/react-native-repro/sdk-ios/
Androidプロジェクトへの導入¶
android/build.gradle
を開き、下記の設定を追加してください:
allprojects {
repositories {
...
maven {
url "$rootDir/../node_modules/react-native-repro/sdk-android"
}
}
}
セットアップ¶
iOS¶
Repro
を AppDelegate
でインポートし、 application:didFinishLaunchingWithOptions:
で セッション を開始してください。 Repro setup
は React Native の初期化処理より前に呼び出す必要があります。
YOUR_APP_TOKEN
には管理画面の 設定 > プロジェクト設定 > 認証情報 に記載されている SDK トークン を設定してください。
#import <Repro/Repro.h>
...
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
// Setup Repro
[Repro setup:@"YOUR_APP_TOKEN"];
// ... react-native javascript setup code ...
return YES;
}
Android¶
MainApplication.java
を開き、Applicationの onCreate
メソッドで新しい セッション を開始してください。Repro setup
は React Native の初期化処理より前に呼び出す必要があります。
YOUR_APP_TOKEN
には管理画面の 設定 > プロジェクト設定 > 認証情報 に記載されている SDK トークン を設定してください。
import io.repro.android.Repro;
public class MyApplication extends Application {
@Override
public void onCreate() {
super.onCreate();
// Setup Repro
Repro.setup(this, "YOUR_APP_TOKEN");
// SoLoader.init(...) and other react-native javascript setup code ...
}
}
React Native で Repro をインポートする¶
JavaScript のコード内で下記のように Repro をインポートしてください:
import Repro from 'react-native-repro';
これにより、 JavaScript のコード内から Repro
オブジェクトのメソッドを呼び出せます:
Repro.track("user review", { rating: 3 });
SDKが収集した情報は定期的にサーバーにアップロードされます。
イベントをトラックする¶
意味のある分析や、マーケティング施策を実施するためには、適切なユーザーグループを絞り込むことが重要です。イベントをトラックしてユーザーの行動を記録することにより、管理画面上で目的に応じた適切なユーザーグループを選択することができるようになります。
イベントを用いたユーザーグループ指定の例:
どういうイベントをとるべきかわからない場合は、まず各画面の表示時にイベントをとってみることをおすすめします。
例:
@implementation MainViewController
- (void)viewDidAppear:(BOOL)animated
{
[super viewDidAppear:animated];
[Repro track:@"MainViewController" properties:nil];
...
}
class MainViewController: UIViewController {
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
Repro.track(event: "MainViewController", properties: [:])
...
}
public class MainActivity extends AppCompatActivity {
@Override
protected void onResume() {
super.onResume();
Repro.track("MainActivity");
...
}
}
#include "ReproCpp.h"
...
ReproCpp::track("Initialized");
Repro.Track ("Initialized");
// Will be written later
class MainScreen extends React.Component {
componentDidMount() {
Repro.track("MainScreen", {});
}
...
}
import Repro from 'react-native-repro';
...
Repro.track("MainScreen", {});
import 'package:repro_flutter/repro.dart';
...
await Repro.track("Initialized");
ユーザーIDをセットする¶
Repro では分析結果はユーザー単位で集計しています。ユーザーIDをセットすることにより、下記のメリットがあります:
- 複数のデバイスを使っているユーザーを同一視できる
- キャンペーンの配信対象の抽出がより精緻になる
詳しくは こちら をご覧ください。
Next...¶
その他の機能についての詳細は、以下をご覧ください。