백필 광고는 직광고가 없을 때 자동으로 대체 광고를 노출하여 광고 수익을 극대화하는 기능입니다.
시작 전 준비
설정 방법
1. 콘솔에서 활성화
애드컨트롤 콘솔에서 원하는 광고 유닛의 백필 광고를 활성화하세요.
백필 광고 설정
콘솔에서 백필 광고 활성화 방법 확인
2. 광고 확인
Adrop 팀 승인 후 광고 유닛이 수익화 중 상태가 되면 백필 광고가 자동으로 노출됩니다.
등록된 앱 도메인에서는 추가 작업 없이 설정된 광고 지면에 자동으로 노출됩니다.
동작 방식
- SDK가 직광고를 요청합니다.
- 송출 가능한 직광고가 없으면 (
AD_NO_FILL) 백필 광고를 자동으로 요청합니다.
- 백필 광고도 없으면
AD_BACKFILL_NO_FILL 이벤트가 발생합니다.
지원 포맷
현재 백필 광고는 배너형만 지원합니다.
| 광고 유닛 포맷 | 백필 광고 형태 |
|---|
| 배너 | 배너형 |
| 네이티브 | 배너형 |
네이티브 유닛에서도 백필 광고는 배너형으로 노출됩니다.
광고 크기
백필 광고는 컨테이너 크기에 맞는 소재를 자동으로 요청합니다.
- 정렬: 가로 가운데 정렬 지원
- 크기: 지정한 크기로 고정 표시
개발 환경 테스트
localhost 테스트
- 앱에 연결된 광고 유닛 중 하나라도 수익화 중이면 localhost에서도 백필 광고 요청이 가능합니다.
- 승인되지 않은 도메인에서는 광고가 수신되지 않고
AD_BACKFILL_NO_FILL 이벤트가 발생합니다.
이벤트 처리
백필 광고 관련 이벤트를 처리할 수 있습니다.
<script>
const adrop = Adrop.instance();
const filter = { unit: 'YOUR_UNIT_ID' };
// 광고 수신 (직광고 또는 백필)
function handleReceived(unit, adData) {
console.log('광고 수신:', adData.format); // 'banner', 'nativeAd', 'backfill'
}
// 직광고 없음 (백필 요청 시작)
function handleNoFill(unit) {
console.log('직광고 없음, 백필 요청 중...');
}
// 백필 광고도 없음
function handleBackfillNoFill(unit) {
console.warn('백필 광고 없음:', unit);
// 광고 영역 숨기기 등 처리
}
adrop.on(Adrop.Events.AD_RECEIVED, handleReceived, filter);
adrop.on(Adrop.Events.AD_NO_FILL, handleNoFill, filter);
adrop.on(Adrop.Events.AD_BACKFILL_NO_FILL, handleBackfillNoFill, filter);
</script>
주요 이벤트
| 이벤트 | 상수 | 설명 |
|---|
| 광고 수신 | AD_RECEIVED | 직광고 또는 백필 광고 수신 |
| 직광고 없음 | AD_NO_FILL | 직광고 없음 (백필 요청 시작) |
| 백필 없음 | AD_BACKFILL_NO_FILL | 백필 광고도 없음 |
광고 타입 구분
AD_RECEIVED 이벤트의 adData.format으로 광고 타입을 구분할 수 있습니다.
adrop.on(Adrop.Events.AD_RECEIVED, function(unit, adData) {
switch (adData.format) {
case 'banner':
console.log('직광고 (배너)');
break;
case 'nativeAd':
console.log('직광고 (네이티브)');
break;
case 'backfill':
console.log('백필 광고');
break;
}
});
광고 없음 처리
직광고와 백필 광고 모두 없을 때 광고 영역을 숨기는 예시입니다.
<div id="ad-wrapper">
<div id="ad-container" data-adrop-unit="YOUR_UNIT_ID"></div>
</div>
<script>
const adrop = Adrop.instance();
const wrapper = document.getElementById('ad-wrapper');
const filter = { unit: 'YOUR_UNIT_ID' };
adrop.on(Adrop.Events.AD_RECEIVED, function() {
wrapper.style.display = 'block';
}, filter);
adrop.on(Adrop.Events.AD_BACKFILL_NO_FILL, function() {
wrapper.style.display = 'none'; // 광고 영역 숨김
}, filter);
</script>
관련 문서
