React Native 배너 광고

배너 광고는 앱 레이아웃의 일부를 차지하는 직사각형 광고입니다. 사용자가 앱과 상호작용하는 동안 화면에 유지됩니다.

시작하기 전에

1. React Native SDK 설정을 완료하세요.

2. Adrop 콘솔에 배너 광고 유닛을 생성하고 Unit ID를 확인하세요.

1

광고 Unit ID 준비

Adrop 콘솔에서 생성한 광고 유닛 ID를 준비하세요. 개발 중에는 테스트 ID를 사용할 수 있습니다.

// 테스트용 Unit ID
const unitId = "PUBLIC_TEST_UNIT_ID_320_50"

// 프로덕션용 Unit ID (콘솔에서 발급)
const unitId = "YOUR_UNTI_ID" 

테스트 Unit ID 목록

Banner (375X80)	PUBLIC_TEST_UNIT_ID_375_80
Banner (320X50)	PUBLIC_TEST_UNIT_ID_320_50
Banner (320X100)	PUBLIC_TEST_UNIT_ID_320_100
Banner(캐러셀)	PUBLIC_TEST_UNIT_ID_CAROUSEL
Banner Video (16:9)	PUBLIC_TEST_UNIT_ID_BANNER_VIDEO_16_9
Banner Video (9:16)	PUBLIC_TEST_UNIT_ID_BANNER_VIDEO_9_16

주의: 테스트 Unit ID는 개발 중에만 사용하세요. 앱 출시 전 반드시 애드컨트롤 > 콘솔에서 발급받은 실제 Unit ID로 교체해야 합니다.

2

배너 광고 구현하기

import React from 'react';
import { View, Dimensions } from 'react-native';
import { AdropBanner, type AdropBannerMetadata } from 'adrop-ads-react-native';

const BannerExample = () => {
  const screenWidth = Dimensions.get('window').width;

  return (
    <View>
      <AdropBanner
        unitId="YOUR_UNIT_ID"
        style={{ width: screenWidth, height: 80 }}
        onAdReceived={(unitId, metadata) => {
          console.log('광고 로드 완료:', unitId);
        }}
        onAdFailedToReceive={(unitId, errorCode) => {
          console.log('광고 로드 실패:', errorCode);
        }}
        onAdImpression={(unitId, metadata) => {
          console.log('광고 로드 노출:', unitId)
        }}
        onAdClicked{(unitId, metadata) => {
          console.log('광고 로드 클릭:', unitId)
        }}
      />
    </View>
  );
};

Props

Parameter	Type	Required	Default	Description
unitId	STRING	Y	-	Adrop에서 발급받은 광고 Unit ID
style	{ width: number, height: number }	Y	-	배너 크기
autoLoad	BOOLEAN	N	true	컴포넌트 마운트 시 자동 로드 여부
useCustomClick	BOOLEAN	N	false	커스텀 클릭 핸들링 사용 여부

콜백 이벤트

Event	Parameter	Description
onAdReceived	unitId, metadata	광고가 성공적으로 로드됨
onAdFailedToReceive	unitId, errorCode	광고 로드 실패, AdropErrorCode 를 확인해주세요
onAdImpression	unitId, metadata	광고가 화면에 노출됨
onAdClicked	unitId, metadata	광고가 클릭됨

AdropBannerMetadata

type AdropBannerMetadata = {
  creativeId: string;     // 크리에이티브 ID
  txId: string;           // 트랜잭션 ID
  campaignId: string;     // 캠페인 ID
  destinationURL: string; // 클릭 시 이동할 URL
};

수동 로드

autoLoad={false}로 설정하고 ref를 사용하여 수동으로 광고를 로드할 수 있습니다.

import React, { useRef } from 'react';
import { View, Button, Dimensions } from 'react-native';
import { AdropBanner } from 'adrop-ads-react-native';

interface IBannerRef {
  load: () => void;
}

const ManualLoadExample = () => {
  const bannerRef = useRef<IBannerRef>(null);
  const screenWidth = Dimensions.get('window').width;

  const loadBanner = () => {
    bannerRef.current?.load();
  };

  return (
    <View>
      <Button title="광고 로드" onPress={loadBanner} />

      <AdropBanner
        ref={bannerRef}
        unitId="YOUR_UNIT_ID"
        style={{ width: screenWidth, height: 80 }}
        autoLoad={false}
        onAdReceived={(unitId) => console.log('광고 로드됨:', unitId)}
        onAdFailedToReceive={(unitId, error) => console.log('에러:', error)}
      />
    </View>
  );
};