백필 광고는 직광고가 없을 때 자동으로 대체 광고를 노출하여 광고 수익을 극대화하는 기능입니다.
설정 방법
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>
관련 문서
