{"_id":"@adwhale/web-sdk","name":"@adwhale/web-sdk","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@adwhale/web-sdk","version":"0.0.1","type":"module","description":"ADwhale Ad Mediation Web SDK","license":"MIT","publishConfig":{"access":"public"},"keywords":["adwhale","ad","mediation","advertising","sdk","banner","interstitial","native"],"main":"dist/cjs/index.cjs","module":"dist/esm/index.js","types":"dist/types/index.d.ts","exports":{".":{"types":"./dist/types/index.d.ts","import":"./dist/esm/index.js","require":"./dist/cjs/index.cjs"}},"scripts":{"build":"rollup -c rollup.config.js","clean":"rm -rf dist","typecheck":"tsc --noEmit"},"devDependencies":{"@adwhale/core":"workspace:*"},"sideEffects":["dist/esm/index.js","dist/cjs/index.cjs"],"_id":"@adwhale/web-sdk@0.0.1","_nodeVersion":"24.13.0","_npmVersion":"11.6.2","dist":{"integrity":"sha512-NnTVLIGOq8J/idbCB+k+PYCgXSOC3yflTn6wCnAZk/nLAcLU+zx65nSXX5br8vLFPqolQUHelt83cTjhfQesNQ==","shasum":"7c683d47e2c42692ac237f89ab73f6f9b5ec0d7e","tarball":"https://registry.npmjs.org/@adwhale/web-sdk/-/web-sdk-0.0.1.tgz","fileCount":9,"unpackedSize":166415,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCtK2PewkaXHURvWHl9hz3QrjbrhpMSceBU2CoQdMpizAIgVmd5BhK/E/3QqB6GFeKSoyMfsWur210vssNfqELTSXY="}]},"_npmUser":{"name":"fsn_lab","email":"develop@fsn.co.kr"},"directories":{},"maintainers":[{"name":"fsn_lab","email":"develop@fsn.co.kr"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/web-sdk_0.0.1_1773991206255_0.563355876140659"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-20T07:20:06.144Z","0.0.1":"2026-03-20T07:20:06.396Z","modified":"2026-03-20T07:20:06.650Z"},"maintainers":[{"name":"fsn_lab","email":"develop@fsn.co.kr"}],"description":"ADwhale Ad Mediation Web SDK","keywords":["adwhale","ad","mediation","advertising","sdk","banner","interstitial","native"],"license":"MIT","readme":"# @adwhale/web-sdk\n\nADwhale 광고 미디에이션 Web SDK. 배너, 전면(Interstitial), 네이티브 광고를 웹에서 워터폴 미디에이션 방식으로 제공합니다.\n\n## 설치\n\n```bash\nnpm install @adwhale/web-sdk\n```\n\n프레임워크별 래퍼도 제공됩니다:\n- React: `npm install @adwhale/web-sdk-react`\n- Vue 3: `npm install @adwhale/web-sdk-vue`\n- Angular: `npm install @adwhale/web-sdk-angular`\n- AngularJS: `npm install @adwhale/web-sdk-angularjs`\n\n## CDN 사용\n\n```html\n<script src=\"https://cdn.fsn.co.kr/sdk/adwhale/adwhale.sdk.min.js\"></script>\n<script>\n  adwhale.cmd.push(function() {\n    adwhale.AdWhaleMediationAds.init({ publisherUid: 'PUB-XXXX' });\n  });\n</script>\n```\n\n## 빠른 시작\n\n### 1. SDK 초기화\n\n```typescript\nimport { AdWhaleMediationAds } from '@adwhale/web-sdk';\n\nAdWhaleMediationAds.init({\n  publisherUid: 'PUB-XXXX',\n  debug: true,       // 콘솔 로그 출력\n  testMode: false,   // 테스트 광고 모드\n});\n```\n\n### 2. 배너 광고\n\n```typescript\nconst banner = AdWhaleMediationAds.createBanner({\n  placementUid: 'PLACE-XXXX',\n  container: '#ad-banner',    // CSS 셀렉터 또는 HTMLElement\n  adSize: '320x50',\n  autoRefresh: true,\n  loading: 'lazy',\n  passbackTag: '<div>fallback ad</div>',\n});\n\nbanner\n  .onAdLoaded((info) => console.log('loaded', info))\n  .onAdLoadFailed((error) => console.log('failed', error))\n  .onAdImpression((info) => console.log('impression', info))\n  .onAdClicked(() => console.log('clicked'))\n  .onAdRefreshed((info) => console.log('refreshed', info))\n  .onPassback(() => console.log('passback'))\n  .load();\n\n// 정리\nbanner.destroy();\n```\n\n### 3. 전면 광고 (Interstitial)\n\n```typescript\nconst interstitial = AdWhaleMediationAds.createInterstitial({\n  placementUid: 'PLACE-YYYY',\n});\n\ninterstitial\n  .onAdLoaded((info) => console.log('ready', info))\n  .onAdLoadFailed((error) => console.log('failed', error))\n  .onAdShowed(() => console.log('showed'))\n  .onAdImpression((info) => console.log('impression', info))\n  .onAdClosed(() => console.log('closed'))\n  .onAdClicked(() => console.log('clicked'))\n  .load();\n\n// 로드 완료 후 표시\ninterstitial.show();\n\n// 정리\ninterstitial.destroy();\n```\n\n### 4. 네이티브 광고\n\n```typescript\nconst native = AdWhaleMediationAds.createNative({\n  placementUid: 'PLACE-ZZZZ',\n  container: '#native-ad',\n  loading: 'lazy',\n});\n\nnative\n  .onAdLoaded((info) => {\n    const data = native.adData;\n    // data.title, data.desc, data.imageMain, data.imageIcon,\n    // data.linkUrl, data.ctaText, data.sponsored\n  })\n  .onAdLoadFailed((error) => console.log('failed', error))\n  .onAdImpression((info) => console.log('impression', info))\n  .onAdClicked(() => console.log('clicked'))\n  .load();\n```\n\n### 5. `<ins>` 태그 선언적 방식\n\nHTML에 `<ins>` 태그를 추가하면 SDK가 자동으로 배너 광고를 생성합니다.\n\n```html\n<ins class=\"adwhale-ad\"\n  data-placement-uid=\"PLACE-XXXX\"\n  data-ad-size=\"320x50\"\n  data-loading=\"lazy\"\n></ins>\n```\n\nSPA에서 동적으로 추가되는 `<ins>` 태그도 `MutationObserver`로 자동 감지합니다.\n\n## Ad Blocker 감지\n\n```typescript\nAdWhaleMediationAds.onAdBlocked(() => {\n  console.log('Ad blocker detected');\n});\n\n// 또는 직접 확인\nif (AdWhaleMediationAds.isAdBlockerDetected()) {\n  // ...\n}\n```\n\n## API\n\n### `AdWhaleMediationAds`\n\n| 메서드 | 설명 |\n|--------|------|\n| `init(config)` | SDK 초기화 (최초 1회) |\n| `reset()` | SDK 상태 리셋 (재초기화 시 필요) |\n| `isInitialized()` | 초기화 여부 |\n| `createBanner(options)` | 배너 광고 인스턴스 생성 |\n| `createInterstitial(options)` | 전면 광고 인스턴스 생성 |\n| `createNative(options)` | 네이티브 광고 인스턴스 생성 |\n| `onAdBlocked(cb)` | Ad blocker 감지 콜백 |\n| `isAdBlockerDetected()` | Ad blocker 감지 여부 |\n\n### `AdWhaleInitConfig`\n\n| 필드 | 타입 | 필수 | 설명 |\n|------|------|------|------|\n| `publisherUid` | `string` | O | 매체 UID |\n| `debug` | `boolean` | | 디버그 로그 (기본: `false`) |\n| `testMode` | `boolean` | | 테스트 모드 (기본: `false`) |\n| `environment` | `\"real\" \\| \"uat\"` | | 환경 (기본: `\"real\"`) |\n| `coreSdkUrl` | `string` | | Core SDK CDN URL (커스텀) |\n\n### `BannerOptions`\n\n| 필드 | 타입 | 필수 | 설명 |\n|------|------|------|------|\n| `placementUid` | `string` | O | 지면 UID |\n| `container` | `string \\| HTMLElement` | O | 광고 컨테이너 |\n| `adSize` | `\"320x50\" \\| \"320x100\" \\| \"300x250\" \\| \"250x250\" \\| \"adaptive\"` | | 광고 사이즈 |\n| `autoRefresh` | `boolean` | | 자동 갱신 |\n| `loading` | `\"lazy\" \\| \"eager\"` | | 로딩 방식 (기본: `\"lazy\"`) |\n| `passbackTag` | `string` | | Passback HTML |\n\n### `InterstitialOptions`\n\n| 필드 | 타입 | 필수 | 설명 |\n|------|------|------|------|\n| `placementUid` | `string` | O | 지면 UID |\n| `passbackTag` | `string` | | Passback HTML |\n\n### `NativeOptions`\n\n| 필드 | 타입 | 필수 | 설명 |\n|------|------|------|------|\n| `placementUid` | `string` | O | 지면 UID |\n| `container` | `string \\| HTMLElement` | O | 광고 컨테이너 |\n| `loading` | `\"lazy\" \\| \"eager\"` | | 로딩 방식 |\n| `passbackTag` | `string` | | Passback HTML |\n\n## 라이선스\n\nMIT\n","readmeFilename":"README.md","_rev":"1-a0773de340d3c2c4285b7e032e246d90"}