# React Native용 인터스티셜 광고 통합

> SDK를 초기화하고 광고 유닛을 생성하고 이벤트 리스너를 설정 이벤트.이벤트

레벨플레이 인터스티셜 광고 전체 화면 광고 유닛으로, 일반적으로 앱 라이프사이클 동안 자연스러운 전환 지점에서 게재됩니다. 정적 및 비디오 인터스티셜을 모두 지원합니다. 레벨플레이 Mediation 플랫폼을 통해 인터스티셜을 제공할 수도 있습니다.

> **Note:**
>
> 이 기술 자료는 SDK 8.4.0 이상에 해당합니다.

## 필수 조건##prerequisites

* React 네이티브 플러그인을 앱에 올바르게 통합했는지 확인합니다. 통합은 [여기](/grow/levelplay/sdk/react/plugin-integration.md) 설명되어 있습니다.
* 레벨플레이 초기화 API 사용하여 SDK를 초기화해야 합니다.
* 레벨플레이 대시보드에서 AdUnitID를 찾습니다.

## 인터스티셜 광고 만들기 및 이벤트 등록##create-interstitial-and-register-to-events

인터스티셜 광고 오브젝트의 생성은 **onInitSuccess** 콜백을 수신한 후에 수행해야 합니다.

레벨플레이 SDK는 인터스티셜 광고 활동을 알려주는 여러 이벤트를 발생시킵니다. 이러한 이벤트를 수신하려면 광고 유닛의 리스너를 등록합니다. SDK를 초기화하기 전에 정보를 손실하지 않도록 리스너를 설정해야 합니다.

```js
import {
    LevelPlayInterstitialAd,
    type LevelPlayInterstitialAdListener,
    type LevelPlayAdInfo,
    type LevelPlayAdError
} from 'Mediation

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

## 인터스티셜 광고 리스너 설정##set-interstitial-listener

코드에 **LevelPlayInterstitialAdListener를 구현**하여 광고 전송에 대해 알 수 있습니다.

* 인터스티셜 광고 광고를 로드하기 전에 리스너를 설정하는 것이 좋습니다.
* 각 인터스티셜 광고 광고에는 고유한 리스너 구현이 있어야 합니다.
* 콜백은 메인 스레드 실행됩니다.

```js
const 리스너: 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/Rate를 포함합니다.
    },
    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
    }
};
```

## 인터스티셜 광고 로드##load-interstitial-ad

인터스티셜 광고를 로드하려면 **loadAd를** 사용합니다(Promise 반환).

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

## 인터스티셜 광고 표시##show-interstitial-ad

**showAd를** 사용하여 **onAdLoaded** 콜백을 수신한 후 인터스티셜 광고를 표시합니다.

* 플레이스먼트를 사용하는 경우 아래의 플레이스먼트 섹션에 표시된 대로 **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로 확인되는 Promise를 반환합니다.

**isPlacementCapped** – 유효한 플레이스먼트가 제한된 경우 true로 확인되는 Promise를 반환하는 정적 메서드입니다. 플레이스먼트가 유효하지 않거나 제한이 없는 경우 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

레벨플레이 대시보드에서 인터스티셜 광고의 [플레이스먼트](/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
} from '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: (error: 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 ...
```

## 레벨플레이 Mediation 데모 앱##levelplay-mediation-demo-app

통합 데모 애플리케이션 앱에 인터스티셜 광고 광고 유닛 API를 통합하는 방법을 보여 줍니다.

[React 네이티브 데모 애플리케이션 다운로드](https://github.com/ironsource-mobile/react-native-SDK/tree/master/example)

[통합 테스트 제품군](/grow/levelplay/sdk/react/integration-test-suite.md)과의 통합 여부 확인

## 다음 단계##next-steps

추가 인터스티셜 광고 광고 네트워크를 연동하거나 추가 광고 형식을 설정 Unity 통합 가이드를 따르십시오.

* [Mediation Networks 추가](/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)