전면 광고

1. 인스턴스 생성

AppKey와 placementId를 파라미터로 넘겨주고 전면 광고 인스턴스를 생성합니다.

JavaScript
RNAdPopcornInterstitialAdModule.createInstance('YOUR_APP_KEY', 'INTERSTITIAL');

2. 전면 광고 색상 변경

JavaScript
RNAdPopcornInterstitialAdModule.setAdPopcornAdBackgroundColor('INTERSTITIAL',
'#ffff0000')

iOS의 경우 AdPopcornSSP 2.5.6 이상의 버전을 사용해야 해당 옵션이 동작합니다.

Color 코드의 경우 #AARRGGBB 형식에 맞춰 입력해야 정상 동작 합니다.

3. 광고 요청

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

JavaScript
RNAdPopcornInterstitialAdModule.loadAd('INTERSTITIAL');

4. 광고 노출

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

JavaScript
RNAdPopcornInterstitialAdModule.showAd('INTERSTITIAL');

5. 이벤트 연동

JavaScript
componentDidMount() {
    ...
    const eventEmitter = new NativeEventEmitter();
    eventEmitter.addListener('OnInterstitialLoaded', (event) => {
            console.log('OnInterstitialLoaded event : ' + event.placementId);
            }
        );
    ...
  }
이벤트설명

OnInterstitialLoaded

전면 로딩 성공

ㄴevent.placementId

전면 로딩 성공한 지면 키

OnInterstitialReceiveFailed

전면 로딩 실패

ㄴevent.placementId

전면 로딩 실패한 지면 키

ㄴevent.errorCode

전면 로딩 실패 에러코드

ㄴevent.errorMessage

전면 로딩 실패 에러 메시지

OnInterstitialOpened

전면 노출

ㄴevent.placementId

노출된 전면 광고 지면 키

OnInterstitialOpenFailed

전면 노출 실패

ㄴevent.placementId

전면 노출 실패

OnInterstitialClosed

전면 닫기

ㄴevent.placementId

전면 광고 닫은 지면 키

OnInterstitialClicked

전면 클릭

ㄴevent.placementId

전면 광고 클릭한 지면 키

6. 샘플 코드

JavaScript
import React, { useEffect } from 'react';
import {
  NativeModules,
  NativeEventEmitter
} from 'react-native';

const RNAdPopcornInterstitialAdModule = NativeModules.RNAdPopcornInterstitialAdModule;

function App(): JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };
  RNAdPopcornSSPModule.init();

	RNAdPopcornInterstitialAdModule.createInstance('YOUR_APP_KEY', 'INTERSTITIAL');
  RNAdPopcornInterstitialAdModule.loadAd('INTERSTITIAL');

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={backgroundStyle.backgroundColor}
      />

      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle}>
        <Header />        
      </ScrollView>
    </SafeAreaView>
  );
}


componentDidMount() {
  ...
  const eventEmitter = new NativeEventEmitter();
  eventEmitter.addListener('OnInterstitialLoaded', (event) => {
          console.log('OnInterstitialLoaded event : ' + event.placementId);
					RNAdPopcornInterstitialAdModule.showAd(event.placementId);
          }
      );
  ...
}

Last updated