애드팝콘 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. 배너 광고 property
  • 4. 콜백 이벤트

Was this helpful?

  1. React Native(beta)

배너 광고

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

placementId

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

배너 클릭한 지면 키

Previous기본 설정Next전면 광고

Last updated 9 months ago

Was this helpful?

에서 발급받은 앱 키

에서 발급받은 Placement ID

애드팝콘 SSP 페이지
애드팝콘 SSP 페이지