Repro - Mobile Analytics for growth
English
アカウント登録 管理画面に戻る
  • 動作環境
  • 管理画面ガイド
  • 開発ガイド
    • アカウント作成
      • Repro アカウントを作成
      • SDK の導入
        • iOS
        • Android
        • Unity
        • Cordova
        • Monaca
        • Cocos2d-x
        • React Native
          • React Native SDK のインストール
          • React Native 0.60.0以上
          • React Native 0.60.0未満
          • セットアップ
          • イベントをトラックする
          • ユーザーIDをセットする
          • プッシュ通知を配信する
          • Next...
        • React Native (Expo)
        • Flutter
        • Web
    • iOS/Android SDK
    • Web
    • オーディエンスAPI
    • オーディエンスインポート(β)
    • プッシュAPI
    • ユーザープロフィールAPI
    • ユーザープロフィールバルクインポート
    • ニュースフィードAPI
    • 削除ユーザー登録API
    • Booster導入ガイド
    • メール(β)
  • リリースノート
  • FAQ
js-react-native

導入: 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をセットすることにより、下記のメリットがあります:

  • 複数のデバイスを使っているユーザーを同一視できる
  • キャンペーンの配信対象の抽出がより精緻になる

詳しくは こちら をご覧ください。

プッシュ通知を配信する¶

Reproでは、管理画面もしくはAPIからプッシュ通知配信をすることができます。プッシュ通知配信をするための実装は こちら をご覧ください。

Next...¶

その他の機能についての詳細は、以下をご覧ください。

  • セッション・ライフサイクル
  • イベントトラッキング
  • ユーザーID
  • デバイスID
  • ユーザープロフィール
  • WebView
  • オプトアウト機能
  • アプリ内メッセージ
  • プッシュ通知
  • Adjustで取得したアトリビューションデータをReproにセットする
  • AppsFlyerで取得したアトリビューションデータをReproにセットする
  • « 導入: Cocos2d-x
  • 導入: React Native (Expo) »

About Us Careers Terms of Service Privacy Policy Cookie Policy

© 2022 Repro Inc.