# React Native 的 Interstitial 集成

> 通过初始化 SDK、创建广告单位以及设置事件监听器来管理广告加载和显示事件，在 React 本地 app程序中集成插页式广告服务。

LevelPlay Interstitial 是一个全屏广告单元，通常在 app 生命周期中的自然过渡点投放。我们支持静态和视频间隙。还可以通过 LevelPlay 聚合平台提供插页。

> **Note:**
>
> 本文档与 SDK 8.4.0+ 相关。

## 先决条件##prerequisites

* 确保已将 React-Native Plugin 正确集成到 app。[此处](/grow/levelplay/sdk/react/plugin-integration.md)概述了集成。
* 确保使用 LevelPlay Initialization API 初始化 SDK。
* 在 LevelPlay 后台中找到 AdUnitID。

## 创建 Interstitial 并注册到事件##create-interstitial-and-register-to-events

应在接收 **onInitSuccess** 回调后创建 interstitial 对象。

LevelPlay SDK 会触发多个事件来通知您的 Interstitial 活动。要接收这些事件，请注册广告单元的监听器。确保在初始化 SDK 之前设置监听器以防止任何信息丢失。

```js
import {
    LevelPlayInterstitialAd,
    type LevelPlayInterstitialAdListener,
    type LevelPlayAdInfo、
    type LevelPlayAdError
} 来自“Unity LevelPlay-mediation”

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

## 设置 Interstitial 监听器##set-interstitial-listener

在代码中实现 **LevelPlayInterstitialAdListener** 以获取广告投放信息。

* 建议在加载插页式广告之前设置监听器。
* 每个插页式广告都应有自己的监听器实现。
* 回调在主线程上运行。

```js
const 监听器：LevelPlayInterstitialAdListener = {
    onAdLoaded：（adInfo：LevelPlayAdInfo) => {
        // Provided when the ad is successfully loaded
    },
    onAdLoadFailed：（报错：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：（报错：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
    }
};
```

## 加载 Interstitial Ad##load-interstitial-ad

要加载插页式广告，请使用 **loadAd**（返回 Promise）。

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

## 显示插页式广告##show-interstitial-ad

收到 **onAdLoaded** 回调后，使用 **showAd** 显示插页式广告。

* 如果使用放置，请在 **showAd** API 中通道放置/位置名称，如下文 Placements 部分所示。
* 广告成功展示给用户后，可以通过重复加载步骤加载另一个广告。 

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

### 检查 Ad is Ready##check-ad-is-ready

为了避免展示失败，并确保广告可以正确展示，建议在调用 **showAd** API 之前使用以下 API。

**isAdReady** – 如果广告加载成功并且广告单元未设置上限，则返回一个 Promise，解析为 true，否则返回 false。

**isPlacementCapped** – 静态方法，在限制有效放置/位置时将 Promise resolution 返回 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_放置/位置');
}
```

### 广告位##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_放置/位置');
}
```

## 插页式广告服务的完整实现示例##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_UNIT_ID'))
const 监听器：LevelPlayInterstitialAdListener = {
    onAdLoaded：（adInfo：LevelPlayAdInfo) => {
      // Implement your logic here, for example showing the ad
      interstitialAd.showAd()
    },
    onAdLoadFailed：（报错：LevelPlayAdError) => {
      // Implement your logic here...
    },
    onAdInfoChanged：（adInfo：LevelPlayAdInfo) => {
      // Implement your logic here...
    },
    onAdDisplayed：（adInfo：LevelPlayAdInfo) => {
      // Implement your logic here...
    },
    onAdDisplayFailed：（报错：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

Integration Demo 应用程序演示了如何在 app 中集成插页式广告单元 API。

[下载 React Native demo 应用程序](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)