# React ネイティブのバナーインテグレーション

> LevelPlay SDK を使用して、React ネイティブ アプリケーションにバナー広告を実装します (設定、初期化化、リスナー設定など)。

バナーはシステムによって開始される長方形の広告で、静的またはアニメーションにすることができ、ライブアコンテンツ定されたエリアで配信されます。 

> **Note:**
>
> このドキュメントは SDK 8.4.0 以降に関連するものです。

## 前提条件##prerequisites

* LevelPlay React ネイティブ SDK がアプリケーションに正しく統合されていることを確認します。インテグレーションの概要は[こちら](/grow/levelplay/sdk/react/plugin-integration.md)です。
* LevelPlay 初期化 API を使用して SDK を初期化していることを確認します。
* LevelPlay ダッシュボードで AdUnitID を見つけます。

## バナー広告オブジェクトの作成とサイズの設定##create-banner-ad-object-and-set-size

バナー広告オブジェクトの作成は、**onInitSuccess** コールバックの受信後に行う必要があります。

```js
import {
  LevelPlayBannerAdView,
  LevelPlayAdSize,
  type LevelPlayBannerAdViewMethods,
  type LevelPlayBannerAdViewListener,
} 'unity-levelplay-mediation' から

const bannerAdViewRef = useRef<LevelPlayBannerAdViewMethods>(null);
const adSize = LevelPlayAdSize.BANNER; // or await LevelPlayAdSize.createAdaptiveAdSize() for adaptive
const listener = { /* LevelPlayBannerAdViewListener */ };
const loadAd = useCallback(() => {
    bannerAdViewRef.current?.loadAd();
}, []);
return (
    <LevelPlayBannerAdView
        ref={bannerAdViewRef}
        adUnitId="YOUR_AD_UNIT_ID"
        adSize={adSize}
        placementName="YOUR_PLACEMENT"
        listener={listener}
        style={{ width: adSize.width, height: adSize.height }}
    />
);
```

### バナーサイズ##banner-sizes

| LevelPlayAdSize   | 説明                                     | 寸法 (dp) (幅 X 高さ) |
| ----------------- | -------------------------------------- | ---------------- |
| バナー               | 標準バナー                                  | 320×50           |
| 大規模               | Large バナー                              | 320 x 90         |
| MEDIUM\_RECTANGLE | 中矩形 (MREC)                             | 300 x 250        |
| 適応型               | 広告を自動的にレンダリングして、モバイルおよびタブレットのサイズと向きを調整 | デバイスの幅 X 推奨の高高さ  |

広告サイズを作成するには、以下のいずれかのオプションに従います。

\*\*画面幅に合わせて調整できる適応型広告サイズ（推奨）：\*\*このオプションは、デバイスタイプに応じて バナー または LeaderBOARD を返すため、"SMART" インテグレーションに置き換わります。適応型機能 (Google、Yandex) をサポートするネットワークは、最適化ロジックに基づいて高ささを返します。

```js
let adSize = await LevelPlayAdSize.createAdaptiveAdSize();
```

\*\*固定幅広告サイズを使用した適応型広告サイズ:\*\*このオプションを使用すると、特定の幅を設定できます。適応型バナー特徴 (Google、Yandex) をサポートするネットワークは、指定された幅に基づく最適化ロジックに基づいて高ささを返します。他のすべてのネットワークは、指定された幅に応じたフォールバック サイズ（バナーまたは LeaderBOARD）を返します。

```js
let adSize = await LevelPlayAdSize.createAdaptiveAdSize(400);
```

\*\*特定のバナーサイズ：\*\*このオプションでは、バナーサイズ（バナー、大、中）を指定できます。

```js
let adSize = LevelPlayAdSize.MEDIUM_RECTANGLE;
```

### Placements##placements

バナーの[プレースメントは](/grow/levelplay/platform/settings/placements.md)、レポートの目的でのみサポートされます。プレースメントは\*\*、loadAd\*\* の前に設定して、リロードされたすべての広告に影響を与える必要があります。

## バナーの設定##set-banner-listener

コードに **LevelPlayBannerAdViewListener** を実装して、広告の配信に関する情報を取得します。

* バナー広告をロードする前にリスナーを設定することをお勧めします。
* バナー広告ごとに独自のリスナーを実装する必要があります。
* コールバックはメインスレッドで実行されます。

```js
const listener:LevelPlayBannerAdViewListener = {
    onAdLoaded: (adInfo:LevelPlayAdInfo) => {
      // Invoked each time a banner was loaded.更新時または手動ロード時。
    },
    onAdLoadFailed: (error:LevelPlayAdError) => {
     // Invoked when the banner loading process has failed.
     // This callback will be sent both for manual load and refreshed banner failures.
    },
    onAdDisplayed: (adInfo:LevelPlayAdInfo) => {
     // Notifies the screen is displayed.
    },
    onAdDisplayFailed: (adInfo:LevelPlayAdInfo、エラー:LevelPlayAdError) => {
     // Notifies the screen failed to display.
    },
    onAdClicked: (adInfo:LevelPlayAdInfo) => {
     // Invoked when end user clicks on the banner ad.
    },
    onAdExpanded: (adInfo:LevelPlayAdInfo) => {
     // Ad is opened on full screen
    },
    onAdCollapsed: (adInfo:LevelPlayAdInfo) => {
     // Ad is restored to its original size
    },
    onAdLeftApplication: (adInfo:LevelPlayAdInfo) => {
     // Invoked when the user left the app.
    },
};
```

## ロードバナー広告##load-banner-ad

バナー広告をロードするには、**loadAd** を使用します。

```js
// Load the banner ad
bannerAdViewRef.current?.loadAd();
```

## バナー更新の一時停止と再開##pause-and-resume-banner-refresh

プラットフォームで更新値が定義されている場合は、コードのバナー更新を一時停止できます。バナー広告の自動更新を停止するか、一時停止後に再度有効にするには、以下の方法を使用します。 

> **Note:**
>
> バナーが再度表示されると、バナーが一時停止されてから更新までの時間が完了します。 

* **pauseAutoRefresh**：バナー広告の自動更新を一時停止します。
* **resumeAutoRefresh**：バナー広告が一時停止された後、その広告の自動更新を再開します。

```js
// Pause refresh 
bannerAdViewRef.current?.pauseAutoRefresh(); 
// Resume refresh
bannerAdViewRef.current?.resumeAutoRefresh();
```

## バナー広告の破棄##destroy-banner-ad

バナーを破棄するには、 **destroy** メソッドを呼び出します。

破棄されたバナーは再度表示できなくなります。さらに広告を表示するには、新しい **LevelPlayBannerAdView** オブジェクトを作成します。 

```js
bannerAdViewRef.current?.destroy();
```

## バナー広告の完全な実装例##full-implementation-example-of-banner-ads

ここでは、標準バナーサイズを使用してバナー広告を作成およびロードする例を示します。

```js
import {
  LevelPlayBannerAdView,
  LevelPlayAdSize,
  type LevelPlayBannerAdViewMethods,
  type LevelPlayBannerAdViewListener,
  type LevelPlayAdInfo,
  type LevelPlayAdError,
} 'unity-levelplay-mediation' から

// Start of some component ...
const bannerAdViewRef = useRef<LevelPlayBannerAdViewMethods>(null);
const adSize = LevelPlayAdSize.BANNER
const listener:LevelPlayBannerAdViewListener = {
    onAdLoaded: (adInfo:LevelPlayAdInfo) => {
        // Implement your logic here
    },
    onAdLoadFailed: (error:LevelPlayAdError) => {
        // Implement your logic here
    },
    onAdDisplayed: (adInfo:LevelPlayAdInfo) => {
        // Implement your logic here
    },
    onAdDisplayFailed: (adInfo:LevelPlayAdInfo、エラー:LevelPlayAdError) => {
        // Implement your logic here
    },
    onAdClicked: (adInfo:LevelPlayAdInfo) => {
        // Implement your logic here
    },
    onAdExpanded: (adInfo:LevelPlayAdInfo) => {
        // Implement your logic here
    },
    onAdCollapsed: (adInfo:LevelPlayAdInfo) => {
        // Implement your logic here
    },
    onAdLeftApplication: (adInfo:LevelPlayAdInfo) => {
        // Implement your logic here
    },
};
return (
    <LevelPlayBannerAdView 
        ref={bannerAdViewRef}
        adUnitId={'YOUR_AD_UNIT_ID'}
        adSize={adSize}
        placementName={'YOUR_PLACEMENT'}
        listener={listener}
        onLayout={(_) => bannerAdViewRef.current?.loadAd()}
        style={{width: adSize.width, height: adSize.height}} // Get actual banner layout size
      />
);
  
// End of component ...
```

## LevelPlay Mediation デモアプリケーション##levelplay-mediation-demo-app

インテグレーション Demo (インテグレーションデモ) アプリケーションは、バナー広告単位 API をアプリケーションに統合する方法を示します。

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

[インテグレーションテストスイート](/grow/levelplay/sdk/react/integration-test-suite.md)とのインテグレーションを確認します。

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

インテグレーション ガイドに従って、追加のメディエーション ネットワークのインテグレーションや追加の広告フォーマットの設定を行います。

* [メディエーションネットワークの追加](/grow/levelplay/sdk/react/mediation-networks.md)
* [リワード広告](/grow/levelplay/sdk/react/rewarded-ads-integration.md)
* [インタースティシャル広告](/grow/levelplay/sdk/react/interstitial-integration.md)
* [ネイティブ広告](/grow/levelplay/sdk/react/native-ads-integration.md)