배너 광고
1
기본 사용법
<div
data-adrop-unit='YOUR_UNIT_ID' // 필수. 애드컨트롤 콘솔에서 생성한 유닛의 ID
data-adrop-context-id='YOUR_CONTEXT_ID' // 선택. 문맥 타겟팅에 필요한 문맥 문자열
data-adrop-theme='light' // 선택. 'light' 또는 'dark'
/>개요
별도의 함수 호출 없이, 광고 지면이 렌더링될 때 즉시 광고 요청 및 송출이 진행됩니다.
attributes
data-adrop-unit필수
애드컨트롤 콘솔에서 생성한 유닛의 ID
data-adrop-context-id선택
문맥 타겟팅에 필요한 문맥 문자열 (자세한 내용은 문맥 타겟팅를 참조해주세요)
data-adrop-theme선택 (default:
'light')애드컨트롤 콘솔에서 광고 유닛에 다크 모드 설정을 사용하는 경우 지정 (자세한 내용은 다크 모드 소재 받기를 참조해주세요)
광고 재요청
광고 지면 DOM을 새로 생성하여 기존 DOM을 교체해주세요.
2
광고 크기 설정
<div
... // 컨테이너 attributes 또는 ref
className='your_css_class_name' // CSS 적용 시
style={your_style} // style 적용 시
/>기본적으로 애드컨트롤 콘솔에 등록한 광고 유닛의 사이즈대로 광고 지면을 구성하는 것이 가장 바람직합니다.
직광고
반응형 및 가로, 세로 가운데 정렬을 지원합니다.
광고주가 등록한 소재가 최적으로 보이려면
height는 등록한 유닛의 높이대로 지정해주시는 것이 좋습니다.
Backfill 광고
가로 가운데 정렬을 지원합니다.
광고 지면의 사이즈 그대로 Backfill 광고를 요청합니다.
3
이벤트 처리
이벤트 Callback 등록
// unit: 애드컨트롤 콘솔에서 생성한 유닛 ID
// adData: 광고 요청 응답
// 광고 요청에 성공하면 호출되는 콜백
const adReceivedCallback = (unit: string, adData: AdData) => {
// YOUR AD_RECEIVED CALLBACK FUNCTION
}
// 현재 송출 가능한 직광고가 없을 때 호출되는 콜백
const adNoFillCallback = (unit: string) => {
// YOUR AD_NO_FILL CALLBACK FUNCTION
}
// 광고 요청에 실패했을 때 호출되는 콜백
const adFailedCallback = (unit: string) => {
// YOUR AD_FAILED CALLBACK FUNCTION
}
// 광고 소재 노출 시 호출되는 콜백
const adImpressionCallback = (unit: string, adData: AdData) => {
// YOUR AD_IMPRESSION CALLBACK FUNCTION
}
// 광고 소재 클릭 시 호출되는 콜백
const adClickedCallback = (unit: string, adData: AdData) => {
// YOUR AD_CLICKED 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_NO_FILL, adNoFillCallback)
Adrop.instance().on(Adrop.Events.AD_FAILED, adFailedCallback)
Adrop.instance().on(Adrop.Events.AD_IMPRESSION, adImpressionCallback)
Adrop.instance().on(Adrop.Events.AD_CLICKED, adClickedCallback)
Adrop.instance().on(Adrop.Events.AD_BACKFILL_NO_FILL, adBackfillNoFillCallback)
// 콜백 해제
Adrop.instance().off(Adrop.Events.AD_RECEIVED, adReceivedCallback)
Adrop.instance().off(Adrop.Events.AD_NO_FILL, adNoFillCallback)
Adrop.instance().off(Adrop.Events.AD_FAILED, adFailedCallback)
Adrop.instance().off(Adrop.Events.AD_IMPRESSION, adImpressionCallback)
Adrop.instance().off(Adrop.Events.AD_CLICKED, adClickedCallback)
Adrop.instance().off(Adrop.Events.AD_BACKFILL_NO_FILL, adBackfillNoFillCallback)이벤트 종류는 AdropEvents를 참조해주세요.
AdData는 AdData를 참조해주세요.
on으로 등록한 콜백은 더이상 쓰지 않을 땐off를 통해 해제해주세요.
이벤트 filter
const adReceivedCallback = (unit: string, adData: AdData) => {
// YOUR AD_RECEIVED CALLBACK FUNCTION
}
Adrop.instance().on(Adrop.Events.AD_RECEIVED, adReceivedCallback, {
unit: 'YOUR_UNIT_ID'
})
Adrop.instance().off(Adrop.Events.AD_RECEIVED, adReceivedCallback)특정 unit에 대해서만 이벤트 처리를 하고 싶다면
on의 세 번째 파라미터에{ unit: string }을 filter로 추가하면 됩니다.광고 지면 내에서 이벤트를 같이 처리하고 싶을 때 좋은 방법입니다.
Last updated