js-expo

導入: React Native (Expo)¶

注釈

本ページでは、Expo (Managed Workflow) を利用する場合の導入方法を紹介しています。React Native で Expo を利用しない場合または Bare Workflow で開発を行う場合の方法は導入: React Native を参照してください。

Expo Plugin のインストール¶

プロジェクトに対し、以下の通りパッケージをインストールしてください。

npx expo install react-native-repro
npx expo install expo-repro

app.json ファイルを編集する¶

以下のようにプロジェクトの app.json ファイルに設定を記述してください。

{
    "expo": {
        "plugins": [
            [
                "expo-repro",
                {
                    "sdkToken": "00000000-0000-0000-0000-000000000000"
                }
            ]
        ]
    }
}

キー	データ型	概要	詳細
`sdkToken`	String	アプリで使用するSDKトークン	管理画面の設定 > プロジェクト設定に記載されている SDK トークンを設定してください。設定は必須です。
`logLevel`	String	ログレベル	デフォルトで info レベルが設定されています。変更する場合のみ指定が必要です。設定可能な値は “debug”, “info”, “warn”, “error” のいずれかです。
`endUserOptInDefault`	Boolean	オプトイン/オプトアウト初期状態の指定	デフォルトで “true”（初期状態でオプトイン）が設定されています。変更する場合のみ指定が必要です。
`advertisingIdentifierCollectionEnabled`	Boolean	広告ID取得設定	デフォルトで “false”（取得しない）が設定されています。広告ID（AAIDおよびIDFA）の取得を行う場合のみ “true” を指定してください。
`openUrlFilterRegExList`	Array(String)	ユニバーサルリンクのURLパターン	ユニバーサルリンク機能を使用する際に指定が必要なURLパターンを設定します。この機能を使用する場合のみ記述してください。詳細はプッシュ通知（iOS）を参照してください。
`iosHtmlInAppBaseUrl`	String	HTMLアプリ内メッセージのベースURL	デフォルトで `https://io.repro.repro` が設定されています。変更する場合のみ指定が必要です。詳細は App-Bound Domains を有効にしている場合（iOSのみ）を参照してください。
`androidPushNotificationChannelId`	String	プッシュ通知のチャネルID	プッシュ通知のチャネルIDを設定します。プッシュ通知機能を利用する場合のみ指定してください。（プッシュ通知機能を利用しない場合は、この項目を設定しないでください）
`androidPushNotificationChannelName`	String	Android用プッシュ通知のチャネル名	プッシュ通知のチャネル名を設定します。プッシュ通知機能を利用する場合のみ指定してください。
`androidPushNotificationChannelDescription`	String	Android用プッシュ通知のチャネルの説明	プッシュ通知のチャネルの説明を設定します。プッシュ通知機能を利用する場合のみ指定してください。
`androidPushNotificationShowBadge`	Boolean	Android用プッシュ通知受信時のバッジ機能の利用可否の指定	プッシュ通知のバッジ表示可否を設定します。プッシュ通知機能を利用する場合のみ指定してください。デフォルトで “true” が設定されています。

アプリケーションのネイティブコードを生成する¶

以下のコマンドを実行し、アプリケーションをビルドしてください。

npx expo prebuild --clean

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");

        ...
    }
}

class MainActivity : AppCompatActivity() {

    override fun 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...¶

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