@pagepact/interactive-ad-sdk 1.0.0 → 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 +2 -2
- package/example/index.html +14 -6
- package/index.d.ts +18 -0
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -12,7 +12,7 @@ A modern, framework-agnostic interactive advertisement web component. It allows
|
|
|
12
12
|
## Installation
|
|
13
13
|
|
|
14
14
|
```bash
|
|
15
|
-
npm install interactive-ad-sdk
|
|
15
|
+
npm install @pagepact/interactive-ad-sdk
|
|
16
16
|
```
|
|
17
17
|
|
|
18
18
|
## Usage
|
|
@@ -20,7 +20,7 @@ npm install interactive-ad-sdk
|
|
|
20
20
|
Simply import the SDK into your project's main entry file (e.g. `main.js`, `App.jsx`, or `_app.js`). This registers the `<interactive-ad>` tag.
|
|
21
21
|
|
|
22
22
|
```javascript
|
|
23
|
-
import 'interactive-ad-sdk';
|
|
23
|
+
import '@pagepact/interactive-ad-sdk';
|
|
24
24
|
```
|
|
25
25
|
|
|
26
26
|
Then, you can use the `<interactive-ad>` HTML tag anywhere in your application!
|
package/example/index.html
CHANGED
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang="en">
|
|
3
|
+
|
|
3
4
|
<head>
|
|
4
5
|
<meta charset="UTF-8">
|
|
5
6
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
7
|
<title>Interactive Ad SDK Example</title>
|
|
7
8
|
</head>
|
|
9
|
+
|
|
8
10
|
<body style="background: #f0f2f5; margin: 0; padding: 40px; font-family: sans-serif;">
|
|
9
11
|
|
|
10
12
|
<h1>Interactive Advertisement SDK Test</h1>
|
|
@@ -13,25 +15,30 @@
|
|
|
13
15
|
<interactive-ad variant="rectangle" ad-id="test-campaign-001">
|
|
14
16
|
<!-- Simulating a Google Ad or injected creative -->
|
|
15
17
|
<a href="https://example.com" target="_blank">
|
|
16
|
-
<img src="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&w=300&h=250&q=80"
|
|
18
|
+
<img src="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&w=300&h=250&q=80"
|
|
19
|
+
alt="Super Fast Cloud Hosting" style="width: 100%; height: 100%; object-fit: cover;" />
|
|
17
20
|
</a>
|
|
18
21
|
</interactive-ad>
|
|
19
22
|
|
|
20
|
-
<br
|
|
23
|
+
<br>
|
|
24
|
+
<hr><br>
|
|
21
25
|
|
|
22
26
|
<h2 style="color: #4a5568; margin-bottom: 10px;">2. Leaderboard (728x90)</h2>
|
|
23
27
|
<interactive-ad variant="leaderboard" ad-id="test-campaign-002">
|
|
24
28
|
<a href="https://example.com" target="_blank">
|
|
25
|
-
<img src="https://images.unsplash.com/photo-1504868584819-f8e8b4b6d7e3?auto=format&fit=crop&w=728&h=90&q=80"
|
|
29
|
+
<img src="https://images.unsplash.com/photo-1504868584819-f8e8b4b6d7e3?auto=format&fit=crop&w=728&h=90&q=80"
|
|
30
|
+
alt="Summer Sale" style="width: 100%; height: 100%; object-fit: cover;" />
|
|
26
31
|
</a>
|
|
27
32
|
</interactive-ad>
|
|
28
33
|
|
|
29
|
-
<br
|
|
34
|
+
<br>
|
|
35
|
+
<hr><br>
|
|
30
36
|
|
|
31
37
|
<h2 style="color: #4a5568; margin-bottom: 10px;">3. Skyscraper (160x600)</h2>
|
|
32
38
|
<interactive-ad variant="skyscraper" ad-id="test-campaign-003">
|
|
33
39
|
<a href="https://example.com" target="_blank">
|
|
34
|
-
<img src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=160&h=600&q=80"
|
|
40
|
+
<img src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=160&h=600&q=80"
|
|
41
|
+
alt="Premium Support" style="width: 100%; height: 100%; object-fit: cover;" />
|
|
35
42
|
</a>
|
|
36
43
|
</interactive-ad>
|
|
37
44
|
|
|
@@ -42,4 +49,5 @@
|
|
|
42
49
|
import '../src/index.js';
|
|
43
50
|
</script>
|
|
44
51
|
</body>
|
|
45
|
-
|
|
52
|
+
|
|
53
|
+
</html>
|
package/index.d.ts
ADDED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
// Type definitions for @pagepact/interactive-ad-sdk
|
|
2
|
+
|
|
3
|
+
declare global {
|
|
4
|
+
// Enables: document.createElement('interactive-ad') in TS
|
|
5
|
+
interface HTMLElementTagNameMap {
|
|
6
|
+
'interactive-ad': HTMLElement;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
// Enables: <interactive-ad /> in JSX (React, Next.js, Solid, etc.)
|
|
10
|
+
// We use `any` to avoid forcing a dependency on @types/react for non-React users.
|
|
11
|
+
namespace JSX {
|
|
12
|
+
interface IntrinsicElements {
|
|
13
|
+
'interactive-ad': any;
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pagepact/interactive-ad-sdk",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "A framework-agnostic interactive advertisement web component with Firebase integration.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/interactive-ad-sdk.umd.cjs",
|
|
7
7
|
"module": "./dist/interactive-ad-sdk.js",
|
|
8
|
+
"types": "./index.d.ts",
|
|
8
9
|
"exports": {
|
|
9
10
|
".": {
|
|
10
11
|
"import": "./dist/interactive-ad-sdk.js",
|