백필 광고는 직광고가 없을 때 대체 광고를 자동으로 노출하여 수익을 극대화하는 기능입니다. Adrop은 AdMob, Pangle 등 주요 광고 네트워크를 백필 광고로 지원합니다.
백필 광고를 사용하려면 네이티브 플랫폼별로 추가 설정이 필요합니다.
Android 설정
1. Gradle 설정
settings.gradle.kts
Pangle 광고 네트워크 저장소를 추가합니다:
dependencyResolutionManagement {
repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
repositories {
google()
mavenCentral()
maven { url = uri("https://artifact.bytedance.com/repository/pangle") }
}
}
build.gradle.kts
백필 광고 의존성을 추가합니다:
dependencies {
implementation("io.adrop:adrop-ads:1.7.2")
implementation("io.adrop:adrop-ads-backfill:1.7.2")
}
2. AndroidManifest.xml 설정
AdMob을 백필 광고로 사용하는 경우, AdMob App ID를 AndroidManifest.xml에 추가합니다:
<manifest>
<application>
<!-- AdMob App ID -->
<meta-data
android:name="com.google.android.gms.ads.APPLICATION_ID"
android:value="ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy"/>
</application>
</manifest>
ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy를 실제 AdMob App ID로 교체해야 합니다.
3. ProGuard 설정
ProGuard를 사용하는 경우 다음 규칙을 추가합니다:
-keep class io.adrop.** { *; }
-dontwarn io.adrop.**
iOS 설정
1. Podfile 수정
백필 광고 의존성을 Podfile에 추가합니다:
target 'YourApp' do
# Adrop SDK
pod 'adrop-ads'
# 백필 광고 SDK
pod 'adrop-ads-backfill'
# ... 기타 의존성
end
2. Info.plist 설정
AdMob을 백필 광고로 사용하는 경우, AdMob App ID를 Info.plist에 추가합니다:
<key>GADApplicationIdentifier</key>
<string>ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy</string>
ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy를 실제 AdMob App ID로 교체해야 합니다.
콘솔 설정
Adrop 콘솔에서 백필 광고를 활성화합니다:
- Adrop 콘솔에 로그인
- 광고 유닛 메뉴로 이동
- 백필 광고를 사용할 광고 유닛 선택
- 백필 설정 섹션에서 백필 광고 활성화
- 사용할 백필 광고 네트워크 선택 (AdMob, Pangle 등)
- 광고 네트워크별 설정 입력 (예: AdMob Ad Unit ID)
React Native에서 사용하기
백필 광고 확인
광고가 백필 광고인지 확인하려면 isBackfilled 프로퍼티를 사용합니다.
배너 광고
import { AdropBanner } from 'adrop-ads-react-native'
<AdropBanner
unitId="YOUR_UNIT_ID"
style={{ width: 320, height: 100 }}
onAdReceived={(unitId, metadata) => {
if (metadata?.isBackfilled) {
console.log('백필 광고가 로드되었습니다')
} else {
console.log('직광고가 로드되었습니다')
}
}}
/>
전면 광고
import { AdropInterstitialAd } from 'adrop-ads-react-native'
const interstitialAd = new AdropInterstitialAd('YOUR_UNIT_ID')
interstitialAd.listener = {
onAdReceived: (ad) => {
if (ad.isBackfilled) {
console.log('백필 광고가 로드되었습니다')
} else {
console.log('직광고가 로드되었습니다')
}
}
}
리워드 광고
import { AdropRewardedAd } from 'adrop-ads-react-native'
const rewardedAd = new AdropRewardedAd('YOUR_UNIT_ID')
rewardedAd.listener = {
onAdReceived: (ad) => {
if (ad.isBackfilled) {
console.log('백필 광고가 로드되었습니다')
} else {
console.log('직광고가 로드되었습니다')
}
}
}
네이티브 광고
네이티브 광고의 경우, 백필 광고 여부에 따라 미디어 뷰를 다르게 렌더링해야 합니다.
import {
AdropNativeAd,
AdropNativeAdView,
AdropMediaView,
AdropHeadLineView,
AdropBodyView,
} from 'adrop-ads-react-native'
import { WebView } from 'react-native-webview'
const NativeAdExample = () => {
const [nativeAd, setNativeAd] = useState<AdropNativeAd>()
const [isLoaded, setIsLoaded] = useState(false)
useEffect(() => {
const ad = new AdropNativeAd('YOUR_UNIT_ID')
ad.listener = {
onAdReceived: (ad) => {
console.log('광고 수신:', ad.isBackfilled ? '백필' : '직광고')
setIsLoaded(true)
}
}
ad.load()
setNativeAd(ad)
return () => ad.destroy()
}, [])
return (
<AdropNativeAdView nativeAd={nativeAd}>
<AdropHeadLineView style={styles.headline} />
<AdropBodyView style={styles.body} />
{/* 백필 광고 여부에 따라 다른 미디어 뷰 사용 */}
{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}
/>
)}
</AdropNativeAdView>
)
}
네이티브 광고에서 백필 광고가 아닌 경우, 동영상 광고는 WebView를 사용하여 직접 렌더링해야 합니다.
광고 노출 흐름
백필 광고는 다음과 같은 순서로 노출됩니다:
지원 광고 형식
백필 광고는 다음 형식을 지원합니다:
| 광고 형식 | 지원 여부 | 설명 |
|---|
| 배너 (Banner) | ✅ 지원 | 고정 크기 배너 광고 |
| 네이티브 (Native) | ✅ 지원 | 커스터마이징 가능한 네이티브 광고 |
| 전면 (Interstitial) | ✅ 지원 | 전체 화면 광고 |
| 리워드 (Rewarded) | ✅ 지원 | 보상형 광고 |
| 팝업 (Popup) | ✅ 지원 | 팝업 형태 광고 |
모범 사례
백필 광고 활성화
모든 광고 유닛에서 백필 광고를 활성화하여 광고 노출률과 수익을 극대화하세요.
적절한 타임아웃 설정
직광고와 백필 광고의 적절한 타임아웃을 설정하여 사용자 경험을 개선하세요.
백필 광고 분석
isBackfilled 프로퍼티를 사용하여 직광고와 백필 광고의 비율을 추적하고 분석하세요.
네이티브 광고 미디어 처리
네이티브 광고에서는 백필 여부에 따라 AdropMediaView 또는 WebView를 적절히 사용하세요.
주의사항
- Android: 백필 광고를 사용하려면 반드시
io.adrop:adrop-ads-backfill:1.7.2 의존성을 추가해야 합니다.
- iOS: 백필 광고를 사용하려면 반드시
pod 'adrop-ads-backfill'를 Podfile에 추가해야 합니다.
- AdMob을 사용하는 경우 각 플랫폼의 매니페스트 파일에 AdMob App ID를 반드시 추가해야 합니다.
- 네이티브 광고에서 백필 광고가 아닌 경우 WebView로 미디어를 렌더링해야 합니다.
- 백필 광고 네트워크의 정책을 준수해야 합니다.
다음 단계
