배너 광고 - Ad Control Help Center

개요

배너 광고는 화면의 일부 영역에 표시되는 직사각형 광고입니다. AdropBanner 컴포넌트를 사용하여 손쉽게 구현할 수 있습니다.

주요 특징

화면 상단, 하단 또는 중간에 고정 배치 가능
이미지 및 동영상 광고 지원
자동 또는 수동 광고 로드 지원
콜백을 통한 광고 이벤트 처리
광고 메타데이터 제공 (크리에이티브 ID, 캠페인 ID 등)

개발 환경에서는 테스트 유닛 ID를 사용하세요: PUBLIC_TEST_UNIT_ID_320_100 또는 PUBLIC_TEST_UNIT_ID_320_50

AdropBanner 컴포넌트

Props

string

필수

애드컨트롤 콘솔에서 생성한 유닛 ID

ViewStyle

필수

배너의 스타일 (width와 height 필수)

string

문맥 타겟팅에 사용할 컨텍스트 ID (1.17.0+). 마운트할 때의 값만 적용됩니다. 값을 바꾸려면 key를 변경해 배너를 다시 마운트하세요.

boolean

기본값:"true"

컴포넌트가 마운트될 때 자동으로 광고를 로드할지 여부

boolean

기본값:"false"

커스텀 클릭 처리를 사용할지 여부. true로 설정하면 광고 클릭 시 자동으로 브라우저가 열리지 않습니다.

{ width: number; height: number } | null

서버에 요청할 명시적 광고 크기. style.width가 숫자이면 스타일 크기에서 자동으로 adSize가 파생됩니다({ width: style.width, height: style.height }). style.width가 문자열(예: '100%')이면 adSize는 기본적으로 null이 되며 SDK가 반응형 크기 조정을 사용합니다. 일반적으로 이 prop을 수동으로 설정할 필요가 없습니다.

(unitId: string, metadata?: AdropBannerMetadata) => void

광고 수신이 성공했을 때 호출되는 콜백

(unitId: string, metadata?: AdropBannerMetadata) => void

사용자가 광고를 클릭했을 때 호출되는 콜백

(unitId: string, metadata?: AdropBannerMetadata) => void

광고가 화면에 노출되었을 때 호출되는 콜백

(unitId: string, errorCode?: string) => void

광고 수신이 실패했을 때 호출되는 콜백

(unitId: string) => void

동영상 광고 재생이 시작되었을 때 호출되는 콜백

(unitId: string) => void

동영상 광고 재생이 종료되었을 때 호출되는 콜백

기본 사용법

자동 로드 (권장)

컴포넌트가 마운트될 때 자동으로 광고를 로드합니다.

import React from 'react'
import { View, StyleSheet, Dimensions } from 'react-native'
import { AdropBanner } from 'adrop-ads-react-native'

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

  return (
    <View style={styles.container}>
      {/* 메인 콘텐츠 */}
      <View style={styles.content}>
        {/* ... */}
      </View>

      {/* 배너 광고 */}
      <AdropBanner
        unitId="YOUR_UNIT_ID"
        style={{ width: screenWidth, height: 80 }}
        onAdReceived={(unitId, metadata) => {
          console.log('배너 광고 수신 성공', unitId, metadata)
        }}
        onAdFailedToReceive={(unitId, errorCode) => {
          console.log('배너 광고 수신 실패', unitId, errorCode)
        }}
      />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  content: {
    flex: 1,
  },
})

export default App

Ref를 사용한 수동 로드

ref를 사용하여 원하는 시점에 광고를 로드할 수 있습니다.

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

interface AdropBannerRef {
  load: () => void
}

const App = () => {
  const bannerRef = useRef<AdropBannerRef>(null)
  const screenWidth = Dimensions.get('window').width

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

  return (
    <View style={styles.container}>
      <Button title="배너 광고 로드" onPress={loadBanner} />

      <AdropBanner
        ref={bannerRef}
        unitId="YOUR_UNIT_ID"
        style={{ width: screenWidth, height: 80 }}
        autoLoad={false}
        onAdReceived={(unitId, metadata) => {
          console.log('배너 광고 수신 성공', unitId, metadata)
        }}
        onAdFailedToReceive={(unitId, errorCode) => {
          console.log('배너 광고 수신 실패', unitId, errorCode)
        }}
      />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
})

export default App

콜백 함수

onAdReceived

광고 수신이 성공했을 때 호출됩니다.

const handleAdReceived = (unitId: string, metadata?: AdropBannerMetadata) => {
  console.log('배너 광고 수신 성공')
  console.log('유닛 ID:', unitId)
  console.log('크리에이티브 ID:', metadata?.creativeId)
  console.log('캠페인 ID:', metadata?.campaignId)
  console.log('트랜잭션 ID:', metadata?.txId)
  console.log('목적지 URL:', metadata?.destinationURL)

  // 로딩 인디케이터 숨기기 등의 처리
}

onAdClicked

사용자가 광고를 클릭했을 때 호출됩니다.

const handleAdClicked = (unitId: string, metadata?: AdropBannerMetadata) => {
  console.log('배너 광고 클릭')
  console.log('유닛 ID:', unitId)
  console.log('목적지 URL:', metadata?.destinationURL)

  // 클릭 분석 로깅 등의 처리
}

onAdImpression

광고가 화면에 노출되었을 때 호출됩니다.

const handleAdImpression = (unitId: string, metadata?: AdropBannerMetadata) => {
  console.log('배너 광고 노출')
  console.log('유닛 ID:', unitId)
  console.log('크리에이티브 ID:', metadata?.creativeId)

  // 노출 분석 로깅 등의 처리
}

onAdFailedToReceive

광고 수신이 실패했을 때 호출됩니다.

const handleAdFailedToReceive = (unitId: string, errorCode?: string) => {
  console.log('배너 광고 수신 실패')
  console.log('유닛 ID:', unitId)
  console.log('에러 코드:', errorCode)

  // 에러 처리 및 대체 콘텐츠 표시
  if (errorCode === AdropErrorCode.network) {
    console.log('네트워크 연결을 확인하세요')
  } else if (errorCode === AdropErrorCode.adNoFill) {
    console.log('노출 가능한 광고가 없습니다')
  }
}

onAdVideoStart

동영상 광고 재생이 시작되었을 때 호출됩니다.

const handleAdVideoStart = (unitId: string) => {
  console.log('동영상 광고 재생 시작')
  console.log('유닛 ID:', unitId)
}

onAdVideoEnd

동영상 광고 재생이 종료되었을 때 호출됩니다.

const handleAdVideoEnd = (unitId: string) => {
  console.log('동영상 광고 재생 종료')
  console.log('유닛 ID:', unitId)
}

AdropBannerMetadata

광고 메타데이터 타입입니다.

type AdropBannerMetadata = {
  creativeId: string      // 크리에이티브 ID
  txId: string           // 트랜잭션 ID
  campaignId: string     // 캠페인 ID
  destinationURL: string // 목적지 URL
  browserTarget: BrowserTarget // 브라우저 타겟 (EXTERNAL = 0, INTERNAL = 1)
}

이 정보는 광고 분석, 추적, 리포팅에 유용하게 사용할 수 있습니다.

광고 크기

배너 광고는 유닛에 설정한 크기에 맞춰 스타일의 크기를 지정해야 합니다.

일반적인 배너 크기

크기	용도
320 x 50	소형 배너
320 x 100	중형 배너
16:9 비율	동영상 배너

고정 크기 사용

<AdropBanner
  unitId="YOUR_UNIT_ID"
  style={{ width: 320, height: 100 }}
/>

화면 너비에 맞추기

import { Dimensions } from 'react-native'

const screenWidth = Dimensions.get('window').width

<AdropBanner
  unitId="YOUR_UNIT_ID"
  style={{ width: screenWidth, height: 80 }}
/>

반응형 크기 사용

<AdropBanner
  unitId="YOUR_UNIT_ID"
  style={{ width: '100%', height: 80 }}
/>

width를 문자열('100%' 등)로 설정하면 반응형으로 동작하지만, 숫자로 설정하면 해당 값이 광고 서버에 전달되어 적절한 크기의 광고를 요청합니다.

테스트 유닛 ID

개발 및 테스트 시 아래의 테스트 유닛 ID를 사용하세요.

광고 유형	테스트 유닛 ID	크기
배너 (320x50)	`PUBLIC_TEST_UNIT_ID_320_50`	320 x 50
배너 (320x100)	`PUBLIC_TEST_UNIT_ID_320_100`	320 x 100

사용 예시

<AdropBanner
  unitId="PUBLIC_TEST_UNIT_ID_320_100"
  style={{ width: 320, height: 100 }}
/>

에러 처리

광고 로드 실패 시 적절한 에러 처리를 구현하세요.

에러 상태 관리

import React, { useState } from 'react'
import { View, Text, StyleSheet } from 'react-native'
import { AdropBanner } from 'adrop-ads-react-native'

const App = () => {
  const [error, setError] = useState<string | null>(null)

  const handleAdReceived = () => {
    setError(null)
  }

  const handleAdFailedToReceive = (unitId: string, errorCode?: string) => {
    setError(errorCode || '알 수 없는 오류')
  }

  return (
    <View style={styles.container}>
      <AdropBanner
        unitId="YOUR_UNIT_ID"
        style={{ width: 320, height: 100 }}
        onAdReceived={handleAdReceived}
        onAdFailedToReceive={handleAdFailedToReceive}
      />

      {error && (
        <Text style={styles.errorText}>
          광고 로드 실패: {error}
        </Text>
      )}
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  errorText: {
    marginTop: 8,
    color: 'red',
  },
})

export default App

모범 사례

1. 화면 가시성

배너가 화면에 보일 때 광고를 로드하세요.

import React, { useEffect, useRef } from 'react'
import { AppState } from 'react-native'

const App = () => {
  const bannerRef = useRef<{ load: () => void }>(null)
  const appState = useRef(AppState.currentState)

  useEffect(() => {
    const subscription = AppState.addEventListener('change', nextAppState => {
      if (
        appState.current.match(/inactive|background/) &&
        nextAppState === 'active'
      ) {
        // 앱이 포그라운드로 돌아왔을 때 광고 새로고침
        bannerRef.current?.load()
      }
      appState.current = nextAppState
    })

    return () => {
      subscription.remove()
    }
  }, [])

  return (
    <AdropBanner
      ref={bannerRef}
      unitId="YOUR_UNIT_ID"
      style={{ width: 320, height: 100 }}
    />
  )
}

2. 로딩 인디케이터

광고 로딩 중 사용자 경험을 개선하세요.

import React, { useState } from 'react'
import { View, ActivityIndicator, StyleSheet } from 'react-native'
import { AdropBanner } from 'adrop-ads-react-native'

const App = () => {
  const [loading, setLoading] = useState(true)

  return (
    <View style={styles.container}>
      {loading && (
        <ActivityIndicator
          style={styles.loader}
          size="small"
          color="#999"
        />
      )}

      <AdropBanner
        unitId="YOUR_UNIT_ID"
        style={{ width: 320, height: 100 }}
        onAdReceived={() => setLoading(false)}
        onAdFailedToReceive={() => setLoading(false)}
      />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    position: 'relative',
  },
  loader: {
    position: 'absolute',
    top: '50%',
    left: '50%',
    transform: [{ translateX: -12 }, { translateY: -12 }],
  },
})

3. 다중 배너 관리

여러 배너를 사용할 때는 각각의 상태를 관리하세요.

import React, { useState } from 'react'
import { View, Text } from 'react-native'
import { AdropBanner } from 'adrop-ads-react-native'

const App = () => {
  const [banner1Loaded, setBanner1Loaded] = useState(false)
  const [banner2Loaded, setBanner2Loaded] = useState(false)

  return (
    <View>
      <Text>배너 1: {banner1Loaded ? '로드됨' : '로딩 중'}</Text>
      <AdropBanner
        unitId="UNIT_ID_1"
        style={{ width: 320, height: 100 }}
        onAdReceived={() => setBanner1Loaded(true)}
      />

      <Text>배너 2: {banner2Loaded ? '로드됨' : '로딩 중'}</Text>
      <AdropBanner
        unitId="UNIT_ID_2"
        style={{ width: 320, height: 100 }}
        onAdReceived={() => setBanner2Loaded(true)}
      />
    </View>
  )
}

4. 커스텀 클릭 처리

광고 클릭을 직접 처리하려면 useCustomClick을 사용하세요.

import { Linking } from 'react-native'
import { AdropBanner, type AdropBannerMetadata } from 'adrop-ads-react-native'

const App = () => {
  const handleAdClicked = (unitId: string, metadata?: AdropBannerMetadata) => {
    console.log('광고 클릭됨:', unitId)

    // 커스텀 분석 로깅
    analytics.logEvent('ad_clicked', {
      unitId,
      campaignId: metadata?.campaignId,
    })

    // 수동으로 브라우저 열기
    if (metadata?.destinationURL) {
      Linking.openURL(metadata.destinationURL)
    }
  }

  return (
    <AdropBanner
      unitId="YOUR_UNIT_ID"
      style={{ width: 320, height: 100 }}
      useCustomClick={true}
      onAdClicked={handleAdClicked}
    />
  )
}

전체 예제

TypeScript 예제

import React, { useRef, useState } from 'react'
import {
  View,
  Text,
  Button,
  StyleSheet,
  Dimensions,
  ActivityIndicator,
} from 'react-native'
import { AdropBanner, type AdropBannerMetadata } from 'adrop-ads-react-native'

interface AdropBannerRef {
  load: () => void
}

const BannerExample = () => {
  const bannerRef = useRef<AdropBannerRef>(null)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [metadata, setMetadata] = useState<AdropBannerMetadata | null>(null)

  const screenWidth = Dimensions.get('window').width

  const loadBanner = () => {
    setLoading(true)
    setError(null)
    bannerRef.current?.load()
  }

  const handleAdReceived = (unitId: string, metadata?: AdropBannerMetadata) => {
    console.log('✅ 배너 광고 수신 성공')
    console.log('유닛 ID:', unitId)
    console.log('메타데이터:', metadata)

    setLoading(false)
    setError(null)
    if (metadata) {
      setMetadata(metadata)
    }
  }

  const handleAdClicked = (unitId: string, metadata?: AdropBannerMetadata) => {
    console.log('👆 배너 광고 클릭')
    console.log('유닛 ID:', unitId)
    console.log('목적지 URL:', metadata?.destinationURL)
  }

  const handleAdImpression = (unitId: string, metadata?: AdropBannerMetadata) => {
    console.log('👁️ 배너 광고 노출')
    console.log('유닛 ID:', unitId)
    console.log('크리에이티브 ID:', metadata?.creativeId)
  }

  const handleAdFailedToReceive = (unitId: string, errorCode?: string) => {
    console.log('❌ 배너 광고 수신 실패')
    console.log('유닛 ID:', unitId)
    console.log('에러 코드:', errorCode)

    setLoading(false)
    setError(errorCode || '알 수 없는 오류')
  }

  return (
    <View style={styles.container}>
      <Text style={styles.title}>배너 광고 예제</Text>

      <Button title="배너 광고 로드" onPress={loadBanner} />

      <View style={styles.bannerContainer}>
        {loading && (
          <ActivityIndicator
            style={styles.loader}
            size="small"
            color="#666"
          />
        )}

        <AdropBanner
          ref={bannerRef}
          unitId="YOUR_UNIT_ID"
          style={{ width: screenWidth, height: 80 }}
          autoLoad={false}
          onAdReceived={handleAdReceived}
          onAdClicked={handleAdClicked}
          onAdImpression={handleAdImpression}
          onAdFailedToReceive={handleAdFailedToReceive}
        />

        {error && (
          <View style={styles.errorContainer}>
            <Text style={styles.errorText}>에러: {error}</Text>
          </View>
        )}

        {metadata && (
          <View style={styles.metadataContainer}>
            <Text style={styles.metadataTitle}>광고 메타데이터:</Text>
            <Text style={styles.metadataText}>
              크리에이티브 ID: {metadata.creativeId}
            </Text>
            <Text style={styles.metadataText}>
              캠페인 ID: {metadata.campaignId}
            </Text>
            <Text style={styles.metadataText}>
              트랜잭션 ID: {metadata.txId}
            </Text>
          </View>
        )}
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    marginVertical: 50,
    paddingHorizontal: 16,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  bannerContainer: {
    marginTop: 20,
    position: 'relative',
    width: '100%',
  },
  loader: {
    position: 'absolute',
    top: 40,
    left: '50%',
    transform: [{ translateX: -12 }],
    zIndex: 1,
  },
  errorContainer: {
    marginTop: 8,
    padding: 8,
    backgroundColor: '#ffebee',
    borderRadius: 4,
  },
  errorText: {
    color: '#c62828',
    textAlign: 'center',
  },
  metadataContainer: {
    marginTop: 12,
    padding: 12,
    backgroundColor: '#f5f5f5',
    borderRadius: 4,
  },
  metadataTitle: {
    fontSize: 14,
    fontWeight: 'bold',
    marginBottom: 4,
  },
  metadataText: {
    fontSize: 12,
    color: '#666',
    marginTop: 2,
  },
})

export default BannerExample

JavaScript 예제

import React, { useRef, useState } from 'react'
import {
  View,
  Text,
  Button,
  StyleSheet,
  Dimensions,
  ActivityIndicator,
} from 'react-native'
import { AdropBanner } from 'adrop-ads-react-native'

const BannerExample = () => {
  const bannerRef = useRef(null)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState(null)

  const screenWidth = Dimensions.get('window').width

  const loadBanner = () => {
    setLoading(true)
    setError(null)
    bannerRef.current?.load()
  }

  const handleAdReceived = (unitId, metadata) => {
    console.log('배너 광고 수신 성공', unitId, metadata)
    setLoading(false)
    setError(null)
  }

  const handleAdFailedToReceive = (unitId, errorCode) => {
    console.log('배너 광고 수신 실패', unitId, errorCode)
    setLoading(false)
    setError(errorCode || '알 수 없는 오류')
  }

  return (
    <View style={styles.container}>
      <Text style={styles.title}>배너 광고 예제</Text>

      <Button title="배너 광고 로드" onPress={loadBanner} />

      <View style={styles.bannerContainer}>
        {loading && <ActivityIndicator style={styles.loader} />}

        <AdropBanner
          ref={bannerRef}
          unitId="YOUR_UNIT_ID"
          style={{ width: screenWidth, height: 80 }}
          autoLoad={false}
          onAdReceived={handleAdReceived}
          onAdFailedToReceive={handleAdFailedToReceive}
        />

        {error && (
          <Text style={styles.errorText}>에러: {error}</Text>
        )}
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    marginVertical: 50,
    paddingHorizontal: 16,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  bannerContainer: {
    marginTop: 20,
    width: '100%',
  },
  loader: {
    marginVertical: 20,
  },
  errorText: {
    marginTop: 8,
    color: 'red',
    textAlign: 'center',
  },
})

export default BannerExample

백필 광고

백필 광고를 사용하려면 네이티브 플랫폼(Android/iOS)에 백필 의존성이 추가되어 있어야 합니다.

백필 광고가 활성화되면 직광고를 사용할 수 없을 때 SDK가 자동으로 백필 광고로 폴백합니다. onAdFailedToReceive 콜백에서 백필 관련 에러 코드를 처리할 수 있습니다.

<AdropBanner
  unitId="YOUR_UNIT_ID"
  onAdReceived={(unitId, metadata) => {
    console.log('광고 로드됨:', metadata?.creativeId)
  }}
  onAdFailedToReceive={(unitId, errorCode) => {
    switch (errorCode) {
      case AdropErrorCode.adNoFill:
        console.log('직광고 없음, 백필 광고 요청 중...')
        break
      case AdropErrorCode.backfillNoFill:
        console.log('백필 광고도 없습니다')
        break
      default:
        console.log('광고 로드 실패:', errorCode)
    }
  }}
/>

백필 광고 미리 로드 (preload)

SDK 1.17.0부터 AdropBanner.preload()로 백필 배너 광고를 미리 받아 둘 수 있습니다. 같은 유닛 ID와 같은 크기로 로드한 <AdropBanner>가 직광고 없이 백필 광고로 넘어가면, 백필 광고를 다시 요청하지 않고 미리 받아 둔 광고를 바로 표시합니다. 배너는 preload와 관계없이 직광고를 먼저 요청합니다. 직광고가 표시되면 미리 받아 둔 광고는 그대로 남습니다. preload를 호출하지 않으면 동작은 이전과 같습니다.

동작 조건

adrop-ads-react-native 1.17.0 이상과, 네이티브 플랫폼의 백필 의존성 1.17.0 이상이 필요합니다. 시작하기를 참고하세요.
서버가 앱에 지금 노출할 직광고가 없다고 알려 준 상태에서만 백필 광고를 받습니다. 그 밖에는 백필 광고를 요청하지 않고 AdropErrorCode.preloadSkipped로 끝납니다. 직광고 캠페인이 있는 앱에서는 정상적인 결과입니다.
앱 설치 직후, 앱 키를 바꾼 직후, setUID로 다른 사용자로 바꾼 직후에는 서버 응답을 받기 전까지 AdropErrorCode.preloadSkipped로 끝납니다.
테스트 유닛 ID로는 항상 AdropErrorCode.preloadSkipped로 끝납니다.

사용 방법

배너가 있는 화면을 띄우기 직전에 호출하세요. 미리 받은 광고는 쓰이지 않으면 30분 뒤 폐기되므로 곧 표시할 배너에만 호출하세요. 결과를 기다렸다가 배너를 로드할 필요는 없습니다. 아직 받는 중이면 배너가 그 결과를 기다려 사용합니다. AdropBanner.preload()는 미리 받기에 성공하면 resolve되고, 그 밖의 결과(AdropErrorCode.preloadSkipped 포함)는 { code, message }로 reject됩니다. 처리하지 않으면 정상 결과인 SKIPPED도 처리되지 않은 Promise rejection 경고가 발생하므로, try/catch로 감싸거나 .catch를 붙이세요.

import { AdropBanner, AdropErrorCode } from 'adrop-ads-react-native'

// 배너가 있는 화면을 띄우기 직전에 호출합니다.
const preloadFeedBanner = async () => {
  try {
    await AdropBanner.preload({
      unitId: 'YOUR_UNIT_ID',
      adSize: { width: 320, height: 50 }, // 생략하면 320x50
    })
    console.log('미리 로드 완료')
  } catch (error: any) {
    if (error?.code === AdropErrorCode.preloadSkipped) {
      // 정상 결과입니다. 다음 화면을 띄우기 직전에 다시 호출하세요.
      return
    }
    // 여기서 preload를 바로 다시 호출하지 마세요.
    console.log('미리 로드 안 됨:', error?.code)
  }
}

결과가 필요 없으면 다음처럼 호출할 수 있습니다.

AdropBanner.preload({ unitId: 'YOUR_UNIT_ID', adSize: { width: 320, height: 50 } }).catch(() => {})

미리 받아 둔 광고를 쓰려면 <AdropBanner>의 style에 preload의 adSize와 같은 width·height를 숫자로 지정하세요.

<AdropBanner
  unitId="YOUR_UNIT_ID"
  style={{ width: 320, height: 50 }} // preload에 넘긴 크기
/>

미리 받은 광고가 쓰이는 조건

같은 유닛 ID와 같은 크기: <AdropBanner>의 style에 숫자로 지정한 width·height가 preload의 adSize와 같아야 합니다. width: '100%'처럼 숫자가 아닌 크기를 쓰는 배너는 크기가 맞지 않아 미리 받은 광고가 쓰이지 않을 수 있습니다. 크기가 다르면 미리 받은 광고는 그대로 남고, 배너는 평소처럼 백필 광고를 요청합니다.
한 번만 사용: 미리 받은 광고는 배너 로드 한 번에 쓰이면 없어집니다. 다시 미리 받으려면 preload를 다시 호출하세요.
유효 시간과 개수: 30분 안에 쓰이지 않은 광고는 폐기됩니다. 같은 유닛·크기에는 1개만 보관하고, 배너는 서로 다른 유닛·크기 조합을 최대 5개까지 보관합니다. 5개를 넘으면 가장 먼저 받은 광고부터 폐기합니다.
다시 호출할 때: 같은 유닛·크기로 다시 호출해도 새로 요청하지 않습니다. 받아 둔 광고가 있으면 새 요청 없이 resolve되고, 받는 중이면 그 로드의 결과(성공 또는 실패)가 똑같이 전달됩니다. 광고를 새로 고치는 용도로는 쓸 수 없습니다. 단, 그 사이 사용자 동의 상태가 바뀌었으면 기존 광고를 버리고 새로 받습니다.
동의 상태 변경: 미리 받은 뒤 사용자 동의 상태가 바뀌면 그 광고는 배너 로드에 쓰이지 않습니다.
resolve의 의미: preload()가 resolve되었다는 것은 미리 받기가 끝났다는 뜻입니다. 그 결과를 기다리던 배너가 이미 사용했을 수도 있습니다.

실패 코드

에러 코드	값	설명
`AdropErrorCode.preloadSkipped`	`ERROR_CODE_AD_PRELOAD_SKIPPED`	직광고가 노출될 수 있거나 아직 확인되지 않아 백필 광고를 요청하지 않았습니다. 정상 결과이므로 다음 화면을 띄우기 직전에 다시 호출하세요.
`AdropErrorCode.adNoFill`	`ERROR_CODE_AD_NO_FILL`	1.17.0 이상의 백필 의존성이 없거나, 유닛에 백필이 설정되지 않았거나 SDK가 그 설정을 아직 받지 못했습니다. 잠시 뒤 다시 호출하세요. 백필 의존성이 없으면 계속 이 코드로 끝납니다. iOS에서는 기기가 대상 국가에 속하지 않을 때도 이 코드로 끝납니다.
`AdropErrorCode.backfillNoFill`	`ERROR_CODE_AD_BACKFILL_NO_FILL`	백필 광고가 없습니다.
`AdropErrorCode.internal`	`ERROR_CODE_INTERNAL`	요청이 중단되었거나(예: Android에서 받는 중에 Activity가 종료됨) 내부 오류가 발생했습니다. 나중에 다시 호출하세요.
`AdropErrorCode.initialize`	`ERROR_CODE_INITIALIZE`	SDK가 초기화되지 않았습니다. Android에서는 기기가 대상 국가에 속하지 않을 때도 이 코드로 끝납니다.
`AdropErrorCode.invalidUnit`	`ERROR_CODE_INVALID_UNIT`	유닛 ID가 비어 있습니다.

catch 안에서 preload를 바로 다시 호출하지 마세요. 백필 의존성이 없을 때처럼 결과가 바뀌지 않으면 호출이 끝없이 반복됩니다. 다음 화면을 띄우기 전처럼 나중에 다시 호출하세요.

다음 단계

네이티브 광고

UI에 맞게 커스터마이징 가능한 네이티브 광고 구현하기

전면 광고

화면 전체를 덮는 전면 광고 구현하기

팝업 광고

작은 팝업 형태로 표시되는 광고 구현하기

레퍼런스

타입, 메서드, 에러 코드 참고하기