배너 광고

1. 배너 광고 연동

기본 설정에서 추가한 AdPopcornBanner.tsx 를 이용하여, 배너를 연동해줍니다.

JavaScript

<AdPopcornBanner
                appKey="663451319"
                placementId="BANNER_320x50"
                adSize="320x50"
                refreshTime={15}
                networkScheduleTimeout={20}
                bannerAnimType="FADE_IN"
                autoBgColor={false}
                onBannerAdReceiveSuccess={(event) => { console.log('app.tx onBannerAdReceiveSuccess : ' + event.placementId) }}
                onBannerAdReceiveFailed={(event) => { console.log('app.tx onBannerAdReceiveFailed : ' + event.placementId) }}
                onBannerAdClicked={(event) => { console.log('app.tx onBannerAdClicked : ' + event.placementId) }}
              />

appKey, placementId, adSize를 필수로 세팅해 주어야 광고가 요청됩니다.

2. 샘플 코드

JavaScript

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

import AdPopcornBanner from './src/ads/adpopcornssp/AdPopcornBanner';

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

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };
  RNAdPopcornSSPModule.init('your app key');
  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={backgroundStyle.backgroundColor}
      />

      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle}>
        <Header />
	    <AdPopcornBanner
                appKey="663451319"
                placementId="BANNER_320x50"
                adSize="320x50"
                refreshTime={15}
                networkScheduleTimeout={20}
                bannerAnimType="FADE_IN"
                autoBgColor={false}
                onBannerAdReceiveSuccess={(event) => { console.log('app.tx onBannerAdReceiveSuccess : ' + event.placementId) }}
                onBannerAdReceiveFailed={(event) => { console.log('app.tx onBannerAdReceiveFailed : ' + event.placementId) }}
                onBannerAdClicked={(event) => { console.log('app.tx onBannerAdClicked : ' + event.placementId) }}
             />
      </ScrollView>
    </SafeAreaView>
  );
}

3. 배너 광고 property

배너에서 지원하는 property는 다음과 같습니다.

property	설명
appKey	애드팝콘 SSP 페이지에서 발급받은 앱 키
placementId	애드팝콘 SSP 페이지에서 발급받은 Placement ID
adSize	지면 사이즈 (‘320x50’, ‘320x100’, ‘300x250’ , ‘AdaptiveSize’)
refreshTime	지면 자동 갱신 시간
networkScheduleTimeout	미디에이션 타임아웃 시간
bannerAnimType	광고 갱신 시 애니메이션 타입('FADE_IN', 'SLIDE_LEFT', 'SLIDE_RIGHT', 'TOP_SLIDE', 'BOTTOM_SLIDE', 'CIRCLE','NONE')
autoBgColor	광고 이외의 백그라운드 색상 채움 기능

4. 콜백 이벤트

이벤트 리스너	설명
OnBannerAdReceiveSuccess	배너 광고 로딩 성공
ㄴ event.placementId	배너 로딩 성공한 지면 키
OnBannerAdReceiveFailed	배너 광고 로딩 실패 (전달되는 에러코드는 아티클 하단의 테이블 참고)
ㄴ event.placementId	배너 로딩 실패한 지면 키
ㄴ event.errorCode	배너 로딩 실패 에러코드
ㄴ event.errorMessage	배너 로딩 실패 에러 메시지
OnBannerAdClicked	배너 클릭 시
ㄴ event.placementId	배너 클릭한 지면 키