React Native 네이티브 광고

앱의 UI에 자연스럽게 통합되는 맞춤형 광고입니다. 광고의 각 요소(제목, 본문, 이미지 등)를 개별적으로 배치하여 앱의 디자인에 맞게 표시할 수 있습니다.

시작하기 전에

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

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

기본 구조

네이티브 광고는 다음 구성요소로 이루어집니다.

• AdropNativeAd: 광고 데이터를 관리하는 클래스

• AdropNativeAdView: 광고를 감싸는 컨테이너 뷰

• 개별 뷰 컴포넌트: 헤드라인, 본문, 아이콘, 미디어 등

1

광고 Unit ID 준비하기

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

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

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

테스트 Unit ID 목록

Native	PUBLIC_TEST_UNIT_ID_NATIVE
Native Video (16:9)	PUBLIC_TEST_UNIT_ID_NATIVE_VIDEO_16_9
Native Video (9:16)	PUBLIC_TEST_UNIT_ID_NATIVE_VIDEO_9_16

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

2

네이티브 광고 구현하기

import React, { useEffect, useState, useMemo } from 'react';
import { View, StyleSheet, Dimensions } from 'react-native';
import {
  AdropNativeAd,
  AdropNativeAdView,
  AdropHeadLineView,
  AdropBodyView,
  AdropProfileLogoView,
  AdropProfileNameView,
  AdropMediaView,
  type AdropNativeAdListener,
} from 'adrop-ads-react-native';

const NativeAdExample = () => {
  const [nativeAd, setNativeAd] = useState<AdropNativeAd>();
  const [isLoaded, setIsLoaded] = useState(false);

  const listener: AdropNativeAdListener = useMemo(() => ({
    onAdReceived: (ad) => {
      console.log('광고 로드됨:', ad.properties);
      setIsLoaded(true);
    },
    onAdFailedToReceive: (ad, errorCode) => {
      console.log('광고 로드 실패:', errorCode);
    },
    onAdClicked: (ad) => {
      console.log('광고 클릭됨');
    },
    onAdImpression: (ad) => {
      console.log('광고 노출됨');
    },
  }), []);

  useEffect(() => {
    const ad = new AdropNativeAd('YOUR_UNIT_ID');
    ad.listener = listener;
    setNativeAd(ad);

    return () => {
      ad.destroy();
    };
  }, [listener]);

  const handleLoad = () => nativeAd?.load();

  if (!isLoaded) {
    return (
      <View>
        <Button title="네이티브 광고 로드" onPress={handleLoad} />
      </View>
    );
  }

  return (
    <AdropNativeAdView
      nativeAd={nativeAd}
      style={{ width: Dimensions.get('window').width }}
    >
      <View style={styles.adContainer}>
        <View style={styles.header}>
          <AdropProfileLogoView style={styles.logo} />
          <AdropProfileNameView style={styles.profileName} />
        </View>

        <AdropHeadLineView style={styles.headline} />
        <AdropBodyView style={styles.body} />
        {/* Backfill 광고인 경우 AdropMediaView 사용 */}
        {nativeAd.isBackfilled ? (
          <AdropMediaView style={styles.media} />
        ) : (
          /* 일반 광고인 경우 WebView로 크리에이티브 표시 */
          <WebView
            source={{ html: nativeAd.properties.creative ?? '' }}
            style={styles.media}
            javaScriptEnabled={true}
            onNavigationStateChange={(event) => {
              if (event.url && !event.url.startsWith('data:')) {
                openUrl(event.url);
              }
            }}
          />
        )}
      </View>
    </AdropNativeAdView>
  );
};

const styles = StyleSheet.create({
  adContainer: {
    padding: 16,
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 8,
  },
  logo: {
    width: 40,
    height: 40,
    marginRight: 8,
  },
  profileName: {
    fontSize: 14,
    fontWeight: 'bold',
  },
  headline: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 8,
  },
  body: {
    fontSize: 14,
    color: '#666',
    marginBottom: 12,
  },
  media: {
    width: '100%',
    height: 200,
  },
});

Prop	타입	필수	설명
nativeAd	AdropNativeAd	O	네이티브 광고 인스턴스
style	ViewStyle	X	컨테이너 스타일

개별 뷰 컴포넌트

컴포넌트	설명	스타일 타입
AdropHeadLineView	광고 제목	TextStyle
AdropBodyView	광고 본문	TextStyle
AdropProfileLogoView	광고주 로고	ImageStyle
AdropProfileNameView	광고주 이름	TextStyle
AdropCallToActionView	CTA 버튼 텍스트	TextStyle

AdropNativeAd

const nativeAd = new AdropNativeAd(
  unitId: string,
  useCustomClick?: boolean  // 커스텀 클릭 사용 여부 (기본값: false)
);

Properties

속성	타입	설명
unitId	string	광고 Unit ID
isLoaded	boolean	광고 로드 여부
creativeId	string	광고 소재 ID
txId	string	광고 트랜잭션 ID
campaignId	string	캠페인 ID
isBackfilled	boolean	Backfill 광고 여부
useCustomClick	boolean	커스텀 클릭 사용여부
properties	AdropNativeProperties	광고 콘텐츠 데이터
listener	AdropNativeAdListener	이벤트 리스너

AdropNativeProperties 타입

type AdropNativeProperties = {
  headline?: string;       // 제목
  body?: string;           // 본문
  creative?: string;       // 크리에이티브 HTML
  asset?: string;          // 에셋
  destinationURL?: string; // 클릭 시 이동 URL
  callToAction?: string;   // CTA 텍스트
  profile?: {
    displayName: string;   // 프로필 이름
    displayLogo: string;   // 프로필 로고 URL
  };
  extra?: Record<string, string>; // 추가 데이터
  isBackfilled?: boolean;  // Backfill 광고 여부
};

AdropNativeAdListener 인터페이스

interface AdropNativeAdListener {
  onAdReceived?: (ad: AdropNativeAd) => void;   // 광고 로드 성공
  onAdClicked?: (ad: AdropNativeAd) => void;    // 광고 클릭
  onAdImpression?: (ad: AdropNativeAd) => void; // 광고 화면 노출
  onAdFailedToReceive?: (ad: AdropNativeAd, errorCode?: string) => void; // 광고 로드 실패
}

광고 로드 실패 시, AdropErrorCode 를 확인해주세요

미디어 렌더링: 직광고 vs Backfill 광고

네이티브 광고의 미디어 영역은 광고 유형에 따라 다르게 렌더더링해야 합니다.

Type	isBackfilled	Render Method
직광고	false	WebView 로 properties.creative HTML 랜더링
Backfill 광고	true	AdropMediaView 컴포넌트 사용

중요: Backfill 광고에서 AdropMediaView 대신 WebView를 사용하면 이벤트 집계가 되지 않습니다.

3

예를 들어, t1, t2, t3 라는 커스텀 필드가 추가 되었을 경우에 대해 알아보겠습니다. * 텍스트 라벨은 광고주 콘솔에 입력되는 라벨입니다.

4

비디오 광고 설정

비디오 광고의 재생 컨트롤(play, pause 등)을 활성화하려면 useCustomClick을 true로 설정해야 합니다.

---

커스텀 필드 데이터 사용

extra 필드를 이용하여 커스텀 필드를 노출할 수 있습니다. 예를 들어, t1, t2, t3 라는 커스텀 필드가 추가 되었을 경우에 대해 알아보겠습니다. * 텍스트 라벨은 광고주 콘솔에 입력되는 라벨입니다.

<AdropNativeAdView
    nativeAd={nativeAd}
    style={{
        ...styles.adContainer,
        width: Dimensions.get('window').width,
    }}
>
    <View style={styles.rowContainer}>
        <Text>{nativeAd.properties.extra['t1']}</Text>
        <Text>{nativeAd.properties.extra['t2']}</Text>
        <Text>{nativeAd.properties.extra['t3']}</Text>
    </View>
</AdropNativeAdView>
        

useCustomClick 옵션

클릭 이벤트 호출 시 destinationURL 로 자동이동을 막기위해 사용합니다.

주의: 비디오 광고를 노출할 때, 재생 컨트롤을 사용하기 위해

useCustomClick 을 true로 설정해야합니다.

주의사항

• 반드시 AdropNativeAdView로 광고 요소들을 감싸야 합니다.

• 컴포넌트 언마운트 시 destroy() 를 호출하여 리소스를 해제하세요.

• 미디어 랜더링 필수 분기

  • 직광고 (isBackfilled = false): WebView로 properties.creative 랜더링

  • Backfill 광고 (isBackfilled = true): AdropMediaView 사용 (필수)

  • WebView 사용 시 react-native-webview 설치 필요