メインコンテンツまでスキップ

React Native SDK (レガシー) の初期化

Rokt のパートナーは、React Native アプリケーション用の Rokt SDK を使用して、オーバーレイまたは埋め込みプレースメントを表示できます。また、Rokt の広告主は、キャンペーンのコンバージョンを記録するために使用できます。SDK のすべてのユースケースは、アプリケーションに SDK を統合し初期化するための同じ初期ステップに従います。これらのステップは大まかに以下の通りです:

  1. React Native アプリケーションへの SDK の統合
  2. Android アプリケーションの設定
  3. iOS アプリケーションの設定
  4. SDK の初期化

これらのステップに従った後、SDK の execute メソッドを様々な方法で使用し、必要なユースケースに適合させることができます。

React Native アプリケーションへの SDK の統合​

React Native アプリケーションに SDK を統合するには、以下の手順を実行します:

  1. 次のコマンドを実行して Rokt SDK をインストールします:

    $ npm install @rokt/react-native-sdk --save

  2. 次のコマンドを実行して、すべてのパッケージと依存関係をインストールします:

    $ npm install

Android の設定​

Android アプリケーション用に Rokt React Native SDK を設定するには、以下の手順を行います:

  1. バージョン 4.8.1 以下の場合、build.gradle のリポジトリブロックに Rokt SDK を追加します:
allprojects {
    repositories {
        ...
        maven {
            url  "https://apps.rokt.com/msdk"
        }
    }
}
  1. ReactApplication クラスで、RoktEmbeddedViewPackage を getPackages に追加します:

// クラスをインポート
import com.rokt.reactnativesdk.RoktEmbeddedViewPackage;

@Override
protected List<ReactPackage> getPackages() {
@SuppressWarnings("UnnecessaryLocalVariable")
    List<ReactPackage> packages = new PackageList(this).getPackages();

    // RoktEmbeddedViewPackage を追加
    packages.add(new RoktEmbeddedViewPackage());
    return packages;
}
注記

SDK バージョンがメジャーバージョン 4 以下の場合、異なるパッケージ名 com.reactlibrary.RoktEmbeddedViewPackage; を使用します

  1. multiDexEnabled が true に設定されていること、および Mind SDK バージョン 18 以上をターゲットにしていることを確認します:
android {
    ...
    defaultConfig {
        ...
        multiDexEnabled true,
        minSdkVersion 21
    }
}
注記

Kotlin バージョンの競合でビルドが失敗する場合は、可能な解決策についてリンクを確認してください: https://github.com/facebook/react-native/issues/35979

iOSの設定​

iOSアプリケーション用にRokt React Native SDKを設定するには、iOSフォルダに移動して次のコマンドを実行します:

cd ios && pod install
注記

Mac M1アーキテクチャはCocoapodsと直接互換性がありません。ポッドのインストール時に問題が発生した場合は、次のコマンドを実行することで解決できます:

sudo arch -x86_64 gem install ffi
arch -x86_64 pod install

これらのコマンドは、動的にリンクされたライブラリをロードするためのffiパッケージをインストールし、適切なアーキテクチャでpod installを実行できるようにします。

Expoを使用した設定​

Rokt React Native SDKはカスタムネイティブコードを必要とするため、Expo Goでは使用できません。SDKは、bare workflowとmanaged workflowの両方を介してExpoに統合できます。

Expo Bare Workflow​

bare workflowを使用する場合は、Androidの設定およびiOSの設定の手順に従ってください。

Expo マネージドワークフロー​

推奨されるワークフローは、カスタム開発クライアントを使用することです。新しいアプリを開始する場合は、npx create-react-native-app -t with-dev-client を実行して自動的にセットアップすることができます。これにより、Android および iOS ビルドのために Expo Application Services (EAS Build) を使用することも可能になります。

Expo マネージドワークフローで Rokt React Native SDK を設定するには、app.json または app.config.js ファイルの plugins 配列に @rokt/react-native-sdk プラグインを追加します:

{
  "expo": {
    "plugins": ["@rokt/react-native-sdk"]
  }
}

EAS ビルドを使用していない場合は、プラグインの変更を反映させるために、カスタムネイティブコードの追加ガイドに記載されているように expo prebuild --clean コマンドを使用してアプリを再ビルドする必要があります。

SDK の初期化​

Rokt モジュールは2つのメソッドを提供します:

メジャーバージョン 3​

  • initialize(roktTagId: string, appVersion: string): void
  • execute(viewName: string, attributes: Record<string, string>, placeholders: Record<string, number | null>, callback: () => void): void

メジャーバージョン 4​

  • initialize(roktTagId: string, appVersion: string, fontFilesMap?: Record<string, string>): void
  • execute(viewName: string, attributes: Record<string, string>, placeholders: Record<string, number | null>): void

initialize メソッドは、execute メソッドに必要なAPI結果を取得します。そのため、両方の呼び出しをすぐに隣接して配置しないことが最善です。アプリの最初のいくつかのビュー内で initialize メソッドを呼び出すことをお勧めします。また、componentDidMount または useEffect 内で initialize を呼び出して、複数の不要な呼び出しを防ぐことも推奨されます。

SDKを初期化するには、以下の手順を実行します:

  1. Rokt SDKをJavaScript/TypeScriptファイルにインポートします:
import { Rokt, RoktEmbeddedView } from "@rokt/react-native-sdk";
  1. Rokt SDKを初期化します:
// 以下はデモ統合を表示します。統合を表示するには:
// 1) 統合テストタグID (222) をあなたのユニークなRoktアカウントIDに置き換えます
// 2) Y.Y.Y をアプリケーションバージョンに置き換えます

Rokt.initialize("222", "Y.Y.Y");

初期化ステータスの受信​

バージョン 4.6.0 から、Rokt SDK は 'RoktEvents' チャンネルを通じて初期化ステータスを発行します。

eventManagerEmitter.addListener('RoktEvents', (data) => {
  if (data.event == 'InitComplete') {
    console.log(`Rokt init completed with status ${data.status}`);
  }
});

デバッグ​

Rokt SDK からのデバッグログを有効にするには、Rokt.setLoggingEnabled(true); API を使用します。

次のステップ​

次のステップは、統合のユースケースによって異なります。詳細については、以下のリソースを参照してください。

この記事は役に立ちましたか？
Last updated Oct 29, 2025