Last updated 2024年12月5日

React Native SDKの初期化

Roktのパートナーは、React Nativeアプリケーションでオーバーレイや埋め込み配置を表示するためにRokt SDKを使用でき、Roktの広告主はキャンペーンのコンバージョンを記録するためにそれを使用できます。SDKのすべての使用事例は、アプリケーションにSDKを統合し初期化するために同じ初期手順に従います。高レベルで見ると、これらの手順は次の通りです:

1. SDKをReact Nativeアプリケーションに統合する
2. Androidアプリケーション用に構成する
3. iOSアプリケーション用に構成する
4. SDKを初期化する

これらの手順に従った後、SDKのexecuteメソッドは、必要な使用事例に合わせてさまざまな方法で使用できます。

SDKをReact Nativeアプリケーションに統合する

SDKをReact Nativeアプリケーションに統合するには、次の手順を実行する必要があります:

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

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

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

   $ npm install

Android の設定

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

1. build.gradle の repositories ブロックに Rokt SDK を追加します:

allprojects {
    repositories {
        ...
        maven {
            url  "https://apps.rokt.com/msdk"
        }
    }
}

2. ReactApplication クラスで getPackages に RoktEmbeddedViewPackage を追加します:

// クラスをインポートする
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の設定

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

cd ios && pod install

注記

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

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

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

Expoを使用した設定

Rokt React Native SDKはカスタムネイティブコードを必要とするため、Expo Goでは使用できません。SDKは、ベアワークフローおよび管理ワークフローの両方を介してExpoに統合できます。

Expoベアワークフロー

ベアワークフローを使用する場合は、Androidの設定およびiOSの設定の手順に従ってください。

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

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

ExpoマネージドワークフローでRokt React Native SDKを構成するには、app.jsonまたはapp.config.jsファイルのプラグイン配列に@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内でinitialzeを呼び出すことをお勧めします。

SDKを初期化するためには、次のことが必要です：

1. Rokt SDKをJavaScript/TypeScriptファイルにインポートします：

import { Rokt, RoktEmbeddedView } from "@rokt/react-native-sdk";

2. 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.setLoggingEnabled(true); APIを使用して、Rokt SDKからのデバッグログを有効にします。

次のステップ

次のステップは、統合のユースケースによります。詳細情報については、これらのリソースをチェックしてください：

• プレースメントの追加
• コンバージョンの記録