메인 콘텐츠로 건너뛰기

​
개요

Adrop Web SDK를 React 프로젝트에 연동하여 배너 광고와 네이티브 광고를 표시할 수 있습니다.

​
지원 광고 포맷

  • 배너 광고
  • 네이티브 광고 (커스텀 UI 지원)

​
요구 사항

  • React 16.8 이상
  • Node.js 14 이상

​
설치

NPM 또는 Yarn을 사용하여 SDK를 설치합니다. 
npm install @adrop/ads-web-sdk

​
초기화

앱의 진입점(main.tsx 또는 index.tsx)에서 SDK를 초기화합니다. SDK는 싱글톤 패턴으로 동작하므로 한 번만 초기화하면 됩니다.
main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Adrop } from '@adrop/ads-web-sdk';
import App from './App';

// 앱 렌더링 전에 SDK 초기화
Adrop.observe({
  appId: 'YOUR_APP_ID',
  debug: import.meta.env.DEV  // 개발 환경에서만 true
});

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

​
초기화 옵션 (AdropConfig)

​
appId
string
필수
애드컨트롤 콘솔에서 발급받은 앱 ID
​
uid
string
사용자 식별자 (타겟팅에 활용)
​
appKey
string
API 인증 키 (사용자 속성 업데이트 시 필요)
​
debug
boolean
기본값:false
디버그 로깅 활성화
프로덕션 환경에서는 debug: false로 설정하세요.

​
인스턴스 접근

초기화 후 어디서든 Adrop.instance()로 SDK에 접근할 수 있습니다. 
import { Adrop } from '@adrop/ads-web-sdk';

function MyComponent() {
  const handleClick = () => {
    const adrop = Adrop.instance();
    // SDK 사용
  };

  return <button onClick={handleClick}>광고 로드</button>;
}

​
설정 동적 변경

로그인 후 사용자 ID를 설정하는 등 런타임에 설정을 변경할 수 있습니다. 
Adrop.instance().setConfig({
  uid: 'USER_ID',
  appKey: 'YOUR_APP_KEY'
});
타겟팅 광고가 정상 동작하려면 광고 지면 진입 전에 uid를 설정하세요.

​
WebView 설정 (백필 광고용)

WebView 환경에서 백필 광고를 표시하려면 네이티브 앱에서 추가 설정이 필요합니다.

Android 설정

Android WebView 설정 방법

iOS 설정

iOS WebView 설정 방법

​
목차

배너 광고

배너 광고 구현하기

네이티브 광고

네이티브 광고 구현하기

타겟팅 설정

오디언스/문맥 타겟팅

레퍼런스

클래스, 인터페이스, 상수

예제

React, CDN 예제 코드