네이티브 광고 - Ad Control Help Center

개요

네이티브 광고는 앱의 디자인에 맞게 광고 UI를 자유롭게 커스터마이징할 수 있는 광고 포맷입니다. 광고 소재(이미지, 동영상), 제목, 설명, CTA 버튼 등의 요소를 개별적으로 배치하여 자연스러운 사용자 경험을 제공할 수 있습니다.

주요 기능

완전한 UI 커스터마이징: 앱의 디자인 시스템에 맞게 광고 레이아웃을 자유롭게 구성
다양한 미디어 지원: 이미지 및 동영상 광고 소재 지원
유연한 클릭 처리: 전체 클릭 또는 커스텀 클릭 처리 가능
프로필 정보 표시: 광고주 프로필 로고 및 이름 지원
백필 광고 지원: 백필 광고 여부 확인 가능

AdropNativeAd 클래스

네이티브 광고를 로드하고 관리하는 메인 클래스입니다.

생성자

new AdropNativeAd(
  unitId: string,
  useCustomClick?: boolean,
  preferredAdChoicesPosition?: AdropAdChoicesPosition
)

string

필수

광고 지면 ID (콘솔에서 발급)

boolean

기본값:"false"

커스텀 클릭 처리 사용 여부

true: 개발자가 직접 클릭 처리를 구현 (비디오 광고 컨트롤러 사용 가능)
false: AdropNativeAdView가 모든 클릭 이벤트를 자동으로 처리

AdropAdChoicesPosition

기본값:"AdropAdChoicesPosition.topRight"

백필 네이티브 광고의 AdChoices 마크 표시 위치

메서드

메서드	설명
`load()`	광고를 요청하고 로드합니다
`destroy()`	광고 리소스를 해제합니다

프로퍼티

프로퍼티	타입	설명
`isLoaded`	`boolean`	광고 로드 완료 여부 (읽기 전용)
`unitId`	`string`	광고 지면 ID (읽기 전용)
`useCustomClick`	`boolean`	커스텀 클릭 처리 사용 여부 (읽기 전용)
`creativeId`	`string`	광고 소재 ID (읽기 전용)
`txId`	`string`	트랜잭션 ID (읽기 전용)
`campaignId`	`string`	캠페인 ID (읽기 전용)
`isBackfilled`	`boolean`	백필 광고 여부 (읽기 전용)
`isVideoAd`	`boolean`	비디오 광고 여부 (읽기 전용)
`browserTarget`	`BrowserTarget`	브라우저 타겟 설정 (읽기 전용)
`properties`	`AdropNativeProperties`	광고 속성 정보 (읽기 전용)
`listener`	`AdropNativeAdListener`	광고 이벤트 리스너

AdropNativeAdView 컴포넌트

네이티브 광고를 표시할 컨테이너 컴포넌트입니다.

Props

interface Props extends ViewProps {
  nativeAd?: AdropNativeAd
}

AdropNativeAd

표시할 네이티브 광고 인스턴스

사용 예시

<AdropNativeAdView nativeAd={nativeAd} style={styles.adContainer}>
  {/* 광고 요소들 */}
</AdropNativeAdView>

AdropNativeAdView는 광고 컨텍스트를 제공하므로, 모든 광고 요소 뷰들은 이 컴포넌트 내부에 배치해야 합니다.

네이티브 광고 요소 뷰

AdropProfileLogoView

광고주 프로필 로고를 표시하는 이미지 컴포넌트입니다.

<AdropProfileLogoView style={styles.profileLogo} />

Props: Omit<ImageProps, 'source'> (React Native의 Image 컴포넌트 속성, source는 자동으로 설정됩니다)

AdropProfileNameView

광고주 프로필 이름을 표시하는 텍스트 컴포넌트입니다.

<AdropProfileNameView style={styles.profileName} />

Props: TextProps (React Native의 Text 컴포넌트 속성)

AdropHeadLineView

광고 제목을 표시하는 텍스트 컴포넌트입니다.

<AdropHeadLineView style={styles.headline} />

Props: TextProps (React Native의 Text 컴포넌트 속성)

AdropBodyView

광고 본문을 표시하는 텍스트 컴포넌트입니다.

<AdropBodyView style={styles.body} />

Props: TextProps (React Native의 Text 컴포넌트 속성)

AdropMediaView

광고 이미지 또는 동영상을 표시하는 미디어 컴포넌트입니다.

<AdropMediaView style={styles.media} />

Props: ViewProps (React Native의 View 컴포넌트 속성)

네이티브 광고의 영상 크리에이티브는 반드시 properties.creative(HTML 페이로드)를 WebView로 렌더링해야 합니다. properties.asset을 react-native-video 등 자체 플레이어에 직접 전달하면 SDK의 영상 트래킹 파이프라인을 거치지 않게 되어 VTR이 측정되지 않고 onAdVideoStart / onAdVideoEnd 콜백도 호출되지 않습니다. 영상 트래킹과 VTR 섹션을 참고하세요.

AdropCallToActionView

행동 유도 문구(CTA)를 표시하는 텍스트 컴포넌트입니다.

<AdropCallToActionView style={styles.cta} />

Props: TextProps (React Native의 Text 컴포넌트 속성)

AdropAdvertiserView

광고주 이름을 표시하는 텍스트 컴포넌트입니다.

<AdropAdvertiserView style={styles.advertiser} />

Props: TextProps (React Native의 Text 컴포넌트 속성)

AdropIconView

광고 아이콘을 표시하는 이미지 컴포넌트입니다.

<AdropIconView style={styles.icon} />

Props: Omit<ImageProps, 'source'> (React Native의 Image 컴포넌트 속성, source는 자동으로 설정됩니다)

AdropNativeAdListener 인터페이스

광고 이벤트를 처리하는 리스너 인터페이스입니다.

interface AdropNativeAdListener {
  onAdReceived?: (ad: AdropNativeAd) => void
  onAdClicked?: (ad: AdropNativeAd) => void
  onAdImpression?: (ad: AdropNativeAd) => void
  onAdFailedToReceive?: (ad: AdropNativeAd, errorCode?: any) => void
  onAdVideoStart?: (ad: AdropNativeAd) => void
  onAdVideoEnd?: (ad: AdropNativeAd) => void
}

콜백 메서드	설명
`onAdReceived`	광고 수신 성공 시 호출됩니다
`onAdClicked`	광고 클릭 시 호출됩니다
`onAdImpression`	광고 노출 시 호출됩니다
`onAdFailedToReceive`	광고 수신 실패 시 호출됩니다
`onAdVideoStart`	동영상 광고 재생 시작 시 호출됩니다
`onAdVideoEnd`	동영상 광고 재생 종료 시 호출됩니다

AdropNativeProperties 타입

광고 속성 정보를 담는 타입입니다.

type AdropNativeProperties = {
  icon?: string                      // 아이콘 이미지 URL
  cover?: string                     // 커버 이미지 URL
  headline?: string                  // 광고 제목
  body?: string                      // 광고 본문
  creative?: string                  // 광고 소재 HTML (WebView 렌더링용)
  asset?: string                     // 에셋 정보
  destinationURL?: string            // 목적지 URL
  advertiserURL?: string             // 광고주 URL
  accountTag?: string                // 계정 태그
  creativeTag?: string               // 소재 태그
  advertiser?: string                // 광고주 이름
  callToAction?: string              // 행동 유도 문구
  profile?: AdropNativeProfile       // 프로필 정보
  extra?: Record<string, string>     // 추가 정보
  extraAssets?: Record<string, AdropNativeAsset> // 미디어 아이디를 키로 한 미디어 (다중 미디어 소재 참고)
  isBackfilled?: boolean             // 백필 광고 여부
}

AdropNativeProfile 타입

광고주 프로필 정보를 담는 타입입니다.

type AdropNativeProfile = {
  displayName: string                // 프로필 표시 이름
  displayLogo: string                // 프로필 로고 이미지 URL
}

구현 예제

다음은 네이티브 광고를 구현하는 전체 예제입니다.

import React, { useCallback, useEffect, useMemo, useState } from 'react'
import {
  AdropBodyView,
  AdropHeadLineView,
  AdropMediaView,
  AdropNativeAd,
  AdropNativeAdView,
  AdropProfileLogoView,
  AdropProfileNameView,
} from 'adrop-ads-react-native'
import type { AdropNativeAdListener } from 'adrop-ads-react-native'
import { WebView } from 'react-native-webview'
import {
  Button,
  Dimensions,
  ScrollView,
  StyleSheet,
  Text,
  View,
  Linking,
  Platform,
} from 'react-native'

const NativeAdExample: React.FC = () => {
  const [nativeAd, setNativeAd] = useState<AdropNativeAd>()
  const [isLoaded, setIsLoaded] = useState(false)
  const [errorCode, setErrorCode] = useState('')

  // URL 열기 핸들러
  const openUrl = useCallback((url: string) => {
    Linking.openURL(url).catch((err) =>
      console.error('URL 열기 실패:', err)
    )
  }, [])

  // 광고 이벤트 리스너
  const listener = useMemo(
    (): AdropNativeAdListener => ({
      onAdReceived: (ad) => {
        console.log('광고 수신:', ad.unitId, ad.properties)
        setIsLoaded(true)
        setErrorCode('')
      },
      onAdFailedToReceive: (_, error) => {
        console.log('광고 수신 실패:', error)
        setErrorCode(error)
      },
      onAdClicked: (ad) => {
        console.log('광고 클릭:', ad.unitId)
      },
      onAdImpression: (ad) => {
        console.log('광고 노출:', ad.unitId)
      },
    }),
    []
  )

  // 광고 초기화
  const initialize = useCallback(
    (unitId: string) => {
      const adropNativeAd = new AdropNativeAd(unitId)
      adropNativeAd.listener = listener

      setNativeAd((prev) => {
        prev?.destroy()
        return adropNativeAd
      })

      setIsLoaded(false)
      setErrorCode('')
    },
    [listener]
  )

  // 컴포넌트 마운트 시 광고 초기화
  useEffect(() => {
    initialize('YOUR_UNIT_ID')

    // 컴포넌트 언마운트 시 광고 해제
    return () => {
      nativeAd?.destroy()
    }
  }, [])

  // 광고 로드
  const load = () => nativeAd?.load()

  // 광고 뷰 렌더링
  const adView = useMemo(() => {
    if (!isLoaded) return null

    return (
      <AdropNativeAdView
        nativeAd={nativeAd}
        style={{
          ...styles.adContainer,
          width: Dimensions.get('window').width,
        }}
      >
        {/* 프로필 영역 */}
        <View style={styles.rowContainer}>
          <AdropProfileLogoView style={styles.profileLogo} />
          <AdropProfileNameView style={styles.profileName} />
        </View>

        {/* 광고 제목 */}
        <AdropHeadLineView style={styles.headline} />

        {/* 광고 본문 */}
        <AdropBodyView style={styles.body} />

        {/* 백필 광고 또는 비디오가 아닌 광고는 AdropMediaView, 비디오 광고는 WebView */}
        {!nativeAd?.isVideoAd || nativeAd?.isBackfilled ? (
          // 백필 광고 또는 비디오가 아닌 광고: AdropMediaView 사용
          <AdropMediaView style={styles.media} />
        ) : (
          // 비디오 광고: WebView로 렌더링
          <WebView
            source={{
              html: nativeAd?.properties?.creative ?? '',
            }}
            style={styles.media}
            javaScriptEnabled={true}
            mediaPlaybackRequiresUserAction={false}
            allowsInlineMediaPlayback={true}
            scrollEnabled={false}
            onNavigationStateChange={(event) => {
              // Android WebView 이벤트
              if (
                event.url &&
                event.url !== 'about:blank' &&
                !event.url.startsWith('data:')
              ) {
                openUrl(event.url)
              }
            }}
            onOpenWindow={(event) => {
              // iOS WebView 이벤트 (window.open)
              if (event.nativeEvent?.targetUrl) {
                openUrl(event.nativeEvent.targetUrl)
              }
            }}
          />
        )}
      </AdropNativeAdView>
    )
  }, [isLoaded, nativeAd, openUrl])

  return (
    <ScrollView>
      <View style={styles.container}>
        {/* 광고 로드 버튼 */}
        <View style={styles.button}>
          <Button title="광고 로드" onPress={load} />
        </View>

        {/* 광고 뷰 */}
        {adView}

        {/* 에러 표시 */}
        {errorCode && (
          <Text style={styles.error}>
            에러: {errorCode}
          </Text>
        )}
      </View>
    </ScrollView>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    paddingVertical: 5,
    paddingHorizontal: 16,
  },
  button: {
    marginVertical: 8,
  },
  adContainer: {
    paddingHorizontal: 16,
  },
  rowContainer: {
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'center',
    marginBottom: 8,
  },
  profileLogo: {
    width: 32,
    height: 32,
    marginRight: 8,
    borderRadius: 16,
  },
  profileName: {
    fontSize: 14,
    fontWeight: 'bold',
    color: 'black',
  },
  headline: {
    fontSize: 16,
    fontWeight: 'bold',
    color: 'black',
    marginTop: 8,
  },
  body: {
    fontSize: 14,
    color: 'black',
    marginVertical: 8,
  },
  media: {
    width: '100%',
    height: 360,
    marginTop: 8,
  },
  error: {
    color: 'red',
    marginVertical: 8,
  },
})

export default NativeAdExample

테스트 유닛 ID

개발 및 테스트 시 다음 테스트 유닛 ID를 사용하세요.

플랫폼	포맷	테스트 유닛 ID
Android/iOS	네이티브 (이미지)	`PUBLIC_TEST_UNIT_ID_NATIVE`
Android/iOS	네이티브 비디오 (16:9)	`PUBLIC_TEST_UNIT_ID_NATIVE_VIDEO_16_9`
Android/iOS	네이티브 비디오 (9:16)	`PUBLIC_TEST_UNIT_ID_NATIVE_VIDEO_9_16`

프로덕션 배포 전에 반드시 실제 유닛 ID로 교체하세요.

에러 처리

광고 로드 실패 시 onAdFailedToReceive 콜백에서 에러 코드를 받을 수 있습니다.

주요 에러 코드

에러 코드	설명
`AdropErrorCode.network`	네트워크 오류
`AdropErrorCode.internal`	내부 오류
`AdropErrorCode.initialize`	초기화 오류
`AdropErrorCode.invalidUnit`	유효하지 않은 유닛 ID
`AdropErrorCode.adNoFill`	광고 없음
`AdropErrorCode.adLoading`	광고 로딩 중
`AdropErrorCode.backfillNoFill`	백필 광고도 없음

에러 처리 예제

const listener: AdropNativeAdListener = {
  onAdFailedToReceive: (ad, errorCode) => {
    switch (errorCode) {
      case AdropErrorCode.adNoFill:
        console.log('광고 없음 - 광고 영역 숨기기')
        break
      case AdropErrorCode.network:
        console.log('네트워크 오류 - 재시도')
        setTimeout(() => ad.load(), 3000)
        break
      default:
        console.log('광고 로드 실패:', errorCode)
    }
  }
}

모범 사례

1. 리소스 해제

컴포넌트 언마운트 시 반드시 광고 리소스를 해제하세요.

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

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

2. 비디오 광고 및 백필 광고 처리

비디오 광고 여부 및 백필 광고 여부에 따라 적절한 렌더링 방식을 선택하세요.

{!nativeAd?.isVideoAd || nativeAd?.isBackfilled ? (
  <AdropMediaView style={styles.media} />
) : (
  <WebView source={{ html: nativeAd?.properties?.creative ?? '' }} />
)}

3. URL 처리

WebView에서 URL 클릭 시 외부 브라우저로 열리도록 처리하세요.

<WebView
  onNavigationStateChange={(event) => {
    if (event.url && event.url !== 'about:blank') {
      Linking.openURL(event.url)
    }
  }}
/>

4. 광고 요소 선택적 사용

앱의 디자인에 맞게 필요한 광고 요소만 선택적으로 사용하세요.

<AdropNativeAdView nativeAd={nativeAd}>
  {/* 최소 구성: 미디어와 제목만 표시 */}
  <AdropHeadLineView style={styles.headline} />
  <AdropMediaView style={styles.media} />
</AdropNativeAdView>

영상 트래킹과 VTR

Adrop은 네이티브 광고의 영상 지표 — VTR(영상 완수율), onAdVideoStart, onAdVideoEnd — 를 SDK 미디어 컨테이너 안에서 영상이 렌더링될 때에만 수집합니다. React Native에서는 구현 예제 섹션처럼 properties.creative(HTML 페이로드)를 WebView로 렌더링하는 것이 그 방식입니다. 이는 광고의 대표 미디어(미디어 1)에 해당합니다. 다중 미디어 소재의 나머지 미디어는 다중 미디어 소재를 참고하세요. properties.asset 필드는 원본 이미지 또는 영상 파일의 URL을 반환합니다. 이 값은 썸네일 표시나 매체사 자체 분석 등 부가 메타데이터 용도로 노출된 것이며, 재생을 직접 처리하기 위한 것이 아닙니다.

영상 네이티브 광고의 properties.asset URL을 자체 영상 플레이어(react-native-video, expo-av 또는 서드파티 플레이어)에 직접 전달하지 마세요. SDK 미디어 컨테이너를 거치지 않으면 다음 현상이 발생합니다.

해당 지면에서 VTR(영상 완수율)이 수집되지 않습니다.
onAdVideoStart / onAdVideoEnd 콜백이 호출되지 않습니다.
해당 유닛의 영상 성과 집계가 누락되거나 0으로 보고됩니다.

클릭(onAdClicked)과 노출(onAdImpression) 트래킹은 AdropNativeAdView에 연결되어 있으므로 계속 동작하지만, 영상 관련 신호는 손실됩니다.

권장 패턴

영상 크리에이티브는 AdropNativeAdView 내부에 배치한 WebView로 HTML 크리에이티브를 렌더링하세요.

{!nativeAd?.isVideoAd || nativeAd?.isBackfilled ? (
  <AdropMediaView style={styles.media} />
) : (
  <WebView
    source={{ html: nativeAd?.properties?.creative ?? '' }}
    style={styles.media}
    javaScriptEnabled
    mediaPlaybackRequiresUserAction={false}
    allowsInlineMediaPlayback
    scrollEnabled={false}
  />
)}

AdropNativeAd의 isVideoAd와 isBackfilled 플래그를 사용하면 asset URL을 직접 검사하지 않고도 <AdropMediaView />(이미지 또는 백필 크리에이티브)와 <WebView />(다이렉트 영상 크리에이티브)를 분기할 수 있습니다.

특정 지면이 반드시 자체 플레이어를 사용해야 하고 VTR이 측정되지 않는 것을 수용한다면, 광고를 AdropNativeAdView에 바인딩한 채로 유지해 클릭과 노출 어트리뷰션은 계속 확보할 수 있습니다. 다만 해당 지면을 내부 리포트에서 비-VTR 인벤토리로 분류하고 SDK가 측정한 영상 성과와 섞지 마세요.

다중 미디어 소재

adrop-ads-react-native 1.16.0 이상이 필요합니다. 백필을 쓴다면 백필 모듈도 1.16.0으로 올리세요.

네이티브 유닛에 미디어가 2개 이상이면 소재에 미디어마다 파일이 들어 있습니다. properties.extraAssets에는 광고의 모든 미디어가 들어 있으며, 키는 콘솔에서 정한 미디어 아이디입니다. 미디어 1은 항상 m1이고, 나머지 미디어는 광고 유닛 상세 화면의 미디어 크기에 표시된 아이디(예: m2, m3)를 씁니다.

const media2 = nativeAd.properties.extraAssets?.m2 // AdropNativeAsset | undefined

미디어 1(m1)은 properties.asset, properties.creative와 같은 미디어입니다. 지금처럼 표시하고, 나머지 미디어만 직접 그리세요.
미디어가 하나인 유닛의 소재와 백필 광고에서는 extraAssets가 비어 있습니다. 이런 광고는 평소처럼 표시하세요.
미디어는 순서에 기대지 말고 아이디로 찾으세요.
광고가 다크 모드로 송출되면 이미지 미디어도 다크 모드용 이미지로 제공됩니다.
다중 미디어 소재로 레이아웃을 확인하려면 테스트 기기에서 소재를 미리 보세요.

AdropNativeAsset 타입

interface AdropNativeAsset {
  id: string                         // 콘솔에서 정한 미디어 아이디 (예: 'm1', 'm2')
  asset: string                      // 이미지 또는 동영상 파일 URL
  creative: string                   // 동영상 미디어를 재생하는 HTML (트래킹 포함)
  cover?: string                     // 동영상의 포스터 이미지 URL. 이미지면 없음
  type?: 'display' | 'video'         // 이미지 또는 동영상
  isVideo: boolean                   // 동영상인지 여부
}

미디어 표시하기

미디어	표시 방법	위치
이미지	`asset`을 `Image`로 표시	`AdropNativeAdView` 안
동영상	`creative`를 `WebView`에 로드	`AdropNativeAdView` 밖 (예: 바로 아래)

이미지: useCustomClick 설정과 관계없이 AdropNativeAdView 안의 탭은 광고 클릭이므로, 그 안에 둔 이미지의 탭도 광고의 다른 부분과 똑같이 집계됩니다. 이미지의 creative HTML은 클릭을 Adrop에 보고하지 않으므로 로드하지 마세요.
동영상: asset URL이 아니라 creative HTML을 재생하세요. HTML에 동영상 플레이어와 트래킹이 들어 있어, 동영상 지표는 이 HTML로만 측정됩니다. WebView는 AdropNativeAdView 밖에 두세요. 안에 두면 플레이어 컨트롤을 누른 것을 포함해 동영상 탭이 광고 클릭으로도 집계될 수 있습니다. HTML은 미리 로드하지 말고 광고가 화면에 나타나기 직전에 로드하세요.
랜딩 페이지: 사용자가 동영상을 탭하면 HTML이 클릭을 보고하고, 랜딩 페이지를 새 창이나 같은 창으로 열어 달라고 요청합니다. 요청된 URL을 onOpenWindow와 onShouldStartLoadWithRequest에서 여세요.

노출과 클릭

노출, 클릭, 동영상 지표는 SDK와 미디어가 모두 보고해도 미디어별이 아니라 광고당 한 번만 집계됩니다.

이벤트	집계 방식
노출	`AdropNativeAdView`가 50% 이상 보이는 상태로 0.5초 유지될 때. 동영상 미디어도 동영상 재생이 시작되면 광고 노출을 보고합니다.
`AdropNativeAdView` 안 클릭	SDK가 집계하고 `onAdClicked`가 호출됩니다.
동영상 미디어 탭	미디어의 HTML이 보고합니다. `onAdClicked`는 호출되지 않습니다.
동영상 재생 (유효 시청수, 시청 완료수)	미디어의 HTML이 보고합니다. `onAdVideoStart`와 `onAdVideoEnd`는 호출되지 않습니다.

동영상의 어떤 탭이 클릭으로 집계되는지는 유닛의 영상 컨트롤러 설정에 따라 다릅니다. 컨트롤러가 꺼져 있으면 동영상의 모든 탭이 클릭으로 집계되고, 켜져 있으면 재생·음소거 컨트롤을 누른 것은 클릭으로 집계되지 않습니다.

예제

미디어 2(m2)가 이미지면 AdropNativeAdView 안에, 동영상이면 바로 아래에 표시하는 예제입니다. m2는 유닛의 미디어 아이디로 바꾸세요.

import React, { useEffect, useState } from 'react'
import { Image, Linking, StyleSheet, View } from 'react-native'
import { WebView } from 'react-native-webview'
import {
    AdropCallToActionView,
    AdropHeadLineView,
    AdropMediaView,
    AdropNativeAd,
    AdropNativeAdView,
    type AdropNativeAsset,
} from 'adrop-ads-react-native'

// 동영상 미디어를 재생합니다. AdropNativeAdView 밖에 둡니다.
const MediaItemVideo: React.FC<{ item: AdropNativeAsset }> = ({ item }) => (
    <WebView
        source={{ html: item.creative }}
        style={styles.media}
        javaScriptEnabled
        allowsInlineMediaPlayback
        mediaPlaybackRequiresUserAction={false}
        scrollEnabled={false}
        // 동영상 탭: HTML이 클릭을 보고한 뒤 랜딩 페이지를 열어 달라고 요청
        onOpenWindow={(event) => Linking.openURL(event.nativeEvent.targetUrl)}
        onShouldStartLoadWithRequest={(request) => {
            // HTML 자체(about:blank)와 그 안의 프레임은 그대로 로드.
            // isTopFrame은 iOS에서만 전달됨
            if (request.url === 'about:blank' || request.isTopFrame === false) {
                return true
            }
            Linking.openURL(request.url)
            return false
        }}
    />
)

const MultiMediaNativeAd: React.FC = () => {
    const [nativeAd, setNativeAd] = useState<AdropNativeAd>()
    const [isLoaded, setIsLoaded] = useState(false)

    useEffect(() => {
        const ad = new AdropNativeAd('YOUR_UNIT_ID')
        ad.listener = {
            onAdReceived: () => setIsLoaded(true),
            onAdFailedToReceive: (_, errorCode) => console.log(errorCode),
        }
        ad.load()
        setNativeAd(ad)
        return () => ad.destroy()
    }, [])

    if (!isLoaded || !nativeAd) return null

    // 미디어 2(m2). 미디어가 하나인 소재와 백필 광고에는 없음
    const media2 = nativeAd.properties.extraAssets?.m2

    return (
        <View>
            <AdropNativeAdView nativeAd={nativeAd} style={styles.adView}>
                <AdropHeadLineView style={styles.headline} />
                {/* 미디어 1(m1)은 일반 네이티브 광고와 같게 */}
                {!nativeAd.isVideoAd || nativeAd.isBackfilled ? (
                    <AdropMediaView style={styles.media} />
                ) : (
                    <WebView
                        source={{ html: nativeAd.properties.creative ?? '' }}
                        style={styles.media}
                        javaScriptEnabled
                        mediaPlaybackRequiresUserAction={false}
                        allowsInlineMediaPlayback
                        scrollEnabled={false}
                    />
                )}
                {/* 미디어 2(m2)가 이미지일 때: AdropNativeAdView 안 */}
                {media2 && !media2.isVideo && (
                    <Image source={{ uri: media2.asset }} style={styles.thumbnail} />
                )}
                <AdropCallToActionView style={styles.cta} />
            </AdropNativeAdView>

            {/* 미디어 2(m2)가 동영상일 때: AdropNativeAdView 밖 */}
            {media2?.isVideo && <MediaItemVideo item={media2} />}
        </View>
    )
}

const styles = StyleSheet.create({
    adView: { padding: 16 },
    headline: { fontSize: 18, fontWeight: 'bold' },
    media: { width: '100%', height: 200 },
    thumbnail: { width: 120, height: 120, marginTop: 12 },
    cta: { marginTop: 12 },
})

export default MultiMediaNativeAd

AdChoices 위치 조정

백필 네이티브 광고에서 AdChoices 마크가 표시될 코너를 지정할 수 있습니다. AdropNativeAd 생성자의 세 번째 인자로 preferredAdChoicesPosition을 전달하세요.

import { AdropNativeAd, AdropAdChoicesPosition } from 'adrop-ads-react-native'

const nativeAd = new AdropNativeAd(
  'YOUR_UNIT_ID',
  false, // useCustomClick
  AdropAdChoicesPosition.bottomRight
)

nativeAd.listener = {
  onAdReceived: (ad) => console.log('수신 완료'),
  onAdFailedToReceive: (ad, errorCode) => console.log('실패', errorCode),
}

nativeAd.load()

값	설명
`AdropAdChoicesPosition.topLeft`	좌측 상단
`AdropAdChoicesPosition.topRight`	우측 상단 (기본값)
`AdropAdChoicesPosition.bottomLeft`	좌측 하단
`AdropAdChoicesPosition.bottomRight`	우측 하단

이 설정은 백필 네트워크에 전달되는 선호 위치 힌트로, 백필 네이티브 광고에만 적용됩니다 — 직광고에는 영향이 없습니다. 백필 네트워크가 정책상 다른 위치로 표시할 수 있습니다.

다음 단계

배너 광고

배너 광고 구현하기

전면 광고

전면 광고 구현하기

팝업 광고

팝업 광고 구현하기

보상형 광고

보상형 광고 구현하기

​개요

​주요 기능

​AdropNativeAd 클래스

​생성자

​메서드

​프로퍼티

​AdropNativeAdView 컴포넌트

​Props

​사용 예시

​네이티브 광고 요소 뷰

​AdropProfileLogoView

​AdropProfileNameView

​AdropHeadLineView

​AdropBodyView

​AdropMediaView

​AdropCallToActionView

​AdropAdvertiserView

​AdropIconView

​AdropNativeAdListener 인터페이스

​AdropNativeProperties 타입

​AdropNativeProfile 타입

​구현 예제

​테스트 유닛 ID

​에러 처리

​주요 에러 코드

​에러 처리 예제

​모범 사례

​1. 리소스 해제

​2. 비디오 광고 및 백필 광고 처리

​3. URL 처리

​4. 광고 요소 선택적 사용

​영상 트래킹과 VTR

​권장 패턴

​다중 미디어 소재

​AdropNativeAsset 타입

​미디어 표시하기

​노출과 클릭

​예제

​AdChoices 위치 조정

​다음 단계

배너 광고

전면 광고

팝업 광고

보상형 광고

개요

주요 기능

AdropNativeAd 클래스

생성자

메서드

프로퍼티

AdropNativeAdView 컴포넌트

Props

사용 예시

네이티브 광고 요소 뷰

AdropProfileLogoView

AdropProfileNameView

AdropHeadLineView

AdropBodyView

AdropMediaView

AdropCallToActionView

AdropAdvertiserView

AdropIconView

AdropNativeAdListener 인터페이스

AdropNativeProperties 타입

AdropNativeProfile 타입

구현 예제

테스트 유닛 ID

에러 처리

주요 에러 코드

에러 처리 예제

모범 사례

1. 리소스 해제

2. 비디오 광고 및 백필 광고 처리

3. URL 처리

4. 광고 요소 선택적 사용

영상 트래킹과 VTR

권장 패턴

다중 미디어 소재

AdropNativeAsset 타입

미디어 표시하기

노출과 클릭

예제

AdChoices 위치 조정

다음 단계