메인 콘텐츠로 건너뛰기

개요

빌드 도구 없이 CDN 스크립트를 통해 Adrop Web SDK를 연동할 수 있습니다. 정적 웹사이트나 간단한 HTML 페이지에 적합합니다.

지원 광고 포맷

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

요구 사항

  • 모던 브라우저 (Chrome, Firefox, Safari, Edge)

설치

HTML 문서의 <head> 섹션에 스크립트를 추가합니다.
<script src="https://cdn.jsdelivr.net/npm/@adrop/ads-web-sdk@latest/dist/adrop-ads.min.js"></script>
특정 버전을 고정하려면 @latest 대신 버전 번호를 명시하세요. 예: @adrop/ads-web-sdk@1.0.1

초기화

스크립트 로드 후 SDK를 초기화합니다.
<script>
  const adrop = Adrop.observe({
    appId: 'YOUR_APP_ID',
    debug: true  // 개발 환경에서만 true
  });
</script>

초기화 옵션 (AdropConfig)

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

인스턴스 접근

초기화 후 어디서든 Adrop.instance()로 SDK에 접근할 수 있습니다.
const adrop = Adrop.instance();
// SDK 사용

설정 동적 변경

로그인 후 사용자 ID를 설정하는 등 런타임에 설정을 변경할 수 있습니다.
// Setter 사용
Adrop.instance().uid = 'USER_ID';
Adrop.instance().appKey = 'YOUR_APP_KEY';

// 또는 setConfig 사용
Adrop.instance().setConfig({
  uid: 'USER_ID',
  appKey: 'YOUR_APP_KEY'
});
타겟팅 광고가 정상 동작하려면 광고 지면 렌더링 전에 uid를 설정하세요.

WebView 설정 (백필 광고용)

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

Android 설정

Android WebView 설정 방법

iOS 설정

iOS WebView 설정 방법

목차

배너 광고

배너 광고 구현하기

네이티브 광고

네이티브 광고 구현하기

타겟팅 설정

오디언스/문맥 타겟팅

레퍼런스

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

예제

React, CDN 예제 코드