네이티브 광고
2
커스텀 UI 컨테이너 구성하기
<div
data-adrop-unit='YOUR_UNIT_ID' // 필수. 애드컨트롤 콘솔에서 생성한 유닛의 ID
data-adrop-context-id='YOUR_CONTEXT_ID' // 선택. 문맥 타겟팅에 필요한 문맥 문자열
data-adrop-theme='light' // 선택. 'light' 또는 'dark'
data-adrop-render='custom' // 커스텀 UI 사용 시 필수.
data-adrop-entire-click={true} // 커스텀 UI 컨테이너의 클릭 영역을 전체로 할 지 여부
/>개요
attributes
광고 재요청
3
커스텀 UI 컨테이너 내부 구성하기
<div
... // 컨테이너 attributes
>
<!-- 광고주 프로필 로고 -->
<img alt='YOUR_LOGO_ALT' data-adrop-native='profile.displayLogo'/>
<!-- 광고주 프로필 이름 -->
<div data-adrop-native='profile.displayName'/>
<!-- 소재 이미지 -->
<img alt='YOUR_ASSET_ALT' data-adrop-native='asset'/>
<!-- 소재 제목 -->
<div data-adrop-native='headline'/>
<!-- 소재 내용 -->
<div data-adrop-native='body'/>
<!-- 소재 추가 텍스트 -->
<div data-adrop-native='extra.YOUR_EXTRA_ID'/>
</div>4
5
이벤트 처리
이벤트 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)이벤트 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)Last updated