리워드 비디오 광고

1. 인스턴스 생성

placementId를 파라미터로 넘겨주고 리워드비디오 광고 관련 인스턴스를 생성한다.

JavaScript

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

2. 광고 요청

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

JavaScript

RNAdPopcornRewardVideoAdModule.loadAd('PLACEMENT_ID');

3. 광고 노출

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

JavaScript

RNAdPopcornRewardVideoAdModule.showAd('PLACEMENT_ID');

4. 이벤트 연동

JavaScript

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

이벤트	설명
OnRewardVideoAdLoaded	리워드 비디오 로딩 성공
ㄴevent.placementId	리워드 비디오 로딩 성공한 지면 키
OnRewardVideoAdLoadFailed	리워드 비디오 로딩 실패
ㄴevent.placementId	리워드 비디오 로딩 실패한 지면 키
ㄴevent.errorCode	리워드 비디오 로딩 실패 에러코드
ㄴevent.errorMessage	리워드 비디오 로딩 실패 에러 메시지
OnRewardVideoAdOpened	리워드 비디오 노출
ㄴevent.placementId	노출된 리워드 비디오 광고 지면 키
OnRewardVideoAdOpenFalied	리워드 비디오 노출 실패
ㄴevent.placementId	노출 실패한 리워드 비디오 광고 지면 키
OnRewardVideoAdClosed	리워드 비디오 닫기
ㄴevent.placementId	리워드 비디오 광고 닫은 지면 키
OnRewardVideoAdClicked	리워드 비디오 클릭
ㄴevent.placementId	리워드 비디오 광고 클릭한 지면 키
OnRewardVideoPlayCompleted	리워드 비디오 재생 완료
ㄴ event.placementId	리워드 비디오 재생 완료한 지면 키
OnRewardPlusCompleted	리워드 플러스 활성화된 지면의 적립 요청 완료
ㄴ event.resultCode	적립 요청 결과 코드
ㄴ event.reward	적립 요청된 포인트

• OnRewardVideoAdClicked : 클릭 이벤트의 경우 Android에서만 제공됩니다.

5. 샘플 코드

JavaScript

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

const RNAdPopcornRewardVideoAdModule = NativeModules.RNAdPopcornRewardVideoAdModule;

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

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

  RNAdPopcornRewardVideoAdModule.createInstance('YOUR_APP_KEY', 'PLACEMENT_ID');
  RNAdPopcornRewardVideoAdModule.loadAd('PLACEMENT_ID');

  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('OnRewardVideoAdLoaded', (event) => {
          console.log('OnRewardVideoAdLoaded event : ' + event.placementId);
          RNAdPopcornRewardVideoAdModule.showAd(event.placementId);
          }
      );
  ...
}