네이티브 광고

1

기본 템플릿 사용법

  • Adrop은 기본적인 네이트브 광고 템플릿을 제공합니다. (템플릿은 네이티브 광고 유닛 생성하기에서 확인하실 수 있습니다.)

  • 템플릿에서 "광고주 프로필" 부분은 지원하지 않습니다. 해당 이미지의 "광고주 프로필"은 예시입니다. 기본 템플릿은 소재 및 성과 추적을 미리 만들어서 제공합니다.

  • 사용법은 "배너 광고"와 동일합니다. 배너 광고를 참조해주세요.

2

커스텀 UI 컨테이너 구성하기

네이티브 광고를 사용하는 이유는 앱에 어울리는 광고 지면을 직접 구현할 수 있다는 장점이 가장 큽니다. 그러므로 커스텀 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

  • data-adrop-unit

    • 필수

    • 애드컨트롤 콘솔에서 생성한 유닛의 ID

  • data-adrop-context-id

    • 선택

    • 문맥 타겟팅에 필요한 문맥 문자열 (자세한 내용은 문맥 타겟팅를 참조해주세요)

  • data-adrop-theme

    • 선택 (default: 'light')

    • 애드컨트롤 콘솔에서 광고 유닛에 다크 모드 설정을 사용하는 경우 지정 (자세한 내용은 다크 모드 소재 받기를 참조해주세요)

  • data-adrop-render

    • 커스텀 UI 구성 시 필수

    • 값은 'custom'을 입력해주세요.

  • data-adrop-entire-click

    • 선택 (default: false)

    • false일 땐 컨테이너 내부의 text, image만 클릭 가능

      • 광고주 프로필은 소재에 등록된 광고주 링크로 이동

    • true일 땐 컨테이너 전체 클릭 가능

      • 이 땐 광고주 프로필을 클릭해도 소재의 destination으로 이동

광고 재요청

  • key 변화를 통한 remount 방식 

    <div
    key={`${unitId}:${contextId}:${theme}:${isEntireClick}`}
    ...
/>

    • 요청값에 따라 고유한 key값이 되도록 key를 설정하면 remount가 되면서 광고를 다시 불러올 수 있습니다.

  • renderAd를 호출하는 방식 

    const ref = useRef<HTMLDivElement | null>(null)

useEffect(() => {
    if (!ref.current) return
    
    Adrop.instance().renderAd(ref.current)
}, [])

<div
    ref={ref}
    ...
/>

    • 이 방법은 함수를 통해 원하는 시점에 광고를 재요청할 수 있는 방식입니다. renderAd 호출 시 속성을 변경하고 싶다면, 아래의 “renderAd 함수 호출을 이용한 방법 > 광고 재요청” 섹션을 참고해주세요.

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}/>

개요

  • 직접 광고 요청 타이밍을 관리할 때 추천합니다.

  • 광고 지면 Container를 renderAd 함수에 전달해야 합니다.

  • 광고 요청 타이밍을 수동으로 조절할 수 있어, 재요청을 비교적 쉽게 처리할 수 있습니다.

props

AdropAdRequest 참조

광고 재요청

Adrop.instance().renderAd(ref.current, {
    unit: 'YOUR_UNIT_ID'
    contextId: 'YOUR_CONTEXT_ID'
    theme: 'light',
    trackMode: 1,
    isEntireClick: true
})

  • renderAd 함수를 다시 호출

    • 이 방식은 1번에서 data attributes로 생성한 지면에도 재요청이 가능합니다.

      이 경우, data attributes에 존재하지 않는 항목이나 수정하고 싶은 항목만 전달하면 됩니다.

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>

  • 각 element의 class나 style, 트리 구조는 앱에 화면이 잘 맞도록 자유롭게 구성하세요. data-adrop-native 를 가진 Element들이 컨테이너에 포함되어있어야 합니다.

  • 원하는 소재의 텍스트 및 이미지를 data-adrop-native에 설정해주세요.

    • 광고주 프로필

      • 애드컨트롤 콘솔에서 네이티브 광고 유닛의 "광고주 프로필 표시"를 켜주세요.

      • 로고 이미지는 img 태그와 함께 'profile.displayLogo' 로 설정해주세요.

      • 광고주 이름은 'profile.displayName' 으로 설정해주세요.

    • 소재 이미지

      • img 태그와 함께 'asset' 으로 설정해주세요.

    • 소재 제목

      • 'headline' 으로 설정해주세요.

    • 소제 내용

      • 'body' 로 설정해주세요.

    • 소재 추가 텍스트

      • 애드컨트롤 콘솔에서 네이티브 광고 유닛의 "추가 텍스트 항목"에서 추가해주세요.

      • "필수"로 설정하지 않았다면 해당 text가 비어있을 수도 있습니다.

      • 추가 텍스트 항목에서 설정한 아이디를 'extra.{id}' 에 넣어서 설정해주세요.

4

광고 크기 설정

<div
    ... // 컨테이너 attributes 또는 ref
    className='your_css_class_name' // CSS 적용 시
    style={your_style} // style 적용 시
/>

  • 기본적으로 애드컨트롤 콘솔에 등록한 광고 유닛의 사이즈대로 광고 지면을 구성하는 것이 가장 바람직합니다.

  • 직광고

    • 반응형 및 가로, 세로 가운데 정렬을 지원합니다.

    • 광고주가 등록한 소재가 최적으로 보이려면 height는 등록한 유닛의 높이대로 지정해주시는 것이 좋습니다.

  • Backfill 광고

    • 가로 가운데 정렬을 지원합니다.

    • 광고 지면의 사이즈 그대로 Backfill 광고를 요청합니다.

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)
    }
}, [])

  • 이벤트 종류는 AdropEvents를 참조해주세요.

  • AdData는 AdData를 참조해주세요.

  • 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로 추가하면 됩니다.

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

Previous배너 광고Next타겟팅 설정하기

Last updated