React Nativeにアプリ解析ツールのReproを導入してみる
July 29, 2017
React Native の iOS プロジェクトにアプリ解析・マーケティングツールの Reproを導入する手順を調べたのでまとめます。
環境
- React Native 0.46.4
- Repro SDK 2.1.12
手順
1. Repro のアプリを作成
Repro にユーザ登録して、アプリを作成。
発行されるトークンは後で使うのでメモっておきます。
2. React Native のプロジェクト作成〜SDK インストール
React Native のプロジェクトを作って Repro の SDK を入れていきます。
$ react-native init ReproTest
$ cd ReproTest/ios
$ pod initPodfile にpod 'Repro'を記述します。
あと、僕の環境ではThe target ``ReproTest-tvOSTests`` is declared twiceというエラーが出たので、
ReproTest-tvOSTestsのターゲットを一つ削除する必要がありました。
で最後にpod installを実行すると SDK がインストールされます。
3. SDK を呼び出す
open ReproTest.xcworkspaceで Xcode を開いて、AppDelegate.mを編集します。
トークンを書き換えるのを忘れないようにしてください。
| /** | |
| * Copyright (c) 2015-present, Facebook, Inc. | |
| * All rights reserved. | |
| * | |
| * This source code is licensed under the BSD-style license found in the | |
| * LICENSE file in the root directory of this source tree. An additional grant | |
| * of patent rights can be found in the PATENTS file in the same directory. | |
| */ | |
| #import "AppDelegate.h" | |
| #import <React/RCTBundleURLProvider.h> | |
| #import <React/RCTRootView.h> | |
| #import <Repro/Repro.h> | |
| @implementation AppDelegate | |
| - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions | |
| { | |
| NSURL *jsCodeLocation; | |
| jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil]; | |
| RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation | |
| moduleName:@"ReproTest" | |
| initialProperties:nil | |
| launchOptions:launchOptions]; | |
| rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1]; | |
| self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; | |
| UIViewController *rootViewController = [UIViewController new]; | |
| rootViewController.view = rootView; | |
| self.window.rootViewController = rootViewController; | |
| [self.window makeKeyAndVisible]; | |
| // Setup Repro | |
| [Repro setup:@"YOUR_APP_TOKEN"]; | |
| // Start Recording | |
| [Repro startRecording]; | |
| return YES; | |
| } | |
| @end |
4. アプリ実行
プロジェクトトップで以下を実行し、アプリをシミュレータで起動します。
$ react-native run-iosシミュレータが立ち上がるので、しばらく動かしてホームボタンを押します(Command + Shift + h)。 少しすると Repro に動画が上がってるはずです！
おわりに
以上、React Native のプロジェクトに Repro を入れて動画撮影までを行いました。
ざっと調べたところ動画は取得できますが、 イベントトラッキングなどその他機能は React Native では使えなさそうでした。
【Xamarin/React Native】グロースハックツール「Repro」の SDK を担当するエンジニア募集！
という求人があるので、React Native の SDK は現在開発中 or これから開発されるのかなと笑
SDK 出る以前に何とかするなら、今のところ自分で Bridge を書く必要があるみたいです。
その場合はこちらの記事などが参考になると思います。
