Backfill 광고

1

Backfill 광고 켜기

• 애드컨트롤 콘솔에서 원하는 광고 유닛의 Backfill 광고를 켭니다.

• 자세한 사항은 Backfill 광고 활성화 방법을 참고해주세요.

2

Backfill 광고 확인하기

• Adrop 팀에서 승인해서 해당 광고 유닛이 "수익화 중" 상태가 되면 Backfill 광고를 확인할 수 있습니다.

• 콘솔에 등록한 앱의 도메인에서는 추가 작업 없이, 설정하신 광고 지면에 Backfill 광고가 자동으로 노출됩니다.

개발 테스트

• localhost에서는 여러분이 등록한 app에 연결된 광고 유닛 중 하나라도 Backfill 광고가 "수익화 중" 상태라면 Backfill 광고 요청을 하게 됩니다.

• 승인된 도메인이 아니면 Backfill 광고를 받을 수 없습니다. 따라서, 정상적으로 Backfill 요청이 완료되면 AdBackfillNoFillCallback을 받으실 수 있습니다.

3

Backfill 광고 종류

• 현재는 배너 광고, 네이티브 광고 모두 배너형 Backfill 광고만 지원합니다.

• 광고 지면 Container 크기에 맞는 소재를 요청합니다.

• 가로 가운데 정렬을 지원하며, 반응형 및 세로 가운데 정렬은 지원하지 않습니다.

4

이벤트 처리

useEffect(() => {
    // unit: 애드컨트롤 콘솔에서 생성한 유닛 ID
    // adData: 광고 요청 응답
    
    // 광고 요청에 성공하면 호출되는 콜백
    const adReceivedCallback = (unit: string, adData: AdData) => {
        // YOUR AD_RECEIVED CALLBACK FUNCTION
    }
    
    // 가능한 Backfill 광고가 없을 때 호출되는 콜백
    // 개발 단계에서는 이 콜백이 호출되면 라이브 시 Backfill이 정상 노출됨
    // 단, localhost에서는 초기화 때 등록한 app ID에 연결된 광고 유닛 중에서
    // Backfill 수익화 중인 유닛이 하나라도 있어야 해당 콜백이 호출됨
    const adBackfillNoFillCallback = (unit: string) => {
        // YOUR AD_BACKFILL_NO_FILL CALLBACK FUNCTION
    }
    
    // 콜백 등록
    Adrop.instance().on(Adrop.Events.AD_RECEIVED, adReceivedCallback)
    Adrop.instance().on(Adrop.Events.AD_BACKFILL_NO_FILL, adBackfillNoFillCallback)
    
    // 콜백 해제
    return () => {
        Adrop.instance().off(Adrop.Events.AD_RECEIVED, adReceivedCallback)
        Adrop.instance().off(Adrop.Events.AD_BACKFILL_NO_FILL, adBackfillNoFillCallback)
    }
}, [])

• Backfill 광고는 adReceivedCallback, adBackfillNoFillCallback 두 가지 이벤트를 지원합니다.

  • 둘 중 어떤 이벤트를 받더라도 Backfill 광고 요청은 이루어진 것이며, adBackfillNoFillCallback은 해당 광고 유닛에 대해 송출가능한 광고가 없을 때 발생합니다.

• on으로 등록한 콜백은 더 이상 필요하지 않을 때 off를 호출해 해제해주시기 바랍니다.

이벤트 filter

const BannerComponent = () => {
    useEffect(() => {
        const adReceivedCallback = (unit: string, adData: AdData) => {
            // YOUR AD_RECEIVED CALLBACK FUNCTION
        }
        
        Adrop.instance().on(Adrop.Events.AD_RECEIVED, adReceivedCallback, {
            unit: 'YOUR_UNIT_ID'
        })
        
        return () => {
            Adrop.instance().off(Adrop.Events.AD_RECEIVED, adReceivedCallback)
        }
    }, [])
    
    return <div data-adrop-unit='YOUR_UNIT_ID' .../>
}

• 특정 unit에 대해서만 이벤트 처리를 하고 싶다면 on 의 세 번째 파라미터에 { unit: string } 을 filter로 추가하면 됩니다.

  • 위와 같이 컴포넌트 내에서 이벤트를 같이 처리하고 싶을 때 좋은 방법입니다.