# React ネイティブプラグインのインテグレーション

> Unity LevelPlay React ネイティブプラグイン(v8.4.0+)をアプリケーションに統合して、広告メディエーションと Monetization を可能にします。

## 前提条件##prerequisites

* React ネイティブプラグインは、Android 用のネイティブ SDK バージョン 7.2.4.1 および iOS 用の 7.2.4 からサポートされています。
* このプラグインは JavaScript と TypeScript の両方をサポートします。型宣言は パッケージに含まれています。
* React ネイティブ 0.66 以降をサポート。
* iOS バージョン サポートはネットワークごとに定義されます。 LevelPlay 広告と LevelPlay メディエーションは、iOS バージョン 12 以上、XCode バージョン 15.4 以上をサポートします。
* Android オペレーティング システム バージョン 5.0（API レベル 21）以上

## ステップ 1. Unity LevelPlay React Mediation プラグインをプロジェクトに追加します。##step-1.-add-the-unity-levelplay-react-mediation-plugin-to-your-project

### NPM インテグレーション##npm-integration

npm を使用して Unity LevelPlay React ネイティブプラグインをプロジェクトに追加するには、2 つのオプションがあります。

1. npm CLI コマンドの実行

   ```shell
   npm install Unity-levelplay-mediation
   ```

2. パッケージ.json ファイルの更新:Unity レベルの play-mediation 定義をパッケージ.json ファイルに追加します。

   ```json
   "dependencies": {
       "unity-levelplay-mediation":"9.1.0"
   }
   ```

3. **広告品質 SDK の追加**

   > **Note:**
   >
   > React ネイティブプラグイン バージョン 3.1.1 以降、Ad 品質 は LevelPlay SDK に統合され、LevelPlay が実装されると自動的に初期化されます。LevelPlay がビルドに実装されていない場合、または 3.1.1 より前のバージョンの React ネイティブプラグイン を使用している場合は、以下の手順が適用されます。

   Android:

   ```groovy
   dependencies {
       implementation 'com.unity3d.ads-mediation:adquality-sdk:9.3.1'
   }
   ```

   iOS:

   ```ruby
   pod 'IronSourceAdQualitySDK','9.3.1'
   ```

**手動での統合**

1. [React ネイティブプラグインバージョンのダウンロード](https://github.com/ironsource-mobile/react-native-SDK/archive/refs/heads/master.zip)
2. Unity レベルの play-mediation 定義をパッケージ.json ファイルに追加します。

```json
"dependencies": {
  "unity-levelplay-mediation":"Path/To/Local/Directory"
}
```

### Unity LevelPlay アプリケーション##unity-levelplay-demo-app

インテグレーション Demo アプリケーションは、Unity LevelPlay をアプリケーションに統合する方法を示しています。

[React ネイティブデモアプリケーションのダウンロード](https://github.com/ironsource-mobile/react-native-SDK/tree/master/example)

## ステップ 2. iOS の追加設定##step-2.-additional-settings-for-ios

### SKAdNetworkサポート##skadnetwork-support

SDK 7 以降を使用しているときに LevelPlay ネットワークワーク広告のディスプレイを有効にするには、アプリケーションのリスト(Info.plist) に LevelPlay 広告ネットワーク ID を必ず含めてください。 

1. Xcode のプロジェクトナビゲーターで **Info.plist** を選択します。
2. プロパティリストエディタのキーの横にある**追加ボタン (+)** を選択し、**Return キーを**押します。
3. キー名 **SKAdNetworkItems** を入力します
4. 「型」列のポップアップメニューから**配列**を選択します。
5. ディクショナリ項目を作成し、その下に 1 つの項目を作成します。  
6. キー名 **SKAdNetworkIdentifier** とキー値を入力します。

   ```xml
   su67r6k2v3.skadnetwork
   ```

次のコードを使用して、**SKAdNetworkIdentifier** を Info.plist に追加することもできます。

```xml
<key>SKAdNetworkItems</key>
<array>
   <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>su67r6k2v3.skadnetwork</string>
   </dict>
</array>
```

> **Note:**
>
> [SKAdNetwork IDs Manager](/grow/levelplay/sdk/react/skadnetwork-id-manager.md)を使用して、LevelPlayネットワークとメディエーションネットワークIDをサポートするコードスニペットを作成します。

プロパティのリストを編集する方法の詳細については、[Xcode のドキュメント](https://help.apple.com/xcode/mac/current/#/dev3f399a2a6) を参照してください。

### ユニバーサルSKANレポート##universal-skan-reporting

宣伝対象のアプリケーションのすべてのデマンドソースからインストール検証の落札ポストバックのコピーを受け取るには、アプリケーションのInfo.plistに[NSAdvertisingAttributionReportEndpoint](https://developer.apple.com/documentation/bundleresources/information_property_list/nsadvertisingattributionreportendpoint)キーを追加します。

1. Xcode のプロジェクトナビゲーターで Info.plist を選択します。
2. プロパティリストエディタでキーの横にある追加ボタン (+) を選択し、Return キーを押します。
3. キー名 [NSAdvertisingAttributionReportEndpoint](https://developer.apple.com/documentation/bundleresources/information_property_list/nsadvertisingattributionreportendpoint) を入力します。
4. Type カラムのポップアップメニューから文字列を選択します。
5. URL を入力します。 `https://postbacks-is.com`

### アプリケーション転送のセキュリティ設定##app-transport-security-settings

すべてのメディエーションネットワークで広告配信のサポートを中断しないようにするには、**info.plist**に以下の変更を加えることが重要です。

* 「**NSAppTransportSecurity**」というディクショナリを追加します。このディクショナリは「**トップレベルキー**」に追加してください。
*  このディクショナリ内に「**NSAllowsArbitraryLoads**」というブーリアンを追加し、**YES** に設定します。
* info.plist に **NSAllowsArbitraryLoads** 以外の例外が含まれていないことを確認してください。競合が発生する可能性があります。
* ATS の詳細については、[こちら](https://developer.apple.com/library/prerelease/ios/documentation/General/Reference/InfoPlistKeyReference/Articles/CocoaKeys.html#//apple_ref/doc/uid/TP40009251-SW33)を参照してください。

## ステップ 3. Android の追加設定##step-3.-additional-setup-for-android

### 再生サービスの依存関係##play-services-dependencies

以下のように、再生 Services の依存関係をアプリケーションレベルの ビルド.gradle に追加します。

```js
dependencies {
    implementation 'com.google.android.gms:play-services-ads-identifier:18.0.1'
    implementation 'com.google.android.gms:play-services-basement:18.3.0'
    implementation 'com.google.android.gms:play-services-appset:16.0.2'
}
```

### Android 12 サポート##android-12-support

ターゲット API レベルを 31(Android 12)に更新するアプリケーションは、マニフェストファイルで次のように Google 再生サービスの法線権限を宣言する必要があります。

```xml
<uses-permission android:name="com.google.android.gms.permission.AD_ID"/>
```

[Google ドキュメント](https://support.google.com/googleplay/android-developer/answer/6048248)の Google Advertising ID の変更に関する詳細を参照してください。

## ステップ 4. LevelPlay SDK の初期化##step-4.-initialize-levelplay-sdk

LevelPlay SDK を初期化するには、以下の手順に従います。

### LevelPlay SDK 8.7.0+##levelplay-sdk-8.7.0+

1. 初期化の成功と失敗のコールバックを実装します。

2. **LevelPlayInitRequest.Builder** を使用して init リクエストを作成します。Builder は以下のパラメータを受け取ります。

   * appKey (必須)
   * ユーザーID(任意:サーバー間のコールバックまたは広告品質ユーザー ジャーニーを使用している場合に必要)

3. **LevelPlay.init** を呼び出し、コンテキストと init リクエストを渡します。

```js
const initListener：LevelPlayInitListener = {
    onInitFailed: (エラー:LevelPlayInitError) => {
        // Provided when init fails
    },
    onInitSuccess:(設定:LevelPlayConfiguration) => {
        // Provided when init is successfully executed
    }
}
// Init the SDK when implementing the Multiple Ad Units APIs for all ad formats
const initRequest：LevelPlayInitRequest = LevelPlayInitRequest.builder(APP_KEY)
      .withUserId("userId") // required for server-to-server callbacks or Ad Quality user journey (optional otherwise)
      .build();
LevelPlay.init(initRequest, initListener)
```

### LevelPlay SDK before 8.7.0##levelplay-sdk-before-8.7.0

1. 初期化の成功と失敗のコールバックを実装します。
2. 古い機能のIronsource APIからのサポートを必要とする広告フォーマットのリストを定義します。これには REWARDED が含まれます。 
3. appKey、広告フォーマット、およびユーザー ID (必要な場合) を使用して LevelPlay init API を呼び出します。

> **Note:**
>
> サーバー間のコールバックを使用してユーザーに報酬を与える場合や、広告品質ユーザー ジャーニーを使用する場合は、初期化APIの一部としてユーザーIDを追加します。

```js
const initListener：LevelPlayInitListener = {
   onInitFailed: (エラー:LevelPlayInitError) => {
    // Provided when init is failed
   },
   onInitSuccess:(設定:LevelPlayConfiguration) => {
    // Provided when init is successfully executed
   }
}
// Init the SDK when implementing the Multiple Ad Units Interstitial and Banner APIs, and Rewarded using legacy APIs  
const legacyAdFormats = [AdFormat.REWARDED];
const initRequest：LevelPlayInitRequest = LevelPlayInitRequest.builder(APP_KEY)
      .withLegacyAdFormats(legacyAdFormats)
      .withUserId("userId") // required for server-to-server callbacks or Ad Quality user journey (optional otherwise)
      .build();
await LevelPlay.init(initRequest, initListener)
```

### LevelPlay Init リスナー##levelplay-init-listeners

* **onInitSuccess –** init が正常に完了し、広告をロードできるときにトリガーされます。
* \*\*onInitFailed：\*\*設定が正常に受信されず、広告をロードできません。後で LevelPlay SDK を初期化してみることをお勧めします。

init API の前に呼び出されたすべての API は変更されておらず、機能と構文の点ではそのままになっている必要があります。これには、特定の広告形式に関連する[詳細設定](/grow/levelplay/sdk/react/advanced-settings.md)、[規制設定](/grow/levelplay/sdk/react/regulation-advanced-settings.md)、その他の API が含まれます。  

初期化に失敗した場合は、SDK の初期化を再試行できます。初期化プロセスが成功した後にのみ、広告をロードできるようになります。

## ステップ 5.インテグレーションの確認##step-5.-verify-your-integration

LevelPlay インテグレーションテストスイートを使用して、アプリケーションのインテグレーションのテスト、プラットフォーム設定の確認、構成したネットワークに関連する広告のレビューを行います。 

アプリケーションでテストスイートを有効にするには、初期化を設定する前に setMetaData API を呼び出します。

```js
LevelPlay.setMetaData('is_test_suite', ['enable'])
```

メディエーションの初期化が正常に完了したら、以下のメソッドを呼び出してテストスイートを起動します。

```js
LevelPlay.launchTestSuite()
```

LevelPlay インテグレーションテストスイートの詳細と実装例については、この[記事](/grow/levelplay/sdk/react/integration-test-suite.md)を操作してください。

### Adapters デバッグ##adapters-debug

以下の API を呼び出して、メディエーションネットワークワークアダプターと SDK のデバッグを有効にします。

```js
LevelPlay.setAdaptersDebug(true);
```

### ProGuard ユーザーのみ##for-proguard-users-only

LevelPlay SDK で ProGuard を使用している場合は、ProGuard ファイルに以下のコードを追加する必要があります (Android Studio: proguard-rules.Pro または Eclipse: proguard-project.txt)。

```js
-keepclassmembers class com.ironsource.sdk.controller.IronSourceWebView$JSInterface {
    public *;
}
-keepclassmembers class * implements android.os.Parcelable {
    public static final android.os.Parcelable$Creator *;
}
-keep public class com.google.android.gms.ads.** {
   public *;
}
-keep class com.ironsource.adapters.** { *;
}
-keep class com.ironsource.unity.androidbridge.** { *;
}
-dontwarn com.ironsource.mediationsdk.**
-dontwarn com.ironsource.adapters.**
-keepattributes JavascriptInterface
-keepclassmembers class * {
    @android.webkit.JavascriptInterface <methods>;
}
```

## 次のステップ##next-steps

1. インテグレーション ガイドに従って広告フォーマットを実装
   * [動画リワード](/grow/levelplay/sdk/react/rewarded-ads-integration.md)
   * [Interstitial (インタースティシャル)](/grow/levelplay/sdk/react/interstitial-integration.md)
   * [Banner](/grow/levelplay/sdk/react/banner-integration.md)
   * [ネイティブ広告](/grow/levelplay/sdk/react/native-ads-integration.md)
2. 動画リワード広告、インタースティシャル広告、バナー広告をアプリケーションに統合します。[メディエーションに関する記事](/grow/levelplay/sdk/react/mediation-networks.md)を参照してください。
3. [インテグレーションテストスイート](/grow/levelplay/sdk/react/integration-test-suite.md)とのインテグレーションを確認します。