애드팝콘 SSP SDK 연동가이드
애드팝콘 홈페이지애드팝콘 SSP 콘솔 바로가기
  • 개요
  • Android
    • 기본 설정
    • 배너 광고
    • 전면 광고
    • 전면 비디오 광고
    • 리워드 비디오 광고
    • 보상형 광고 플러스 연동(beta)
    • 네이티브 광고
      • 네이티브 광고 레이아웃 구성 가이드
        • AdPopcornSSP NativeAdView
    • 스플래시 광고
    • 모달 광고
    • 팝콘텐츠 광고
    • 응답 에러 코드 및 샘플 프로젝트
    • 미디에이션(Android)
      • AdFit
      • Admob
      • AdForus
      • ADOP
      • GAM (Google Ad Manager)
      • Cauly
      • FAN(Facebook Audience Network)
      • MezzoMedia
      • Mintegral
      • Mobwith
      • UnityAds
      • Vungle(LiftOff)
      • Fyber
      • Pangle
      • AppLovin
      • AppLovinMax
      • NAM (Naver Ad Manager)
      • CoupangCPM
    • AppLovin Max Android Mediation 가이드
    • 릴리즈 노트
  • iOS
    • 기본 설정
      • CocoaPod 설치
      • SPM 설치
      • 수동 설치
    • 배너 광고
    • 전면 광고
    • 전면 비디오 광고
    • 리워드 비디오 광고
    • 보상형 광고 플러스 연동(beta)
    • 네이티브 광고
      • NativeAdView layout
        • 직접 설정
        • 템플릿 사용
    • 스플래시 광고
    • 모달 광고
    • 팝콘텐츠 광고
    • 응답 에러 코드 및 샘플 프로젝트
    • 미디에이션
      • NAM (Naver Ad Manager)
      • AdFit
      • AppLovin
      • AppLovinMAX
      • UnityAds
      • Vungle
      • FBAudienceNetwork (FaceBook)
      • AdMob
      • Google AdManager(GAM)
      • ADOP
      • Fyber
      • Mezzo
      • Mintegral
      • Pangle
      • Cauly
      • SDK, Mediation ver 호환성
    • AppLovin Max iOS Mediation 가이드
    • 릴리즈노트
  • Unity
    • Unity (Android)
      • 기본 설정
      • 배너 광고
      • 전면 광고
      • 리워드 비디오 광고
      • 네이티브 광고
      • 보상형 광고 플러스 연동(beta)
      • 미디에이션 Unity Android
    • Unity (iOS)
      • 기본 설정
      • 배너 광고
      • 전면 광고
      • 리워드 비디오 광고
      • 네이티브 광고
      • 보상형 광고 플러스 연동(beta)
      • 미디에이션 Unity iOS
    • 에러 코드
  • Flutter
    • 기본 설정
    • 배너 광고
    • 전면 광고
    • 전면 비디오 광고
    • 리워드 비디오 광고
    • 보상형 광고 플러스 연동(beta)
    • 네이티브 광고
    • 팝콘텐츠 광고
  • React Native(beta)
    • 기본 설정
    • 배너 광고
    • 전면 광고
    • 전면 비디오 광고
    • 리워드 비디오 광고
    • 네이티브 광고
  • Web SDK
  • 하이브리드 앱 - Web(APM + NAM)
    • 네이티브 Side 연동(Android)
    • 네이티브 Side 연동(iOS)
    • WebPage Side 연동
    • 광고 ID 수동 세팅
  • 하이브리드 앱- Web(Adfit)
    • Android
    • iOS
  • 테스트 코드
  • 리포트 API
    • 애드팝콘 SSP Report API
    • DSP Report API
    • Publisher API (Report)
    • Publisher API (Metadata)
    • Adserver Report API
    • Popcontent Report API
  • 추가 기능 연동가이드
    • Adfit Bizboard Android 연동 가이드
    • 웹 CS 페이지 연동
    • AppLovin Custom Network
      • Android
      • iOS
    • KT Library
    • 원스토어 연동가이드
      • 애드팝콘 SSP SDK for Onestore
      • 원스토어 Ads 래핑 가이드(내부용)
        • 배너 광고
        • 전면 광고
        • 전면 비디오 광고
        • 리워드 비디오 광고
        • 네이티브 광고
        • SSP 미디에이션
        • 에러 코드 및 외부 노출 함수
        • 테스트 지면 키
        • AAR 라이브러리 목록
    • 쿠팡 연동가이드
      • 쿠팡 포스트백 연동
      • 쿠팡 EP 리스트 연동
      • 쿠팡 리포트 API 연동
        • 쿠팡 일별 리포트 API
        • 쿠팡 API - Report
        • 쿠팡 API - Product list
    • Reward Banner 스크립트 연동가이드
      • Reward Banner 스크립트 Android
      • Reward Banner 스크립트 iOS
    • 차단관리 파일 가이드
    • 커스텀 타입 연동 가이드
      • 커스텀 타입(Android)
      • 커스텀 타입(iOS)
    • 쿠팡 클릭 이벤트 페이지 연동 가이드
  • 팝콘텐츠 연동가이드
    • WebView 직접 연동
    • 리워드 콜백
  • 웹 SSP
    • 쿠키 매칭
    • Web Header Bidding(WIP)
Powered by GitBook
On this page
  • 1. 인스턴스 생성
  • 2. 전면 광고 색상 변경
  • 3. 광고 요청
  • 4. 광고 노출
  • 5. 이벤트 연동
  • 6. 샘플 코드

Was this helpful?

  1. React Native(beta)

전면 광고

Previous배너 광고Next전면 비디오 광고

Last updated 9 months ago

Was this helpful?

1. 인스턴스 생성

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

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

2. 전면 광고 색상 변경

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

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

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

3. 광고 요청

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

JavaScript
RNAdPopcornInterstitialAdModule.loadAd('PLACEMENT_ID');

4. 광고 노출

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

JavaScript
RNAdPopcornInterstitialAdModule.showAd('PLACEMENT_ID');

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

#AARRGGBB