> 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-2.md). # 전면 광고 ## 1. 인스턴스 생성 AppKey와 placementId를 파라미터로 넘겨주고 전면 광고 인스턴스를 생성합니다. ```typescript AdPopcornInterstitialAd.createInstance('YOUR_APP_KEY', 'PLACEMENT_ID'); ``` ## 2. 전면 광고 색상 변경 ```typescript AdPopcornInterstitialAd.setAdPopcornAdBackgroundColor('PLACEMENT_ID', '#ffff0000') ``` {% hint style="info" %} iOS의 경우 AdPopcornSSP `2.5.6` 이상의 버전을 사용해야 해당 옵션이 동작합니다. {% endhint %} {% hint style="info" %} Color 코드의 경우 [#AARRGGBB](https://yuuj.tistory.com/15) 형식에 맞춰 입력해야 정상 동작 합니다. {% endhint %} ## 3. 광고 요청 전면 광고 노출을 원하는 시점에 `loadAd()` API를 호출하여 서버에 광고를 요청합니다. ```typescript AdPopcornInterstitialAd.loadAd('PLACEMENT_ID'); ``` ## 4. 광고 노출 전면 광고 노출 시점에 `showAd()` API를 추가하여 광고를 노출합니다. ```typescript AdPopcornInterstitialAd.showAd('PLACEMENT_ID'); ``` ## 5. 이벤트 연동 ```typescript // Interstitial 이벤트 const intLoadedSub = AdPopcornInterstitialAd.addListener(AdPopcornInterstitialAdEvents.OnInterstitialLoaded, (e) => console.log('[Interstitial] Loaded:', e.placementId)); const intFailedSub = AdPopcornInterstitialAd.addListener(AdPopcornInterstitialAdEvents.OnInterstitialReceiveFailed, (e) => console.log('[Interstitial] LoadFailed:', e.placementId, e.errorCode, e.errorMessage)); const intOpenedSub = AdPopcornInterstitialAd.addListener(AdPopcornInterstitialAdEvents.OnInterstitialOpened, (e) => console.log('[Interstitial] Opened:', e.placementId)); const intOpenFailSub = AdPopcornInterstitialAd.addListener(AdPopcornInterstitialAdEvents.OnInterstitialOpenFailed, (e) => console.log('[Interstitial] OpenFailed:', e.placementId, e.errorCode)); const intClosedSub = AdPopcornInterstitialAd.addListener(AdPopcornInterstitialAdEvents.OnInterstitialClosed, (e) => console.log('[Interstitial] Closed:', e.placementId)); const intClickedSub = AdPopcornInterstitialAd.addListener(AdPopcornInterstitialAdEvents.OnInterstitialClicked, (e) => console.log('[Interstitial] Clicked:', e.placementId)); ``` | 이벤트 | 설명 | | ------------------------------------------------------------- | --------------- | | `OnInterstitialLoaded` | 전면 로딩 성공 | | ㄴevent.placementId | 전면 로딩 성공한 지면 키 | | `OnInterstitialReceiveFailed` | 전면 로딩 실패 | | ㄴevent.placementId | 전면 로딩 실패한 지면 키 | | ㄴevent.errorCode | 전면 로딩 실패 에러코드 | | ㄴevent.errorMessage | 전면 로딩 실패 에러 메시지 | | `OnInterstitialOpened` | 전면 노출 | | ㄴevent.placementId | 노출된 전면 광고 지면 키 | | `OnInterstitialOpenFailed` | 전면 노출 실패 | | ㄴevent.placementId | 전면 노출 실패 | | `OnInterstitialClosed` | 전면 닫기 | | ㄴevent.placementId | 전면 광고 닫은 지면 키 | | `OnInterstitialClicked` | 전면 클릭 | | ㄴevent.placementId | 전면 광고 클릭한 지면 키 | ## 6. 샘플 코드 
import React, { useEffect } from 'react';
import { Platform, SafeAreaView, ScrollView, StyleSheet, Text, View, Button } from 'react-native';
import {
  AdPopcornSSP,
  AdPopcornInterstitialAd,
  AdPopcornSSPEvents,
  AdPopcornInterstitialAdEvents,
} 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') {
        AdPopcornInterstitialAd.createInstance(APP_KEY_IOS, 'iOS_INTERSTITIAL');
      } else {
        AdPopcornInterstitialAd.createInstance(APP_KEY_ANDROID, 'INTERSTITIAL');
      }
    });

    // Interstitial 이벤트
    const intLoadedSub = AdPopcornInterstitialAd.addListener(AdPopcornInterstitialAdEvents.OnInterstitialLoaded, (e) => console.log('[Interstitial] Loaded:', e.placementId));
    const intFailedSub = AdPopcornInterstitialAd.addListener(AdPopcornInterstitialAdEvents.OnInterstitialReceiveFailed, (e) => console.log('[Interstitial] LoadFailed:', e.placementId, e.errorCode, e.errorMessage));
    const intOpenedSub = AdPopcornInterstitialAd.addListener(AdPopcornInterstitialAdEvents.OnInterstitialOpened, (e) => console.log('[Interstitial] Opened:', e.placementId));
    const intOpenFailSub = AdPopcornInterstitialAd.addListener(AdPopcornInterstitialAdEvents.OnInterstitialOpenFailed, (e) => console.log('[Interstitial] OpenFailed:', e.placementId, e.errorCode));
    const intClosedSub = AdPopcornInterstitialAd.addListener(AdPopcornInterstitialAdEvents.OnInterstitialClosed, (e) => console.log('[Interstitial] Closed:', e.placementId));
    const intClickedSub = AdPopcornInterstitialAd.addListener(AdPopcornInterstitialAdEvents.OnInterstitialClicked, (e) => console.log('[Interstitial] Clicked:', e.placementId));

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

    return () => {
      initSub.remove();
      intLoadedSub.remove();
      intFailedSub.remove();
      intOpenedSub.remove();
      intOpenFailSub.remove();
      intClosedSub.remove();
      intClickedSub.remove();
    };
  }, []);

  const loadInterstitial = () => {
    const pid = Platform.OS === 'ios' ? 'iOS_INTERSTITIAL' : 'INTERSTITIAL';
    AdPopcornInterstitialAd.loadAd(pid);
  };
  const showInterstitial = () => {
    const pid = Platform.OS === 'ios' ? 'iOS_INTERSTITIAL' : 'INTERSTITIAL';
    AdPopcornInterstitialAd.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</Text>
          <Button title="Load Interstitial" onPress={loadInterstitial} />
          <Button title="Show Interstitial" onPress={showInterstitial} />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}