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