# React ネイティブ向けネイティブ広告インテグレーション

> ネイティブ広告を React ネイティブ アプリケーションに統合し、事前定義済みまたはカスタムテンプレートを使用してカスタマイズ可能な広告体験を提供します。

ネイティブ広告は、アプリケーション内の他のコンテンツに溶け込むようにカスタマイズできる広告の形式です。これにより、広告がよりオーガニックに表示され、ユーザー エクスペリエンスとリテンションの向上につながります。

## 前提条件##prerequisites

LevelPlay React ネイティブプラグイン 8.4.0 以降がアプリケーションに正しく統合されていることを確認します。インテグレーションの概要は[こちら](/grow/levelplay/sdk/react/plugin-integration.md)です。

## LevelPlay ネイティブ広告の統合##integrate-levelplay-native-ads

React ネイティブプラグインを使用して LevelPlay ネイティブ広告を統合する方法は 2 つあります。

* \*\*ネイティブテンプレート:\*\*プラグインが提供する定義済みのテンプレート (XML と XIB ファイル)
* \*\*カスタムテンプレート:\*\*開発者によってスタイル設定および設計されたカスタムテンプレート。

## ネイティブ##native-templates

ネイティブは、ネイティブ広告ロジックを実装する定義済みビューです。この設定は、広告がロードされた後にビューの数を処理し、広告が破棄された後にビューをクリアします。

2 つのテンプレートオプションがあります。

* 小:メディアビューを含まないテンプレート。
* 中:メディアビューを特徴とするテンプレート。

スタイリングは一般的に似ていますが、好みに応じてカスタマイズすることもできます。

ネイティブを統合するには、以下のステップに従います。

### ステップ 1. Create LevelPlayNativeAd Object##step-1.-create-levelplaynativead-object

LevelPlayNativeAdView コンテナへの広告のロードを担当する LevelPlayNativeAd オブジェクトを作成します。このオブジェクトはロード、破棄などの広告メソッドをハンドルし、広告の配置とイベントコールバックのリスナーを定義します。

```js
import {
  LevelPlayNativeAd,
  type LevelPlayNativeAdListener,
  type LevelPlayAdInfo,
  type LevelPlayAdError,
} 'unity-levelplay-mediation' から

nativeAd = LevelPlayNativeAd.builder()
  .withPlacement('YOUR_PLACEMENT')
  .withListener(listener)
  .build();
```

### ステップ 2. リスナーの実装##step-2.-implement-the-listener

LevelPlayNativeAdListener をコードに実装します。LevelPlay SDK は、ネイティブ広告アクティビティを通知するためにいくつかのコールバックを起動します。SDK は、以下のすべてのイベントをリスナーに通知します。

```js
const listener:LevelPlayNativeAdListener = {
  /** ネイティブ広告がクリックされた後に呼び出されます。*/
  onAdClicked: (nativeAd:LevelPlayNativeAd, adInfo:LevelPlayAdInfo) => {},
  /** ネイティブアドインプレッションが記録された後に呼び出されます。*/
  onAdImpression: (nativeAd:LevelPlayNativeAd, adInfo:LevelPlayAdInfo) => {},
  /** ネイティブ広告のロードが試行されて失敗した後に呼び出されます。*/
  onAdLoadFailed: (nativeAd:LevelPlayNativeAd、エラー:LevelPlayAdError) => {},
  /** ネイティブ広告が正常にロードされた後に呼び出されます。*/
  onAdLoaded: (nativeAd:LevelPlayNativeAd, adInfo:LevelPlayAdInfo) => {},
};
```

### ステップ 3. Create LevelPlayNativeAdView##step-3.-create-levelplaynativeadview

LevelPlayNativeAdView コンポーネントを作成し、ロードされたネイティブ広告をホストするコンテナを定義します。このオブジェクトは、幅と高ささを決定するか、コンテナのボックス制約を設定することで、ネイティブの広告境界を定義します。また、タイトル、ボディ、広告主、アクション呼び出しボタンなどのネイティブ広告要素のスタイル設定もハンドルできます。

> **Note:**
>
> ネイティブの場合、デフォルトのタイプは SMALL で、ウィジェット作成時にテンプレートタイプを定義することで変更できます。

```js
<LevelPlayNativeAdView
    style={{
       width:300// 中サイズのタイプに推奨される幅
       高さ:350 // Medium タイプに推奨される高ささ
    }}
    nativeAd={nativeAd} 
    templateType={LevelPlayTemplateType.Medium}
    templateStyle={[[LevelPlayNativeAdTemplateStyle] optional]}
  />
<LevelPlayNativeAdView
    style={{
       width:300、// Small Type に推奨される幅
       高さ:175 // Small Type に推奨される高ささ
    }}
    nativeAd={nativeAd} 
    templateType={LevelPlayTemplateType.Small}
    templateStyle={[[LevelPlayNativeAdTemplateStyle] optional]}
  />
```

### ステップ 3. 広告のロード##step-3.-load-the-ad

loadAd メソッドを呼び出してネイティブ広告をロードします。useEffect フック、フックしたとき、または開発者が決めた別のタイミングで呼び出すことができます。

```js
nativeAd?.loadAd();
```

### ステップ 4. ネイティブ広告の破棄##step-4.-destroy-the-native-ad

ネイティブ広告を破棄するには、以下のメソッドを呼び出します。

```js
nativeAd?.destroyAd();
```

破棄されたネイティブ広告はロードできません。再度提供する場合は、広告コンテナコンポーネントを再作成する必要があります。

## カスタムテンプレート設定##custom-templates-setup

カスタムテンプレートを使用すると、特定のニーズに合わせて独自のスタイルと機能を設計できます。レイアウトと機能を柔軟にカスタマイズできるため、一意のユーザー体験が実現します。 

これらのテンプレートは、主に広告デザインをより高いレベルでコントロールする必要がある場合に使用されます。Android と iOS の両方のプラットフォームに実装でき、追加コード実装が必要です。

カスタムテンプレートを作成するには、ネイティブコードを記述し、独自のカスタムレイアウトを開発する必要があります。インテグレーションのステップは以下の通りです。

### ステップ 1. NativeAdViewManager の作成##step-1.-create-nativeadviewmanager

LevelPlayNativeAdViewManager を拡張し、カスタマイズされたレイアウトでロードされた広告をディスプレイするクラスの Android または iOS 実装。

**Android**

```js
// Android Implementation
import android.widget.Button
import android.widget.ImageView
import android.widget.TextView
import com.facebook.react.bridge.ReactApplicationContext
import com.ironsource.mediationsdk.ads.nativead.LevelPlayMediaView
import com.ironsource.mediationsdk.ads.nativead.LevelPlayNativeAd
import com.ironsource.mediationsdk.ads.nativead.NativeAdLayout
import com.ironsource.react_native_mediation.R
import com.ironsource.react_native_mediation.RCTLevelPlayNativeAdViewManager
class NativeAdViewManagerExample(
  reactApplicationContext:ReactApplicationContext,
  layoutId:Int
):RCTLevelPlayNativeAdViewManager(reactApplicationContext, layoutId) {
  override fun bindNativeAdToView(nativeAd:LevelPlayNativeAd?, nativeAdLayout:NativeAdLayout) {
    // Extract views
    val titleView = nativeAdLayout.findViewById<TextView>(R.id.adTitle)
    val bodyView = nativeAdLayout.findViewById<TextView>(R.id.adBody)
    val advertiserView = nativeAdLayout.findViewById<TextView>(R.id.adAdvertiser)
    val callToActionView = nativeAdLayout.findViewById<Button>(R.id.adCallToAction)
    val iconView = nativeAdLayout.findViewById<ImageView>(R.id.adAppIcon)
    val mediaView：LevelPlayMediaView? = nativeAdLayout.findViewById(R.id.adMedia)
    // Bind native ad to view
    if (nativeAd != null) {
      if (nativeAd.title != null) {
        titleView.text = nativeAd.title
        nativeAdLayout.setTitleView(titleView)
      }
      if (nativeAd.body != null) {
        bodyView.text = nativeAd.body
        nativeAdLayout.setBodyView(bodyView)
      }
      if (nativeAd.advertiser != null) {
        advertiserView.text = nativeAd.advertiser
        nativeAdLayout.setAdvertiserView(advertiserView)
      }
      if (nativeAd.callToAction != null) {
        callToActionView.text = nativeAd.callToAction
        nativeAdLayout.setCallToActionView(callToActionView)
      }
      if (nativeAd.icon != null) {
        iconView!!.setImageDrawable(nativeAd.icon!!.drawable)
        nativeAdLayout.setIconView(iconView)
      }
      if (mediaView != null) {
        nativeAdLayout.setMediaView(mediaView)
      }
      nativeAdLayout.registerNativeAdViews(nativeAd)
    }
  }
  override fun getName():文字列 {
    return "ExampleViewType"
  }
}
```

**iOS**

```js
// iOS Implementation 
/// h file
#import <Foundation/Foundation.h>
#import <LevelPlay/LevelPlay.h>
#import "RCTLevelPlayNativeAdViewManager.h"
@interface NativeAdViewManagerExample :RCTLevelPlayNativeAdViewManager <RCTLevelPlayNativeAdViewManagerDelegate>
@end
/// m file
#import "NativeAdViewManagerExample.h"
@implementation NativeAdViewManagerExample
RCT＿エクスポート＿MODULE（ExampleViewType） // ビュー タイプ定義
- (instancetype)init
{
  self = [super initWithDelegate:self layoutName:@"MyCustomNativeAdViewTemplate"];
  return self;
}
- (void)bindNativeAdToView:(LevelPlayNativeAd *)nativeAd isNativeAdView:(ISNativeAdView *)isNativeAdView {
    // Extract views
    UILabel *titleView = isNativeAdView.adTitleView;
    UILabel *bodyView = isNativeAdView.adBodyView;
    UILabel *advertiserView = isNativeAdView.adBodyView;
    UIButton *callToActionView = isNativeAdView.adCallToActionView;
    UIImageView *iconView = isNativeAdView.adAppIcon;
    LevelPlayMediaView *mediaView = isNativeAdView.adMediaView;
    // Bind native ad to view
    if (nativeAd != nil) {
        if (nativeAd.title != nil) {
            titleView.text = nativeAd.title;
            [isNativeAdView setAdTitleView:titleView];
        }
        if (nativeAd.body != nil) {
            bodyView.text = nativeAd.body;
            [isNativeAdView setAdBodyView:bodyView];
        }
        if (nativeAd.advertiser != nil) {
            advertiserView.text = nativeAd.advertiser;
            [isNativeAdView setAdAdvertiserView:advertiserView];
        }
        if (nativeAd.callToAction != nil) {
            [callToActionView setTitle:nativeAd.callToAction forState:UIControlStateNormal];
            [isNativeAdView setAdCallToActionView:callToActionView];
        }
        if (nativeAd.icon != nil) {
            iconView.image = nativeAd.icon.image;
            [isNativeAdView setAdAppIcon:iconView];
        }
        if (mediaView != nil) {
            [isNativeAdView setAdMediaView:mediaView];
        }
        // Register native ad views with the provided native ad
        [isNativeAdView registerNativeAdViews:nativeAd];
    }
}
@end
```

カスタムビュータイプの文字列は、React ネイティブ側の LevelPlayNativeAdView コンポーネントで指定された viewType と一致する必要があります。

* Android の場合、オーバーライドされた getName メソッドでビューの文字文字列を返します。オーバーライドされたメソッド getName でビューの文字文字列を返します。
* iOS の場合、ビュー タイプの文字列は RCT\_エクスポート\_モジュール\*\* で指定する必要があります。 

### ステップ 2. Android 用の NativeAdViewManager の登録##step-2.-register-your-nativeadviewmanager-for-android

LevelPlayNativeAdViewManager クラスを拡張するカスタムネイティブ広告クラスを作成したら、MainApplication で Android クラスを登録します。

> **Note:**
>
> カスタムビュータイプの文字列は、React ネイティブ側の LevelPlayNativeAdView コンポーネントで設定された viewType と一致する必要があります。iOS の場合、モジュールエクスポートは登録として機能するため、追加設定は必要ありません。

```js
 // Android Implementation
パッケージ com.Ironsource.reactnativetester
import android.app.Application
import com.facebook.react.PackageList
import com.facebook.react.ReactApplication
import com.facebook.react.ReactHost
import com.facebook.react.ReactNativeHost
import com.facebook.react.ReactPackage
import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load
import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
import com.facebook.react.defaults.DefaultReactNativeHost
import com.facebook.soloader.SoLoader
import com.unity3d.reactnative.LevelPlayMediationPackage
クラス MainApplication ：アプリケーション(), ReactApplication {
  オーバーライド val reactNativeHost：ReactNativeHost =
      オブジェクト ：DefaultReactNativeHost(this) {
        override fun getPackages():リスト<ReactPackage> ＝
            PackageList(this).packages.apply {
              // Packages that cannot be autolinked yet can be added manually here, for example:
                add(CustomPackage())
            }
        override fun getJSMainModuleName():String = "index"
        override fun getUseDeveloperSupport():Boolean = BuildConfig.DEBUG
        オーバーライド val isNewArchEnabled：Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
        オーバーライド val isHermesEnabled：Boolean = BuildConfig.IS_HERMES_ENABLED
      }
  オーバーライド val reactHost：ReactHost
    get() = getDefaultReactHost(applicationContext, reactNativeHost)
  override fun onCreate() {
    super.onCreate()
    SoLoader.init(this, false)
    if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
      // If you opted-in for the New Architecture, we load the native entry point for this app.
      load()
    }
    // Register custom view managers
    LevelPlayMediationPackage.registerViewManager("ExampleViewType") { reactContext ->
        NativeAdViewManagerExample(reactContext, R.layout.my_custom_native_ad_view)
    }
  }
}
```

* Android での NativeAdView レイアウトの設定例については、[my＿custom＿ネイティブ＿ad＿ビュー＿テンプレート.xml](https://github.com/ironsource-mobile/react-native-SDK/blob/master/example/android/app/src/main/res/layout/my_custom_native_ad_view.xml) を参照してください。
* iOS での NativeAdView レイアウトの設定例は、[GitHub](https://github.com/ironsource-mobile/react-native-SDK/tree/master/example/ios) を参照してください。

### ステップ 3. Create LevelPlayNativeAdView##step-3.-create-levelplaynativeadview

LevelPlayNativeAdView コンポーネントを作成し、ロードされたネイティブ広告をホストするコンテナを定義します。このオブジェクトは、幅と高ささを決定するか、コンテナのボックス制約を設定することで、ネイティブの広告境界を定義します。また、タイトル、ボディ、広告主、アクション呼び出しボタンなどのネイティブ広告要素のスタイル設定もハンドルできます。

> **Note:**
>
> カスタムテンプレートを作成する場合は、viewType がネイティブの Android または iOS セクションで指定されている一意ののビューと一致することを確認してください。

```js
<LevelPlayNativeAdView
    style={{
      width:300， // ネイティブ広告コンテナに推奨される幅
      高さ:350, // 推奨例: 中スタイルレイアウト)
    }}
    nativeAd={nativeAd}
    viewType="ExampleViewType"
    templateStyle={templateStyle} // optional:LevelPlayNativeAdTemplateStyle
  />
```

### ステップ 4. 広告のロード##step-4.-load-the-ad

loadAd メソッドを呼び出してネイティブ広告をロードします。useEffect 時、または開発者が決めた別のタイミングで呼び出すことができます。

```js
nativeAd?.loadAd();
```

### ステップ 5.ネイティブ広告の破棄##step-5.-destroy-the-native-ad

ネイティブ広告を破棄するには、ネイティブ広告オブジェクトの destroyAd メソッドを実行します。

```js
nativeAd?.destroyAd();
```

破棄されたネイティブ広告はロードできません。再度提供する場合は、広告コンテナコンポーネントを再作成する必要があります。