백필 광고는 직광고가 없을 때 자동으로 대체 광고를 노출하여 광고 수익을 극대화하는 기능입니다.
설정 방법
1. 콘솔에서 활성화
애드컨트롤 콘솔에서 원하는 광고 유닛의 백필 광고를 활성화하세요.
백필 광고 설정
콘솔에서 백필 광고 활성화 방법 확인
2. 광고 확인
Adrop 팀 승인 후 광고 유닛이 수익화 중 상태가 되면 백필 광고가 자동으로 노출됩니다.
등록된 앱 도메인에서는 추가 작업 없이 설정된 광고 지면에 자동으로 노출됩니다.
동작 방식
- SDK가 직광고를 요청합니다.
- 송출 가능한 직광고가 없으면 (
AD_NO_FILL) 백필 광고를 자동으로 요청합니다.
- 백필 광고도 없으면
AD_BACKFILL_NO_FILL 이벤트가 발생합니다.
지원 포맷
현재 백필 광고는 배너형만 지원합니다.
| 광고 유닛 포맷 | 백필 광고 형태 |
|---|
| 배너 | 배너형 |
| 네이티브 | 배너형 |
네이티브 유닛에서도 백필 광고는 배너형으로 노출됩니다.
광고 크기
백필 광고는 컨테이너 크기에 맞는 소재를 자동으로 요청합니다.
- 너비: 초기 맞춤
- 높이: 필수 (적절한 높이 지정)
- 정렬: 가로 가운데 정렬 지원
개발 환경 테스트
localhost 테스트
- 앱에 연결된 광고 유닛 중 하나라도 수익화 중이면 localhost에서도 백필 광고 요청이 가능합니다.
- 하지만 localhost에서는 실제 광고가 내려오지 않고
AD_BACKFILL_NO_FILL 이벤트가 발생합니다.
- 실제 백필 광고를 받아보려면 localhost가 아닌 앱에 등록된 도메인에서 요청해야 합니다.
이벤트 처리
백필 광고 관련 이벤트를 처리할 수 있습니다.
import { useEffect, useRef } from 'react';
import Adrop from '@adrop/ads-web-sdk';
function BannerAd({ unitId }: { unitId: string }) {
const containerRef = useRef<HTMLDivElement>(null);
useEffect(() => {
const adrop = Adrop.instance();
const filter = { unit: unitId };
// 광고 수신 (직광고 또는 백필)
const handleReceived = (unit: string, adData: any) => {
console.log('광고 수신:', adData.format); // 'banner', 'nativeAd', 'backfill'
};
// 직광고 없음 (백필 요청 시작)
const handleNoFill = (unit: string) => {
console.log('직광고 없음, 백필 요청 중...');
};
// 백필 광고도 없음
const handleBackfillNoFill = (unit: string) => {
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);
if (containerRef.current) {
adrop.renderAd(containerRef.current, { unit: unitId });
}
return () => {
adrop.off(Adrop.Events.AD_RECEIVED, handleReceived);
adrop.off(Adrop.Events.AD_NO_FILL, handleNoFill);
adrop.off(Adrop.Events.AD_BACKFILL_NO_FILL, handleBackfillNoFill);
};
}, [unitId]);
return <div ref={containerRef} />;
}
주요 이벤트
| 이벤트 | 상수 | 설명 |
|---|
| 광고 수신 | AD_RECEIVED | 직광고 또는 백필 광고 수신 |
| 직광고 없음 | AD_NO_FILL | 직광고 없음 (백필 요청 시작) |
| 백필 없음 | AD_BACKFILL_NO_FILL | 백필 광고도 없음 |
광고 타입 구분
AD_RECEIVED 이벤트의 adData.format으로 광고 타입을 구분할 수 있습니다.
adrop.on(Adrop.Events.AD_RECEIVED, (unit, adData) => {
switch (adData.format) {
case 'banner':
console.log('직광고 (배너)');
break;
case 'nativeAd':
console.log('직광고 (네이티브)');
break;
case 'backfill':
console.log('백필 광고');
break;
}
});
광고 없음 처리
직광고와 백필 광고 모두 없을 때 광고 영역을 숨기는 예시입니다.
import { useState, useEffect, useRef } from 'react';
import Adrop from '@adrop/ads-web-sdk';
function BannerAd({ unitId }: { unitId: string }) {
const containerRef = useRef<HTMLDivElement>(null);
const [hasAd, setHasAd] = useState(true);
useEffect(() => {
const adrop = Adrop.instance();
const filter = { unit: unitId };
const handleReceived = () => {
setHasAd(true);
};
const handleBackfillNoFill = () => {
setHasAd(false); // 광고 영역 숨김
};
adrop.on(Adrop.Events.AD_RECEIVED, handleReceived, filter);
adrop.on(Adrop.Events.AD_BACKFILL_NO_FILL, handleBackfillNoFill, filter);
if (containerRef.current) {
adrop.renderAd(containerRef.current, { unit: unitId });
}
return () => {
adrop.off(Adrop.Events.AD_RECEIVED, handleReceived);
adrop.off(Adrop.Events.AD_BACKFILL_NO_FILL, handleBackfillNoFill);
};
}, [unitId]);
if (!hasAd) return null;
return <div ref={containerRef} />;
}
관련 문서
