EcommRN

React Native SDKを使用した統合

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

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

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

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

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

   $ npm install

Androidの設定

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

1. Rokt SDKをMavenリポジトリに追加します:

allprojects {
    repositories {
        ...
        maven {
            url  "https://rokt-eng-us-west-2-mobile-sdk-artefacts.s3.amazonaws.com"
        }
    }
}

または、Gradle 7.0.0以上を使用している場合、リポジトリ設定がトップレベルのbuild.gradleファイルからsettings.gradleファイルに移動した場合、settings.gradleファイルに以下を追加します。

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        google()
        mavenCentral()
        maven {
            url "https://rokt-eng-us-west-2-mobile-sdk-artefacts.s3.amazonaws.com"
        }
    }
}

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

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

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

3. multiDexEnabledがtrueに設定されていること、およびMind SDKバージョン18以上をターゲットにしていることを確認します:

android {
    ...
    defaultConfig {
        ...
        multiDexEnabled true,
        minSdkVersion 18
    }
}

iOSの設定

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

cd ios && pod install

注記

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

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

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

SDKの初期化

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

• Initialize(string ROKT_TAG_ID, string AppVersion)
• Execute(string TemplateVersion, object UserAttributes, object placements, function onLoad)

initializeメソッドは、executeメソッドで必要となるAPI結果を取得します。そのため、両方の呼び出しをすぐに隣接して配置しないことが最善です。アプリの最初の数ビュー内でinitializeメソッドを呼び出すことをお勧めします。

SDKを初期化するには、以下を行います:

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

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