saitoxu.io

AboutTwitterGitHub

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 init

Podfile に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
view raw AppDelegate.m hosted with ❤ by GitHub

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 を書く必要があるみたいです。

その場合はこちらの記事などが参考になると思います。

Cocoapods で入れたライブラリを React Native と bridge して使う


© 2020, Yosuke Saito