전면 비디오 광고

1. 인스턴스 생성

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

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

2. 광고 요청

전면 비디오 광고 노출을 원하는 시점에 loadAd() API를 호출하여 서버에 광고를 요청합니다.

AdPopcornInterstitialVideoAd.loadAd('PLACEMENT_ID');

3. 광고 노출

전면 비디오광고 노출 시점에 showAd() API를 추가하여 광고를 노출합니다.

AdPopcornInterstitialVideoAd.showAd('PLACEMENT_ID');

4. 이벤트 연동

    // 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));

이벤트	설명
OnInterstitialVideoAdLoaded	전면 비디오 로딩 성공
ㄴevent.placementId	전면 비디오 로딩 성공한 지면 키
OnInterstitialVideoAdLoadFailed	전면 비디오 로딩 실패
ㄴevent.placementId	전면 비디오 로딩 실패한 지면 키
ㄴevent.errorCode	전면 비디오 로딩 실패 에러코드
ㄴevent.errorMessage	전면 비디오 로딩 실패 에러 메시지
OnInterstitialVideoAdOpened	전면 비디오 노출
ㄴevent.placementId	노출된 전면 비디오 광고 지면 키
OnInterstitialVideoAdOpenFalied	전면 비디오 노출 실패
ㄴevent.placementId	노출 실패한 전면 비디오 광고 지면 키
OnInterstitialVideoAdClosed	전면 비디오 닫기
ㄴevent.placementId	전면 비디오 광고 닫은 지면 키
OnInterstitialVideoAdClicked	전면 비디오 클릭
ㄴevent.placementId	전면 비디오 광고 클릭한 지면 키

5. 샘플 코드

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>
  );
}