네이티브 광고
2
커스텀 UI 컨테이너 구성하기
data attributes를 이용한 방법
<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
광고 재요청
<div key={`${unitId}:${contextId}:${theme}:${isEntireClick}`} ... />const ref = useRef<HTMLDivElement | null>(null) useEffect(() => { if (!ref.current) return Adrop.instance().renderAd(ref.current) }, []) <div ref={ref} ... />
renderAd 함수 호출을 이용한 방법
const ref = useRef<HTMLDivElement | null>(null)
useEffect(() => {
if (!ref.current) return
Adrop.instance().renderAd(ref.current, {
unit: 'YOUR_UNIT_ID' // 필수. 애드컨트롤 콘솔에서 생성한 유닛의 ID
contextId: 'YOUR_CONTEXT_ID' // 선택. 문맥 타겟팅에 필요한 문맥 문자열
theme: 'light', // 선택. 'light' 또는 'dark'
trackMode: 1, // 커스텀 UI 사용 시 필수
isEntireClick: true // 커스텀 UI 컨테이너의 클릭 영역을 전체로 할 지 여부
})
}, [])
<div ref={ref}/>개요
props
광고 재요청
Adrop.instance().renderAd(ref.current, {
unit: 'YOUR_UNIT_ID'
contextId: 'YOUR_CONTEXT_ID'
theme: 'light',
trackMode: 1,
isEntireClick: true
})3
커스텀 UI 컨테이너 내부 구성하기
<div
... // 컨테이너 attributes 또는 ref
>
<!-- 광고주 프로필 로고 -->
<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 등록
useEffect(() => {
// 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)
// 콜백 해제
return () => {
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 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' .../>
}Last updated