> For the complete documentation index, see [llms.txt](https://adpopcornssp.gitbook.io/ssp-sdk/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://adpopcornssp.gitbook.io/ssp-sdk/sdk/react-native/undefined-3.md).

# 전면 비디오 광고

## 1. 인스턴스 생성

AppKey와placementId를 파라미터로 넘겨주고 전면 비디오 광고 관련 인스턴스를 생성한다.

```typescript
AdPopcornInterstitialVideoAd.createInstance('YOUR_APP_KEY', 'PLACEMENT_ID');
```

## 2. 광고 요청

전면 비디오  광고 노출을 원하는 시점에 <mark style="color:red;">`loadAd()`</mark> API를 호출하여 서버에 광고를 요청합니다.

```typescript
AdPopcornInterstitialVideoAd.loadAd('PLACEMENT_ID');
```

## 3. 광고 노출

전면 비디오광고 노출 시점에 <mark style="color:red;">`showAd()`</mark> API를 추가하여 광고를 노출합니다.

```typescript
AdPopcornInterstitialVideoAd.showAd('PLACEMENT_ID');
```

## 4. 이벤트 연동

```typescript
    // Interstitial Video 이벤트
    const ivLoadedSub = AdPopcornInterstitialVideoAd.addListener(AdPopcornInterstitialVideoAdEvents.OnInterstitialVideoAdLoaded, (e) => console.log('[InterstitialVideo] Loaded:', e.placementId));
    const ivFailedSub = AdPopcornInterstitialVideoAd.addListener(AdPopcornInterstitialVideoAdEvents.OnInterstitialVideoAdLoadFailed, (e) => console.log('[InterstitialVideo] LoadFailed:', e.placementId, e.errorCode, e.errorMessage));
    const ivOpenedSub = AdPopcornInterstitialVideoAd.addListener(AdPopcornInterstitialVideoAdEvents.OnInterstitialVideoAdOpened, (e) => console.log('[InterstitialVideo] Opened:', e.placementId));
    const ivOpenFailSub = AdPopcornInterstitialVideoAd.addListener(AdPopcornInterstitialVideoAdEvents.OnInterstitialVideoAdOpenFalied, (e) => console.log('[InterstitialVideo] OpenFailed:', e.placementId));
    const ivClosedSub = AdPopcornInterstitialVideoAd.addListener(AdPopcornInterstitialVideoAdEvents.OnInterstitialVideoAdClosed, (e) => console.log('[InterstitialVideo] Closed:', e.placementId));
    const ivClickedSub = AdPopcornInterstitialVideoAd.addListener(AdPopcornInterstitialVideoAdEvents.OnInterstitialVideoAdClicked, (e) => console.log('[InterstitialVideo] Clicked:', e.placementId));

```

| 이벤트                                                               | 설명                    |
| ----------------------------------------------------------------- | --------------------- |
| <mark style="color:red;">`OnInterstitialVideoAdLoaded`</mark>     | 전면 비디오 로딩 성공          |
| ㄴevent.placementId                                                | 전면 비디오 로딩 성공한 지면 키    |
| <mark style="color:red;">`OnInterstitialVideoAdLoadFailed`</mark> | 전면 비디오 로딩 실패          |
| ㄴevent.placementId                                                | 전면 비디오 로딩 실패한 지면 키    |
| ㄴevent.errorCode                                                  | 전면 비디오 로딩 실패 에러코드     |
| ㄴevent.errorMessage                                               | 전면 비디오 로딩 실패 에러 메시지   |
| <mark style="color:red;">`OnInterstitialVideoAdOpened`</mark>     | 전면 비디오 노출             |
| ㄴevent.placementId                                                | 노출된 전면 비디오 광고 지면 키    |
| <mark style="color:red;">`OnInterstitialVideoAdOpenFalied`</mark> | 전면 비디오 노출 실패          |
| ㄴevent.placementId                                                | 노출 실패한 전면 비디오 광고 지면 키 |
| <mark style="color:red;">`OnInterstitialVideoAdClosed`</mark>     | 전면 비디오 닫기             |
| ㄴevent.placementId                                                | 전면 비디오 광고 닫은 지면 키     |
| <mark style="color:red;">`OnInterstitialVideoAdClicked`</mark>    | 전면 비디오 클릭             |
| ㄴevent.placementId                                                | 전면 비디오 광고 클릭한 지면 키    |

## 5. 샘플 코드

```typescript
import React, { useEffect } from 'react';
import { Platform, SafeAreaView, ScrollView, StyleSheet, Text, View, Button } from 'react-native';
import {
  AdPopcornSSP,
  AdPopcornInterstitialVideoAd,
  AdPopcornSSPEvents,
  AdPopcornInterstitialVideoAdEvents,
} from 'react-native-adpopcorn-ssp';

const APP_KEY_ANDROID = '663451319';
const APP_KEY_IOS = '397261446';

function App(): JSX.Element {
  useEffect(() => {
    // SSP 초기화 이벤트
    const initSub = AdPopcornSSP.addListener(AdPopcornSSPEvents.OnAdPopcornSSPSDKDidInitialize, () => {
      console.log('[SSP] SDK Initialized');
      if (Platform.OS === 'ios') {
        AdPopcornInterstitialVideoAd.createInstance(APP_KEY_IOS, 'iOS_VIDEO');
      } else {
        AdPopcornInterstitialVideoAd.createInstance(APP_KEY_ANDROID, 'VIDEO');
      }
    });

    // Interstitial Video 이벤트
    const ivLoadedSub = AdPopcornInterstitialVideoAd.addListener(AdPopcornInterstitialVideoAdEvents.OnInterstitialVideoAdLoaded, (e) => console.log('[InterstitialVideo] Loaded:', e.placementId));
    const ivFailedSub = AdPopcornInterstitialVideoAd.addListener(AdPopcornInterstitialVideoAdEvents.OnInterstitialVideoAdLoadFailed, (e) => console.log('[InterstitialVideo] LoadFailed:', e.placementId, e.errorCode, e.errorMessage));
    const ivOpenedSub = AdPopcornInterstitialVideoAd.addListener(AdPopcornInterstitialVideoAdEvents.OnInterstitialVideoAdOpened, (e) => console.log('[InterstitialVideo] Opened:', e.placementId));
    const ivOpenFailSub = AdPopcornInterstitialVideoAd.addListener(AdPopcornInterstitialVideoAdEvents.OnInterstitialVideoAdOpenFalied, (e) => console.log('[InterstitialVideo] OpenFailed:', e.placementId));
    const ivClosedSub = AdPopcornInterstitialVideoAd.addListener(AdPopcornInterstitialVideoAdEvents.OnInterstitialVideoAdClosed, (e) => console.log('[InterstitialVideo] Closed:', e.placementId));
    const ivClickedSub = AdPopcornInterstitialVideoAd.addListener(AdPopcornInterstitialVideoAdEvents.OnInterstitialVideoAdClicked, (e) => console.log('[InterstitialVideo] Clicked:', e.placementId));

    // SDK 초기화
    const appKey = Platform.OS === 'ios' ? APP_KEY_IOS : APP_KEY_ANDROID;
    AdPopcornSSP.init(appKey);

    return () => {
      ivLoadedSub.remove();
      ivFailedSub.remove();
      ivOpenedSub.remove();
      ivOpenFailSub.remove();
      ivClosedSub.remove();
      ivClickedSub.remove();
    };
  }, []);

  const loadInterstitialVideo = () => {
    const pid = Platform.OS === 'ios' ? 'iOS_VIDEO' : 'VIDEO';
    AdPopcornInterstitialVideoAd.loadAd(pid);
  };
  const showInterstitialVideo = () => {
    const pid = Platform.OS === 'ios' ? 'iOS_VIDEO' : 'VIDEO';
    AdPopcornInterstitialVideoAd.showAd(pid);
  };

  return (
    <SafeAreaView style={styles.container}>
      <ScrollView contentInsetAdjustmentBehavior="automatic" contentContainerStyle={{ paddingBottom: 100 }}>
        <Text style={styles.title}>AdPopcorn SSP Example</Text>

        <View style={styles.section}>
          <Text style={styles.sectionTitle}>Interstitial Video</Text>
          <Button title="Load Interstitial Video" onPress={loadInterstitialVideo} />
          <Button title="Show Interstitial Video" onPress={showInterstitialVideo} />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}
```