개요
빌드 도구 없이 CDN 스크립트를 통해 Adrop Web SDK를 연동할 수 있습니다. 정적 웹사이트나 간단한 HTML 페이지에 적합합니다.지원 광고 포맷
- 배너 광고
- 네이티브 광고 (커스텀 UI 지원)
요구 사항
- 모던 브라우저 (Chrome, Firefox, Safari, Edge)
설치
HTML 문서의<head> 섹션에 스크립트를 추가합니다.
특정 버전을 고정하려면
@latest 대신 버전 번호를 명시하세요.
예: @adrop/ads-web-sdk@1.0.1초기화
스크립트 로드 후 SDK를 초기화합니다.초기화 옵션 (AdropConfig)
string
필수
애드컨트롤 콘솔에서 발급받은 앱 ID
string
사용자 식별자 (타겟팅에 활용)
string
API 인증 키 (사용자 속성 업데이트 시 필요)
boolean
기본값:false
디버그 로깅 활성화
'responsive' | 'fixed'
기본값:"responsive"
매체사 전체 백필 광고 렌더링 모드. 슬롯별 옵션이 우선합니다. 자세한 내용은 백필 렌더링 모드 가이드를 참고하세요. (SDK 1.2.3+)
인스턴스 접근
초기화 후 어디서든Adrop.instance()로 SDK에 접근할 수 있습니다.
설정 동적 변경
로그인 후 사용자 ID를 설정하는 등 런타임에 설정을 변경할 수 있습니다.타겟팅 광고가 정상 동작하려면 광고 지면 렌더링 전에
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 예제 코드