시작하기

개요

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

지원 광고 포맷

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

요구 사항

React 16.8 이상
Node.js 14 이상

설치

NPM 또는 Yarn을 사용하여 SDK를 설치합니다.

npm install @adrop/ads-web-sdk

yarn add @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)

string

필수

애드컨트롤 콘솔에서 발급받은 앱 ID

string

사용자 식별자 (타겟팅에 활용)

string

API 인증 키 (사용자 속성 업데이트 시 필요)

boolean

기본값:false

디버그 로깅 활성화

'responsive' | 'fixed'

기본값:"responsive"

매체사 전체 백필 광고 렌더링 모드. 슬롯별 옵션이 우선합니다. 자세한 내용은 백필 렌더링 모드 가이드를 참고하세요. (SDK 1.2.3+)

프로덕션 환경에서는 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 에서 노출하는 경우, 감싼 플랫폼의 Adrop SDK (Android · iOS · Flutter · React Native) 를 함께 도입하고 Adrop.registerWebView() 를 호출하는 것을 권장합니다. Google 은 이 등록이 인앱 WebView 트래픽의 앱 신호를 광고 태그에 전달해 수익 최적화(monetization)에 도움이 된다고 안내합니다. 또한 기본 WebView 설정은 광고에 최적화되어 있지 않으므로, 각 플랫폼별 가이드의 WebView 설정(JavaScript · DOM 저장소 · 서드파티 쿠키 · 미디어 자동재생)을 함께 확인하세요. 브라우저(모바일·데스크톱)에서 서빙할 때는 별도 조치가 필요 없습니다.

Android 설정

Android WebView 설정 방법

iOS 설정

iOS WKWebView 설정 방법

Flutter 설정

Flutter WebView 설정 방법

React Native 설정

React Native WebView 설정 방법

배너 광고

배너 광고 구현하기

네이티브 광고

네이티브 광고 구현하기

타겟팅 설정

오디언스/문맥 타겟팅

레퍼런스

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

예제

React, CDN 예제 코드

SDK 가이드

AI

Android

iOS

React Native

Flutter

Web

REST API

개요

지원 광고 포맷

요구 사항

설치

초기화

초기화 옵션 (AdropConfig)

인스턴스 접근

설정 동적 변경

WebView 설정 (백필 광고용)

Android 설정

iOS 설정

Flutter 설정

React Native 설정

목차

배너 광고

네이티브 광고

타겟팅 설정

레퍼런스

예제

​개요

​지원 광고 포맷

​요구 사항

​설치

​초기화

​초기화 옵션 (AdropConfig)

​인스턴스 접근

​설정 동적 변경

​WebView 설정 (백필 광고용)

Android 설정

iOS 설정

Flutter 설정

React Native 설정

​목차

배너 광고

네이티브 광고

타겟팅 설정

레퍼런스

예제

개요

지원 광고 포맷

요구 사항

설치

초기화

초기화 옵션 (AdropConfig)

인스턴스 접근

설정 동적 변경

WebView 설정 (백필 광고용)

목차