@smoud/playable-sdk 1.0.1 → 1.0.2
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 +64 -54
- package/dist/esm/index.js +2 -6
- package/dist/iife/index.js +2 -6
- package/dist/index.js +2 -6
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
# @smoud/playable-sdk
|
|
2
2
|
|
|
3
|
-
[](https://
|
|
4
|
-
[](https://
|
|
3
|
+
[](https://www.npmjs.com/package/@smoud/playable-sdk)
|
|
4
|
+
[](https://www.npmjs.com/package/@smoud/playable-sdk)
|
|
5
|
+
[](https://www.npmjs.com/package/@smoud/playable-sdk)
|
|
6
|
+
[](https://deepscan.io/dashboard#view=project&tid=19616&pid=29066&bid=935410)
|
|
7
|
+
[](https://opensource.org/license/MIT)
|
|
5
8
|
|
|
6
9
|
It's powerful, unified SDK that seamlessly integrates multiple ad network SDKs, including MRAID, Google, Facebook, Vungle, and many more. Designed for effortless playable ad development, it provides a standardized interface, ensuring compatibility, optimization, and easy deployment across various platforms. With @smoud/playable-sdk, you can streamline your workflow, maximize reach, and focus on crafting engaging interactive ads without worrying about SDK fragmentation. 🚀
|
|
7
10
|
|
|
@@ -51,20 +54,61 @@ The SDK automatically detects and adapts to the appropriate ad network protocol:
|
|
|
51
54
|
npm install @smoud/playable-sdk
|
|
52
55
|
```
|
|
53
56
|
|
|
57
|
+
## Quick Start
|
|
58
|
+
|
|
59
|
+
```javascript
|
|
60
|
+
import { sdk } from '@smoud/playable-sdk';
|
|
61
|
+
|
|
62
|
+
// Initialize the SDK as early as possible
|
|
63
|
+
sdk.init((width, height) => {
|
|
64
|
+
// Initialize your game/app with container dimensions
|
|
65
|
+
new Game(width, height);
|
|
66
|
+
});
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
```javascript
|
|
70
|
+
// Listen for events
|
|
71
|
+
sdk.on('resize', (width, height) => {
|
|
72
|
+
game.resize(width, height);
|
|
73
|
+
});
|
|
74
|
+
|
|
75
|
+
sdk.on('pause', game.pause, game);
|
|
76
|
+
sdk.on('resume', game.resume, game);
|
|
77
|
+
sdk.on('volume', game.volume, game);
|
|
78
|
+
sdk.on('finish', game.finish, game);
|
|
79
|
+
|
|
80
|
+
sdk.on('interaction', (count) => {
|
|
81
|
+
console.log(`User interaction count: ${count}`);
|
|
82
|
+
});
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
```javascript
|
|
86
|
+
// Start the playable when resources are loaded
|
|
87
|
+
sdk.start();
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
```javascript
|
|
91
|
+
// Mark playable as complete
|
|
92
|
+
sdk.finish();
|
|
93
|
+
|
|
94
|
+
// Handle install/download action
|
|
95
|
+
installButton.onclick = () => sdk.install();
|
|
96
|
+
```
|
|
97
|
+
|
|
54
98
|
## Build
|
|
55
99
|
|
|
56
|
-
###
|
|
100
|
+
### @smoud/playable-scripts
|
|
57
101
|
|
|
58
|
-
`@smoud/playable-sdk` works best with the
|
|
102
|
+
`@smoud/playable-sdk` works best with the [`@smoud/playable-scripts`](https://www.npmjs.com/package/@smoud/playable-scripts) package, which helps you prepare **playable ad builds** that are ready for multiple ad networks. Using `playable-scripts` provides key benefits:
|
|
59
103
|
|
|
60
104
|
- 🚀 **One-Command Build Process** – Easily generate builds for different ad networks.
|
|
61
105
|
- ⚡ **Automatic Optimizations** – Includes minification, tree-shaking, and dead code elimination.
|
|
62
|
-
- 🎯 **Pre-configured for Major Ad Networks** – Works out of the box with **Google Ads, Meta (Facebook), AppLovin, Unity, IronSource, Vungle, Mintegral, and more**.
|
|
106
|
+
- 🎯 **Pre-configured for Major Ad Networks** – Works out of the box with **Google Ads, Meta (Facebook), AppLovin, Unity, IronSource, Vungle, Mintegral, and many more**.
|
|
63
107
|
- 🛠️ **Customizable** – Extend the default build pipeline as needed.
|
|
64
108
|
|
|
65
109
|
### 🔧 Quick Start
|
|
66
110
|
|
|
67
|
-
#### 1️⃣ Install
|
|
111
|
+
#### 1️⃣ Install `@smoud/playable-scripts`
|
|
68
112
|
|
|
69
113
|
Install the package in your project:
|
|
70
114
|
|
|
@@ -100,6 +144,7 @@ npm run build <ad-network>
|
|
|
100
144
|
```
|
|
101
145
|
|
|
102
146
|
##### Examples:
|
|
147
|
+
|
|
103
148
|
To build for **Applovin**, run:
|
|
104
149
|
|
|
105
150
|
```sh
|
|
@@ -109,7 +154,7 @@ npm run build applovin
|
|
|
109
154
|
To build for **IronSource DAPI**, run:
|
|
110
155
|
|
|
111
156
|
```sh
|
|
112
|
-
npm run build ironsource -- --dapi
|
|
157
|
+
npm run build ironsource -- --protocol dapi
|
|
113
158
|
```
|
|
114
159
|
|
|
115
160
|
Supported **Ad Networks**:
|
|
@@ -120,6 +165,7 @@ Supported **Ad Networks**:
|
|
|
120
165
|
- `ironsource`
|
|
121
166
|
- `facebook`
|
|
122
167
|
- `moloco`
|
|
168
|
+
- `adcolony`
|
|
123
169
|
- `mintegral`
|
|
124
170
|
- `vungle`
|
|
125
171
|
- `tapjoy`
|
|
@@ -133,11 +179,12 @@ Supported **Ad Networks**:
|
|
|
133
179
|
|
|
134
180
|
## Custom Build Pipeline
|
|
135
181
|
|
|
136
|
-
Before setting up a custom pipeline, consider using
|
|
182
|
+
Before setting up a custom pipeline, consider using `@smoud/playable-scripts`. It provides an API to extend the standard build function and simplifies the process. See details [here](https://github.com/smoudjs/playable-scripts).
|
|
137
183
|
|
|
138
184
|
If you still prefer a fully custom build, you need to manage the following aspects yourself:
|
|
139
185
|
|
|
140
186
|
### 1️⃣ Define Required Variables
|
|
187
|
+
|
|
141
188
|
Your build script should replace or define these variables within the `window` object before the rest of your code executes:
|
|
142
189
|
|
|
143
190
|
```ts
|
|
@@ -149,61 +196,23 @@ BUILD_HASH = 'random-build-hash';
|
|
|
149
196
|
```
|
|
150
197
|
|
|
151
198
|
### 2️ Applying Ad-Specific Adjustments
|
|
199
|
+
|
|
152
200
|
Certain networks use different ad protocols. Ensure that your build includes or removes code based on the network.
|
|
153
201
|
|
|
154
202
|
Check [Ad Network Resources & Requirements](#Ad-Network-Resources-&-Requirements) for more details.
|
|
155
203
|
|
|
156
204
|
### 3️⃣ Minification & Optimization
|
|
157
|
-
|
|
205
|
+
|
|
206
|
+
To ensure the best performance, your build should include a **JavaScript minimizer** to remove unnecessary code.
|
|
158
207
|
|
|
159
208
|
#### Recommended Tools:
|
|
209
|
+
|
|
160
210
|
- [Terser](https://github.com/terser/terser) – Best for JS minification.
|
|
161
211
|
- [UglifyJS](https://github.com/mishoo/UglifyJS) – Alternative for JS compression.
|
|
162
212
|
|
|
163
|
-
## Quick Start
|
|
164
|
-
|
|
165
|
-
```javascript
|
|
166
|
-
import { sdk } from '@smoud/playable-sdk';
|
|
167
|
-
|
|
168
|
-
// Initialize the SDK as early as possible
|
|
169
|
-
sdk.init((width, height) => {
|
|
170
|
-
// Initialize your game/app with container dimensions
|
|
171
|
-
new Game(width, height);
|
|
172
|
-
});
|
|
173
|
-
```
|
|
174
|
-
|
|
175
|
-
```javascript
|
|
176
|
-
// Listen for events
|
|
177
|
-
sdk.on('resize', (width, height) => {
|
|
178
|
-
game.resize(width, height);
|
|
179
|
-
});
|
|
180
|
-
|
|
181
|
-
sdk.on('pause', game.pause, game);
|
|
182
|
-
sdk.on('resume', game.resume, game);
|
|
183
|
-
sdk.on('volume', game.volume, game);
|
|
184
|
-
sdk.on('finish', game.finish, game);
|
|
185
|
-
|
|
186
|
-
sdk.on('interaction', (count) => {
|
|
187
|
-
console.log(`User interaction count: ${count}`);
|
|
188
|
-
});
|
|
189
|
-
```
|
|
190
|
-
|
|
191
|
-
```javascript
|
|
192
|
-
// Start the playable when resources are loaded
|
|
193
|
-
sdk.start();
|
|
194
|
-
```
|
|
195
|
-
|
|
196
|
-
```javascript
|
|
197
|
-
// Mark playable as complete
|
|
198
|
-
sdk.finish();
|
|
199
|
-
|
|
200
|
-
// Handle install/download action
|
|
201
|
-
installButton.onclick = () => sdk.install();
|
|
202
|
-
```
|
|
203
|
-
|
|
204
213
|
## SDK API Reference
|
|
205
214
|
|
|
206
|
-
### Lifecycle
|
|
215
|
+
### Lifecycle management & typical usage
|
|
207
216
|
|
|
208
217
|
The SDK provides a comprehensive set of functions to manage the playable ad lifecycle. Functions should be called in the following order:
|
|
209
218
|
|
|
@@ -214,9 +223,6 @@ The SDK provides a comprehensive set of functions to manage the playable ad life
|
|
|
214
223
|
sdk.init((width, height) => {
|
|
215
224
|
// Setup your app with container dimensions
|
|
216
225
|
});
|
|
217
|
-
|
|
218
|
-
// Start playable after resources are loaded
|
|
219
|
-
sdk.start();
|
|
220
226
|
```
|
|
221
227
|
|
|
222
228
|
2. **Listen for needed events**
|
|
@@ -257,7 +263,9 @@ The SDK provides a comprehensive set of functions to manage the playable ad life
|
|
|
257
263
|
ui.showEndScreen();
|
|
258
264
|
});
|
|
259
265
|
```
|
|
266
|
+
|
|
260
267
|
#### Optional events
|
|
268
|
+
|
|
261
269
|
```javascript
|
|
262
270
|
sdk.on('init', () => {
|
|
263
271
|
// Show loading screen while SDK initializes
|
|
@@ -310,7 +318,9 @@ The SDK provides a comprehensive set of functions to manage the playable ad life
|
|
|
310
318
|
```javascript
|
|
311
319
|
// Mark playable as complete
|
|
312
320
|
sdk.finish();
|
|
321
|
+
```
|
|
313
322
|
|
|
323
|
+
```javascript
|
|
314
324
|
// Trigger install/store redirect
|
|
315
325
|
sdk.install();
|
|
316
326
|
```
|
package/dist/esm/index.js
CHANGED
|
@@ -254,16 +254,12 @@ function startDefaultProtocol() {
|
|
|
254
254
|
}
|
|
255
255
|
document.addEventListener("visibilitychange", () => {
|
|
256
256
|
if (document.visibilityState === "visible") {
|
|
257
|
-
|
|
258
|
-
handleResume();
|
|
259
|
-
} else {
|
|
260
|
-
bootAd();
|
|
261
|
-
}
|
|
257
|
+
handleResume();
|
|
262
258
|
} else {
|
|
263
259
|
handlePause();
|
|
264
260
|
}
|
|
265
261
|
});
|
|
266
|
-
if (document.readyState === "complete"
|
|
262
|
+
if (document.readyState === "complete") {
|
|
267
263
|
bootAd();
|
|
268
264
|
} else {
|
|
269
265
|
window.addEventListener("load", () => {
|
package/dist/iife/index.js
CHANGED
|
@@ -256,16 +256,12 @@
|
|
|
256
256
|
}
|
|
257
257
|
document.addEventListener("visibilitychange", () => {
|
|
258
258
|
if (document.visibilityState === "visible") {
|
|
259
|
-
|
|
260
|
-
handleResume();
|
|
261
|
-
} else {
|
|
262
|
-
bootAd();
|
|
263
|
-
}
|
|
259
|
+
handleResume();
|
|
264
260
|
} else {
|
|
265
261
|
handlePause();
|
|
266
262
|
}
|
|
267
263
|
});
|
|
268
|
-
if (document.readyState === "complete"
|
|
264
|
+
if (document.readyState === "complete") {
|
|
269
265
|
bootAd();
|
|
270
266
|
} else {
|
|
271
267
|
window.addEventListener("load", () => {
|
package/dist/index.js
CHANGED
|
@@ -281,16 +281,12 @@ function startDefaultProtocol() {
|
|
|
281
281
|
}
|
|
282
282
|
document.addEventListener("visibilitychange", () => {
|
|
283
283
|
if (document.visibilityState === "visible") {
|
|
284
|
-
|
|
285
|
-
handleResume();
|
|
286
|
-
} else {
|
|
287
|
-
bootAd();
|
|
288
|
-
}
|
|
284
|
+
handleResume();
|
|
289
285
|
} else {
|
|
290
286
|
handlePause();
|
|
291
287
|
}
|
|
292
288
|
});
|
|
293
|
-
if (document.readyState === "complete"
|
|
289
|
+
if (document.readyState === "complete") {
|
|
294
290
|
bootAd();
|
|
295
291
|
} else {
|
|
296
292
|
window.addEventListener("load", () => {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@smoud/playable-sdk",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "It's unified Playable SDK that supports MRAID, Google, Facebook, Vungle, and many more Ad Networks, simplifying playable ad development with a standardized interface for seamless cross-network compatibility.",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
"scripts": {
|
|
23
23
|
"build": "npx tsup src/index.ts --format esm,cjs,iife --out-dir dist --legacy-output --dts --clean",
|
|
24
24
|
"test": "jest",
|
|
25
|
-
"
|
|
25
|
+
"deploy": "npm run test && npm run build && npm publish --access public"
|
|
26
26
|
},
|
|
27
27
|
"author": "Smoud",
|
|
28
28
|
"license": "MIT",
|