@adstage/web-sdk 1.1.0 → 1.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +39 -47
- package/dist/index.cjs.js +181 -352
- package/dist/index.d.ts +38 -153
- package/dist/index.esm.js +174 -342
- package/dist/index.standalone.js +174 -385
- package/package.json +6 -2
- package/src/index.ts +22 -2
- package/src/managers/event-tracker.ts +48 -0
- package/src/utils/sdk-standalone.ts +175 -0
package/README.md
CHANGED
|
@@ -1,70 +1,62 @@
|
|
|
1
1
|
# AdStage Web SDK
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
> 🚀 **v1.2.0**: Standalone-First API로 더욱 간단해졌습니다!
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
모든 웹 프레임워크에서 사용 가능한 AdStage 광고 SDK입니다.
|
|
6
|
+
|
|
7
|
+
## 🎯 특징
|
|
8
|
+
|
|
9
|
+
- **프레임워크 독립적**: React, Vue, Angular, Vanilla JS 모든 환경 지원
|
|
10
|
+
- **초간단 API**: Provider나 Hook 없이 함수 호출만으로 사용
|
|
11
|
+
- **자동 최적화**: 중복 방지, ID 자동 생성, 스마트 캐싱
|
|
12
|
+
- **완전한 TypeScript 지원**
|
|
13
|
+
|
|
14
|
+
## 📦 설치
|
|
6
15
|
|
|
7
16
|
```bash
|
|
8
17
|
npm install @adstage/web-sdk
|
|
9
18
|
```
|
|
10
19
|
|
|
11
|
-
##
|
|
12
|
-
|
|
13
|
-
### 기본 사용법
|
|
20
|
+
## 🚀 빠른 시작
|
|
14
21
|
|
|
22
|
+
### 1. SDK 초기화
|
|
15
23
|
```javascript
|
|
16
|
-
import {
|
|
24
|
+
import { initAdStage } from '@adstage/web-sdk';
|
|
17
25
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
apiKey: 'your-api-key',
|
|
21
|
-
debug: true
|
|
26
|
+
await initAdStage({
|
|
27
|
+
apiKey: 'your-api-key'
|
|
22
28
|
});
|
|
23
|
-
|
|
24
|
-
// 광고 슬롯 생성
|
|
25
|
-
await sdk.createSlot(
|
|
26
|
-
'banner-slot-1',
|
|
27
|
-
'banner-container',
|
|
28
|
-
AdType.BANNER,
|
|
29
|
-
{
|
|
30
|
-
width: '100%',
|
|
31
|
-
height: 200
|
|
32
|
-
}
|
|
33
|
-
);
|
|
34
29
|
```
|
|
35
30
|
|
|
36
|
-
###
|
|
31
|
+
### 2. 광고 생성
|
|
32
|
+
```javascript
|
|
33
|
+
import { createBanner } from '@adstage/web-sdk';
|
|
37
34
|
|
|
38
|
-
|
|
39
|
-
|
|
35
|
+
// HTML에 <div id="banner"></div> 준비 후
|
|
36
|
+
await createBanner('banner');
|
|
37
|
+
```
|
|
40
38
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
<MyComponent />
|
|
45
|
-
</AdStageProvider>
|
|
46
|
-
);
|
|
47
|
-
}
|
|
39
|
+
### 3. 이벤트 추적
|
|
40
|
+
```javascript
|
|
41
|
+
import { trackEvent } from '@adstage/web-sdk';
|
|
48
42
|
|
|
49
|
-
|
|
50
|
-
const { sdk, isLoading, isInitialized } = useAdStage();
|
|
51
|
-
|
|
52
|
-
// SDK 사용...
|
|
53
|
-
}
|
|
43
|
+
trackEvent('button_click', { page: 'home' });
|
|
54
44
|
```
|
|
55
45
|
|
|
56
|
-
##
|
|
57
|
-
|
|
58
|
-
- BANNER: 배너 광고
|
|
59
|
-
- SLIDER: 슬라이더 광고
|
|
60
|
-
- TEXT: 텍스트 광고
|
|
61
|
-
- NATIVE: 네이티브 광고
|
|
62
|
-
- VIDEO: 비디오 광고
|
|
46
|
+
## 📋 API 레퍼런스
|
|
63
47
|
|
|
64
|
-
|
|
48
|
+
### 초기화
|
|
49
|
+
- `initAdStage(config)` - SDK 초기화
|
|
50
|
+
- `isAdStageReady()` - 초기화 상태 확인
|
|
65
51
|
|
|
66
|
-
|
|
52
|
+
### 광고 생성
|
|
53
|
+
- `createBanner(containerId, options?)` - 배너 광고
|
|
54
|
+
- `createTextAd(containerId, options?)` - 텍스트 광고
|
|
55
|
+
- `createVideoAd(containerId, options?)` - 비디오 광고
|
|
67
56
|
|
|
68
|
-
|
|
57
|
+
### 유틸리티
|
|
58
|
+
- `trackEvent(name, params?)` - 이벤트 추적
|
|
59
|
+
- `getAdStageInstance()` - SDK 인스턴스 (고급)
|
|
60
|
+
- `destroyAdStage()` - SDK 정리
|
|
69
61
|
|
|
70
|
-
|
|
62
|
+
자세한 사용법은 [STANDALONE_GUIDE.md](./STANDALONE_GUIDE.md)를 참고하세요.
|