# React ネイティブのためのインタースティシャルインテグレーション

> SDK の初期化、広告ユニットの作成、広告のロードとディスプレイイベントを管理するためのイベントリスナーの設定によって、React ネイティブ アプリケーションにインタースティシャル広告を統合します。

LevelPlay インタースティシャルは全画面の広告単位であり、通常はアプリケーションのライフサイクル中の自然な遷移ポイントで機能します。静的とビデオの両方のインタースティシャルをサポートします。LevelPlay メディエーション プラットフォームを通じてインタースティシャルを提供することもできます。

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

## 前提条件##prerequisites

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

## インタースティシャルの作成とイベントへの登録##create-interstitial-and-register-to-events

インタースティシャル オブジェクトの作成は、**onInitSuccess** コールバックを受信した後に行う必要があります。

LevelPlay SDK は、インタースティシャルアクティビティを通知するいくつかのイベントを発生させます。これらのイベントを受信するには、広告単位のリスナーを登録します。情報の損失を防ぐために、SDK を初期化する前にリスナーを必ず設定してください。

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

const [interstitialAd, setInterstitialAd] = useState<LevelPlayInterstitialAd>(new LevelPlayInterstitialAd('YOUR_AD_単位_ID')
useEffect(() => {
    interstitialAd.setListener(listener);
}, [interstitialAd]);
```

## インタースティシャルリスナーの設定##set-interstitial-listener

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

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

```js
const listener:LevelPlayInterstitialAdListener = {
    onAdLoaded: (adInfo:LevelPlayAdInfo) => {
        // Provided when the ad is successfully loaded
    },
    onAdLoadFailed: (error:LevelPlayAdError) => {
        // Provided when the ad fails to load.広告単位情報が含まれている
    },
    onAdInfoChanged: (adInfo:LevelPlayAdInfo) => {
        // Provided when the ad info is updated.別の広告がロードされ、CPM/レートが高い場合に利用可能
    },
    onAdDisplayed: (adInfo:LevelPlayAdInfo) => {
        // Provided when the ad is displayed
    },
    onAdDisplayFailed: (error:LevelPlayAdError、adInfo：LevelPlayAdInfo) =>    {
        // Provided when the ad fails to be displayed
    },
    onAdClicked: (adInfo:LevelPlayAdInfo) => {
        // Provided when the user clicks on the ad
    },
    onAdClosed: (adInfo:LevelPlayAdInfo) => {
        // Provided when the ad is closed
    }
};
```

## ロード インタースティシャル広告##load-interstitial-ad

インタースティシャル広告をロードするには、**loadAd** を使用します（Promise を返します）。

```js
await interstitialAd.loadAd();
```

## インタースティシャル広告の表示##show-interstitial-ad

**onAdLoaded** コールバックを受信した後に、 **showAd** を使用してインタースティシャル広告を表示します。

* プレースメントを使用する場合は、後述のプレースメントのセクションで示すように、**showAd** API に配置名を渡します。
* ユーザーに広告が正常に表示されたら、ロードステップを繰り返して別の広告をロードできます。 

```js
// Show ad without placement
interstitialAd.showAd();
// Show ad with placement
interstitialAd.showAd('YOUR_PLACEMENT');
```

### 広告の準備ができているか確認##check-ad-is-ready

表示の失敗を避け、広告が正しく表示されるようにするために、**showAd** API を呼び出す前に以下の API を使用することをお勧めします。

**isAdReady** – 広告のロードが成功し、広告単位に上限が設定されていない場合は true、それ以外の場合は false に解決する Promise を返します。

**isPlacementCapped** – 有効な配置に上限がある場合に、Promise の解決を true に返す静的メソッド。配置が有効でないか、上限がない場合、false を返します。

```js
// Check that ad is ready and that the placement is not capped (both APIs are async)
const isReady = await interstitialAd.isAdReady();
const isPlacementCapped = await LevelPlayInterstitialAd.isPlacementCapped('YOUR_PLACEMENT');
if (isReady && !isPlacementCapped) {
  await interstitialAd.showAd('YOUR_PLACEMENT');
}
```

### Placements##placements

LevelPlay ダッシュボードでは、インタースティシャルの[プレースメント](/grow/levelplay/platform/settings/placements.md) ペーシングとプレースメント キャップをサポートします。

インタースティシャル広告にプレースメントが設定されている場合は、 **showAd** メソッドを呼び出して特定の配置の広告を配信します。

```js
// Check that ad is ready and that the placement is not capped (both APIs are async)
const isReady = await interstitialAd.isAdReady();
const isPlacementCapped = await LevelPlayInterstitialAd.isPlacementCapped('YOUR_PLACEMENT');
if (isReady && !isPlacementCapped) {
  await interstitialAd.showAd('YOUR_PLACEMENT');
}
```

## インタースティシャル広告の完全な実装例##full-implementation-example-of-interstitial-ads

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

// Start of some component ...
const [interstitialAd, setInterstitialAd] = useState<LevelPlayInterstitialAd>(new LevelPlayInterstitialAd('YOUR_AD_単位_ID')
const listener:LevelPlayInterstitialAdListener = {
    onAdLoaded: (adInfo:LevelPlayAdInfo) => {
      // Implement your logic here, for example showing the ad
      interstitialAd.showAd()
    },
    onAdLoadFailed: (error:LevelPlayAdError) => {
      // Implement your logic here...
    },
    onAdInfoChanged: (adInfo:LevelPlayAdInfo) => {
      // Implement your logic here...
    },
    onAdDisplayed: (adInfo:LevelPlayAdInfo) => {
      // Implement your logic here...
    },
    onAdDisplayFailed: (error:LevelPlayAdError、adInfo：LevelPlayAdInfo) => {
      // Implement your logic here...
    },
    onAdClicked: (adInfo:LevelPlayAdInfo) => {
      // Implement your logic here...
    },
    onAdClosed: (adInfo:LevelPlayAdInfo) => {
      // Implement your logic here...
    }
  };
  useEffect(() => {
    interstitialAd.setListener(listener)
    interstitialAd.loadAd()
  }, []);
  // Rest of component ...
// 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/banner-integration.md)
* [ネイティブ広告](/grow/levelplay/sdk/react/native-ads-integration.md)