Last updated 2024年8月15日

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. build.gradle の repositories ブロックに Rokt SDK を追加します:

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

2. 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 Managed Workflow

推奨されるワークフローは、カスタム開発クライアントを使用することです。新しいアプリを開始する場合、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";

2. Rokt SDKを初期化します:

// 以下はデモ統合を表示します。統合を表示するには:
// 1) 統合テストタグID (222) をあなたのユニークなRoktアカウントIDに置き換えます
// 2) Y.Y.Yをアプリケーションバージョンに置き換えます

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

デバッグ

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

次のステップ

次のステップは、統合の使用例によって異なります。詳細については、以下のリソースを確認してください:

• Add a placement
• Record conversions