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는 싱글톤 패턴으로 동작하므로 한 번만 초기화하면 됩니다.
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)
API 인증 키 (사용자 속성 업데이트 시 필요)
프로덕션 환경에서는 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를 설정하세요.
