React

React 환경에서 Adrop Web SDK를 통해 광고를 연동하기 위한 가이드

1

소개

React에서 Adrop Web SDK를 활용하여 손쉬운 광고 송출을 해보세요.

• data attributes 또는 함수 호출로 간단하게 직광고를 호출 및 렌더링

• data attributes를 통해 직접 구현한 DOM에 네이티브 광고에 필요한 텍스트를 대신 삽입

• 현재 송출 가능한 직광고가 없을 땐 자동으로 Backfill 광고를 호출

  • 단, 애드컨트롤 콘솔에서 Backfill 광고 활성화를 한 경우

2

사전 준비사항

• Web 앱에 연결된 광고 유닛이 있어야합니다. 광고 유닛 생성하기

  • Web 앱의 도메인은 반드시 배포해서 사용할 도메인을 입력해주세요. 그렇지 않으면 정상적인 광고 송출이 되지 않습니다.

• 오디언스 타겟팅 기능을 사용하기 위해선 app_key가 반드시 필요합니다. 애드컨트롤 콘솔 > 관리 탭 > 앱에서 Web 앱의 adrop_service.json 파일을 다운로드한 후 app_key 에 해당되는 값을 저장해두세요.

• Backfill 기능을 사용하려면 애드컨트롤 콘솔에서 Backfill 광고 활성화를 해야 합니다. 자세한 사항은 Backfill 광고로 자동 수익화하기페이지를 참조해주세요.

3

Quick Start (5분 안에 첫 광고 확인하기)

Adrop 초기화하기

useEffect(() => {
    const config: AdropConfig = {
        appId: 'YOUR_APP_ID'
    }
    
    Adrop.observe(config)
}, [])

1. data attributes로 광고 확인하기

<div data-adrop-unit='YOUR_UNIT_ID'/>

2. renderAd 함수로 광고 확인하기

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

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

return <div ref={ref}/>