qb-pc-sdk 1.2.9 → 1.3.0
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 +149 -430
- package/core.min.js +1 -1
- package/index.js +279 -0
- package/inline-loader.js +1 -0
- package/package.json +6 -6
- package/src/ad-sdk-wrapper.js +846 -0
- package/src/example-simple.html +133 -0
- package/inline-loader-cdn.js +0 -1
- package/loader.min.js +0 -1
package/README.md
CHANGED
|
@@ -4,7 +4,6 @@ pc广告 SDK 封装器 - PC端广告接入工具
|
|
|
4
4
|
|
|
5
5
|
> ✅ **系统兼容性**:SDK 会自动检测运行环境,仅在 Windows 系统下加载广告。在 Mac、Linux、移动端等非 Windows 环境下会静默处理,不会报错,页面可正常使用。
|
|
6
6
|
|
|
7
|
-
|
|
8
7
|
## 适用场景
|
|
9
8
|
|
|
10
9
|
### ✅ 支持的场景
|
|
@@ -12,6 +11,7 @@ pc广告 SDK 封装器 - PC端广告接入工具
|
|
|
12
11
|
#### 1. PC 端网页(浏览器环境)
|
|
13
12
|
|
|
14
13
|
**完全支持,推荐使用:**
|
|
14
|
+
|
|
15
15
|
- ✅ **Windows 系统下的所有浏览器**
|
|
16
16
|
- Chrome、Edge、Firefox、360 浏览器、QQ 浏览器、搜狗浏览器等
|
|
17
17
|
- 支持所有现代浏览器(IE 11+)
|
|
@@ -41,12 +41,13 @@ pc广告 SDK 封装器 - PC端广告接入工具
|
|
|
41
41
|
- ⚠️ **注意事项**
|
|
42
42
|
- 确保 WebView 运行在 Windows 系统上(Mac/Linux 上运行会静默处理)
|
|
43
43
|
- 确保网络连接正常(需要加载 CDN 资源)
|
|
44
|
-
- 如果应用有 CSP
|
|
44
|
+
- 如果应用有 CSP(内容安全策略)限制,需要允许域名
|
|
45
45
|
|
|
46
46
|
**接入示例(Electron):**
|
|
47
|
+
|
|
47
48
|
```javascript
|
|
48
49
|
// main.js
|
|
49
|
-
const { app, BrowserWindow } = require(
|
|
50
|
+
const { app, BrowserWindow } = require("electron");
|
|
50
51
|
|
|
51
52
|
function createWindow() {
|
|
52
53
|
const win = new BrowserWindow({
|
|
@@ -54,12 +55,12 @@ function createWindow() {
|
|
|
54
55
|
height: 800,
|
|
55
56
|
webPreferences: {
|
|
56
57
|
nodeIntegration: false,
|
|
57
|
-
contextIsolation: true
|
|
58
|
-
}
|
|
58
|
+
contextIsolation: true,
|
|
59
|
+
},
|
|
59
60
|
});
|
|
60
|
-
|
|
61
|
+
|
|
61
62
|
// 加载包含广告的网页
|
|
62
|
-
win.loadURL(
|
|
63
|
+
win.loadURL("https://your-website.com");
|
|
63
64
|
}
|
|
64
65
|
|
|
65
66
|
app.whenReady().then(createWindow);
|
|
@@ -67,20 +68,23 @@ app.whenReady().then(createWindow);
|
|
|
67
68
|
|
|
68
69
|
```html
|
|
69
70
|
<!-- 在您的网页中正常使用 SDK(内联版本,容灾100%达成) -->
|
|
70
|
-
<ins
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
71
|
+
<ins
|
|
72
|
+
class="qb-adsbyqubian"
|
|
73
|
+
style="display:block; width:400px; height:220px;"
|
|
74
|
+
data-app-id="your-app-id"
|
|
75
|
+
data-placement-id="your-placement-id"
|
|
76
|
+
>
|
|
74
77
|
</ins>
|
|
78
|
+
<script src="https://unpkg.com/qb-pc-sdk@latest/core.min.js"></script>
|
|
75
79
|
<script>
|
|
76
|
-
(
|
|
80
|
+
(window.qbAds = window.qbAds || []).push({});
|
|
77
81
|
</script>
|
|
78
|
-
<script>(window.qbAds = window.qbAds || []).push({});</script>
|
|
79
82
|
```
|
|
80
83
|
|
|
81
84
|
#### 3. 第三方建站平台
|
|
82
85
|
|
|
83
86
|
**完全支持,推荐使用即插即用模式:**
|
|
87
|
+
|
|
84
88
|
- ✅ WordPress、Discuz!、Drupal、Joomla 等 CMS
|
|
85
89
|
- ✅ 凡科建站、建站之星等可视化建站工具
|
|
86
90
|
- ✅ 有赞、微盟等电商平台
|
|
@@ -97,109 +101,32 @@ app.whenReady().then(createWindow);
|
|
|
97
101
|
### 🔍 环境检测机制
|
|
98
102
|
|
|
99
103
|
SDK 会自动检测运行环境:
|
|
104
|
+
|
|
100
105
|
- **Windows 系统**:✅ 正常加载和显示广告
|
|
101
106
|
- **非 Windows 系统**:✅ 静默处理,不发起广告请求,页面正常运行,不会报错
|
|
102
107
|
|
|
103
108
|
**检测逻辑:**
|
|
109
|
+
|
|
104
110
|
- 通过 `navigator.platform` 和 `navigator.userAgent` 检测操作系统
|
|
105
111
|
- 仅在检测到 Windows 系统时加载广告
|
|
106
112
|
- 其他环境(Mac、Linux、移动端)自动跳过,不报错,不影响页面正常使用
|
|
107
113
|
|
|
108
114
|
## 安装
|
|
109
115
|
|
|
110
|
-
### ⭐ CDN
|
|
111
|
-
|
|
112
|
-
**推荐所有客户使用 CDN 内联代码模式对接**,这是最简单、最可靠、容灾效果最好的接入方式。
|
|
113
|
-
|
|
114
|
-
#### ⭐ 内联版本(最推荐,容灾100%达成)
|
|
115
|
-
|
|
116
|
-
**为什么推荐内联模式?**
|
|
117
|
-
- ✅ **容灾100%达成**:即使主 CDN 域名挂了,内联代码依然会运行并自动切换到备用 CDN
|
|
118
|
-
- ✅ **2秒超时保护**:如果主 CDN 2秒内没有响应,自动切换到备用 CDN,避免长时间等待
|
|
119
|
-
- ✅ **极简内联代码**:内联代码只负责容灾和异步加载,代码极小(约 0.4KB),几乎不阻塞页面
|
|
120
|
-
- ✅ **无需维护外部文件**:逻辑直接内联在 HTML 中,不依赖外部文件,部署简单
|
|
121
|
-
- ✅ **自动版本更新**:使用 `@latest` 自动获取最新版本,无需手动更新代码
|
|
122
|
-
- ✅ **环境检测自动更新**:Windows/Mac 环境检测逻辑在 `loader.min.js` 中,未来支持 Mac 时客户无需修改内联代码
|
|
123
|
-
- ✅ **一次接入,永久有效**:客户只需复制粘贴一次内联代码,后续所有功能更新(包括环境检测逻辑)自动生效
|
|
124
|
-
- ✅ **完全异步加载**:使用 `async` 属性,不阻塞页面渲染
|
|
116
|
+
### ⭐ CDN 模式
|
|
125
117
|
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
**使用方法:**
|
|
129
|
-
|
|
130
|
-
```html
|
|
131
|
-
<script>
|
|
132
|
-
(function(g){"use strict";var w=g&&g.window?g.window:(typeof window!=="undefined"?window:g),d=w.document;if(!d||w._qbPcSdkLoading||w.AdSDK)return;var pr="https://unpkg.com/qb-pc-sdk@latest/loader.min.js",fb="https://file.qubiankeji.com/qb-pc-sdk/loader.min.js";var loaded=false;var timeoutId=setTimeout(function(){if(!loaded&&fb&&!d.querySelector('script[src="'+fb+'"]')){loaded=true;var fs=d.createElement("script");fs.src=fb;fs.async=true;fs.onerror=function(){w._qbPcSdkLoading=false;w.dispatchEvent(new CustomEvent("qb-pc-sdk-ready",{detail:{error:new Error("SDK加载失败"),AdSDK:null,GDTAdSDK:null}}));};d.head.appendChild(fs);}},2000);var s=d.createElement("script");s.src=pr;s.async=true;s.onload=function(){if(!loaded){loaded=true;clearTimeout(timeoutId);}};s.onerror=function(){if(!loaded){loaded=true;clearTimeout(timeoutId);if(fb&&!d.querySelector('script[src="'+fb+'"]')){var fs=d.createElement("script");fs.src=fb;fs.async=true;fs.onerror=function(){w._qbPcSdkLoading=false;w.dispatchEvent(new CustomEvent("qb-pc-sdk-ready",{detail:{error:new Error("SDK加载失败"),AdSDK:null,GDTAdSDK:null}}));};d.head.appendChild(fs);}else{w._qbPcSdkLoading=false;w.dispatchEvent(new CustomEvent("qb-pc-sdk-ready",{detail:{error:new Error("SDK加载失败"),AdSDK:null,GDTAdSDK:null}}));}}};d.head.appendChild(s);})(typeof window!=="undefined"?window:(typeof global!=="undefined"?global:this));
|
|
133
|
-
</script>
|
|
134
|
-
```
|
|
135
|
-
|
|
136
|
-
**架构说明:**
|
|
137
|
-
- **内联代码**(客户复制粘贴):
|
|
138
|
-
- 只负责容灾判断(2秒超时)和异步加载 `loader.min.js`
|
|
139
|
-
- 代码极小(约 0.4KB),执行时间 < 1ms,几乎不阻塞页面
|
|
140
|
-
- **客户只需复制粘贴一次,永久有效**
|
|
141
|
-
- **loader.min.js**(从CDN自动加载,约 2.3KB):
|
|
142
|
-
- 包含 Windows/Mac 环境检测逻辑
|
|
143
|
-
- 包含加载 `core.min.js` 的完整逻辑和2秒超时机制
|
|
144
|
-
- 主 CDN:`https://unpkg.com/qb-pc-sdk@latest/loader.min.js`
|
|
145
|
-
- 备用 CDN:`https://file.qubiankeji.com/qb-pc-sdk/loader.min.js`
|
|
146
|
-
- **自动热更新**:使用 `@latest` 自动获取最新版本,包含最新的环境检测逻辑
|
|
147
|
-
- **core.min.js**(从CDN自动加载,约 300KB):
|
|
148
|
-
- SDK核心功能
|
|
149
|
-
- 主 CDN:`https://unpkg.com/qb-pc-sdk@latest/core.min.js`
|
|
150
|
-
- 备用 CDN:`https://file.qubiankeji.com/qb-pc-sdk/core.min.js`
|
|
151
|
-
- **自动热更新**:使用 `@latest` 自动获取最新版本
|
|
152
|
-
|
|
153
|
-
**核心优势:**
|
|
154
|
-
- ✅ **一次接入,永久有效**:客户只需复制粘贴一次内联代码,后续所有功能更新(包括环境检测逻辑、SDK功能)自动生效
|
|
155
|
-
- ✅ **未来扩展无需修改**:如果未来支持 Mac 端展示广告,只需更新 `loader.min.js`,客户无需修改任何内联代码
|
|
156
|
-
- ✅ **完全异步加载**:不阻塞页面渲染,不影响首屏加载速度
|
|
157
|
-
- ✅ **推荐用于所有生产环境**
|
|
118
|
+
<script src="https://unpkg.com/qb-pc-sdk@latest/core.min.js" defer></script>
|
|
158
119
|
|
|
120
|
+
````
|
|
159
121
|
### NPM 方式(模块化项目推荐)
|
|
160
122
|
|
|
161
123
|
适用于 Vue、React、Webpack、Vite 等模块化打包项目。**仅需安装 `qb-pc-sdk`,无需单独安装或引入 `qb-pc-ad-sdk-origin`**(底层 SDK 已作为依赖自动集成)。
|
|
162
124
|
|
|
163
125
|
```bash
|
|
164
126
|
npm install qb-pc-sdk
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
**注意:** 对于静态 HTML 网站或建站平台,**强烈推荐使用 CDN 内联代码模式**,而不是 NPM 方式。
|
|
168
|
-
|
|
169
|
-
### 异步加载说明
|
|
170
|
-
|
|
171
|
-
**内联引导器已完全支持异步加载:**
|
|
172
|
-
|
|
173
|
-
1. **内联代码本身**:代码极小(约 0.5KB),执行时间 < 1ms,几乎不阻塞页面
|
|
174
|
-
2. **loader.min.js 加载**:使用 `async = true` 异步加载,不阻塞页面渲染
|
|
175
|
-
3. **core.min.js 加载**:由 loader.min.js 异步加载,不阻塞页面渲染
|
|
176
|
-
4. **2秒超时保护**:如果主 CDN 2秒内没有响应,自动切换到备用 CDN,避免长时间等待
|
|
127
|
+
````
|
|
177
128
|
|
|
178
|
-
|
|
179
|
-
- ✅ **最佳**:放在 `</body>` 标签之前,页面内容先渲染
|
|
180
|
-
- ✅ **也可以**:放在 `<head>` 中,由于代码极小且异步,影响很小
|
|
181
|
-
|
|
182
|
-
**示例(推荐放在页面底部):**
|
|
183
|
-
|
|
184
|
-
```html
|
|
185
|
-
<!DOCTYPE html>
|
|
186
|
-
<html>
|
|
187
|
-
<head>
|
|
188
|
-
<meta charset="UTF-8">
|
|
189
|
-
<title>页面标题</title>
|
|
190
|
-
</head>
|
|
191
|
-
<body>
|
|
192
|
-
<!-- 页面内容 -->
|
|
193
|
-
|
|
194
|
-
<!-- 内联代码放在 </body> 之前(推荐) -->
|
|
195
|
-
<script>
|
|
196
|
-
(function(g){"use strict";...})();
|
|
197
|
-
</script>
|
|
198
|
-
</body>
|
|
199
|
-
</html>
|
|
200
|
-
```
|
|
201
|
-
|
|
202
|
-
## 使用方法
|
|
129
|
+
**注意:** 对于静态 HTML 网站或建站平台,**强烈推荐使用 CDN 模式**,而不是 NPM 方式。
|
|
203
130
|
|
|
204
131
|
### 方式一:NPM 接入(模块化项目)
|
|
205
132
|
|
|
@@ -208,21 +135,21 @@ npm install qb-pc-sdk
|
|
|
208
135
|
#### 1. 基本用法(ES6 模块)
|
|
209
136
|
|
|
210
137
|
```javascript
|
|
211
|
-
import AdSDK from
|
|
138
|
+
import AdSDK from "qb-pc-sdk";
|
|
212
139
|
|
|
213
140
|
const adSDK = new AdSDK({
|
|
214
|
-
appId:
|
|
215
|
-
placementId:
|
|
216
|
-
container:
|
|
141
|
+
appId: "your-app-id", // 必填,替换为平台申请的应用 ID
|
|
142
|
+
placementId: "your-placement-id", // 必填,替换为平台申请的广告位 ID
|
|
143
|
+
container: "#ad-container", // 必填,广告挂载的容器:CSS 选择器或 DOM 元素
|
|
217
144
|
onAdLoaded: (ad) => {
|
|
218
|
-
console.log(
|
|
145
|
+
console.log("✅ 广告加载成功", ad);
|
|
219
146
|
const size = adSDK.getAdSize(); // 可获取当前广告尺寸
|
|
220
147
|
},
|
|
221
148
|
onAdError: (error, message) => {
|
|
222
|
-
console.error(
|
|
149
|
+
console.error("❌ 广告加载失败", message);
|
|
223
150
|
},
|
|
224
|
-
onAdExpose: () => console.log(
|
|
225
|
-
onAdClick: () => console.log(
|
|
151
|
+
onAdExpose: () => console.log("👀 广告已曝光"),
|
|
152
|
+
onAdClick: () => console.log("🖱️ 用户点击了广告"),
|
|
226
153
|
});
|
|
227
154
|
|
|
228
155
|
// 页面卸载或组件销毁时调用,避免内存泄漏
|
|
@@ -247,10 +174,10 @@ const adSDK = new AdSDK({
|
|
|
247
174
|
</template>
|
|
248
175
|
|
|
249
176
|
<script>
|
|
250
|
-
import AdSDK from
|
|
177
|
+
import AdSDK from "qb-pc-sdk";
|
|
251
178
|
|
|
252
179
|
export default {
|
|
253
|
-
name:
|
|
180
|
+
name: "AdPage",
|
|
254
181
|
data() {
|
|
255
182
|
return {
|
|
256
183
|
adSDK: null,
|
|
@@ -263,20 +190,20 @@ export default {
|
|
|
263
190
|
if (!container) return;
|
|
264
191
|
|
|
265
192
|
this.adSDK = new AdSDK({
|
|
266
|
-
appId:
|
|
267
|
-
placementId:
|
|
268
|
-
container: container,
|
|
193
|
+
appId: "your-app-id",
|
|
194
|
+
placementId: "your-placement-id",
|
|
195
|
+
container: container, // 推荐传 DOM 元素,避免选择器在 SPA 中拿不到
|
|
269
196
|
onAdLoaded: (ad) => {
|
|
270
|
-
console.log(
|
|
197
|
+
console.log("✅ 广告加载成功", ad);
|
|
271
198
|
},
|
|
272
199
|
onAdError: (error, message) => {
|
|
273
|
-
console.error(
|
|
200
|
+
console.error("❌ 广告加载失败", message);
|
|
274
201
|
},
|
|
275
202
|
});
|
|
276
203
|
});
|
|
277
204
|
},
|
|
278
205
|
beforeDestroy() {
|
|
279
|
-
if (this.adSDK && typeof this.adSDK.destroy ===
|
|
206
|
+
if (this.adSDK && typeof this.adSDK.destroy === "function") {
|
|
280
207
|
this.adSDK.destroy();
|
|
281
208
|
}
|
|
282
209
|
},
|
|
@@ -306,8 +233,8 @@ export default {
|
|
|
306
233
|
</template>
|
|
307
234
|
|
|
308
235
|
<script setup>
|
|
309
|
-
import { ref, onMounted, onBeforeUnmount, nextTick } from
|
|
310
|
-
import AdSDK from
|
|
236
|
+
import { ref, onMounted, onBeforeUnmount, nextTick } from "vue";
|
|
237
|
+
import AdSDK from "qb-pc-sdk";
|
|
311
238
|
|
|
312
239
|
const adContainerRef = ref(null);
|
|
313
240
|
let adSDK = null;
|
|
@@ -318,17 +245,17 @@ onMounted(() => {
|
|
|
318
245
|
if (!container) return;
|
|
319
246
|
|
|
320
247
|
adSDK = new AdSDK({
|
|
321
|
-
appId:
|
|
322
|
-
placementId:
|
|
248
|
+
appId: "your-app-id",
|
|
249
|
+
placementId: "your-placement-id",
|
|
323
250
|
container: container,
|
|
324
|
-
onAdLoaded: (ad) => console.log(
|
|
325
|
-
onAdError: (error, message) => console.error(
|
|
251
|
+
onAdLoaded: (ad) => console.log("✅ 广告加载成功", ad),
|
|
252
|
+
onAdError: (error, message) => console.error("❌ 广告加载失败", message),
|
|
326
253
|
});
|
|
327
254
|
});
|
|
328
255
|
});
|
|
329
256
|
|
|
330
257
|
onBeforeUnmount(() => {
|
|
331
|
-
if (adSDK && typeof adSDK.destroy ===
|
|
258
|
+
if (adSDK && typeof adSDK.destroy === "function") {
|
|
332
259
|
adSDK.destroy();
|
|
333
260
|
}
|
|
334
261
|
});
|
|
@@ -349,13 +276,13 @@ onBeforeUnmount(() => {
|
|
|
349
276
|
|
|
350
277
|
若按上述方式接入后广告仍不展示,可按下面顺序排查:
|
|
351
278
|
|
|
352
|
-
| 可能原因
|
|
353
|
-
|
|
354
|
-
| **容器在实例化时不存在**
|
|
355
|
-
| **容器无宽高**
|
|
356
|
-
| **非 Windows 环境**
|
|
357
|
-
| **appId / placementId 错误** | 确认从平台复制的应用 ID、广告位 ID 与配置一致,且无多余空格。
|
|
358
|
-
| **网络或接口异常**
|
|
279
|
+
| 可能原因 | 处理方式 |
|
|
280
|
+
| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
281
|
+
| **容器在实例化时不存在** | 在 Vue/React 中必须在容器已挂载后再 `new AdSDK()`,例如在 `mounted` + `$nextTick`(Vue2)或 `onMounted` + `nextTick`(Vue3)中创建,并优先传 **DOM 元素**(ref)而不是选择器。 |
|
|
282
|
+
| **容器无宽高** | 给广告容器设置明确的 `width`、`height`(或通过布局保证有尺寸),否则广告可能不渲染。 |
|
|
283
|
+
| **非 Windows 环境** | 本 SDK 仅在 **Windows 系统**下加载广告,Mac/Linux/移动端会静默跳过,属正常行为。 |
|
|
284
|
+
| **appId / placementId 错误** | 确认从平台复制的应用 ID、广告位 ID 与配置一致,且无多余空格。 |
|
|
285
|
+
| **网络或接口异常** | 打开控制台查看是否有 `onAdError` 报错或网络请求失败;若出现 “SDK Load Timeout”,多为打包环境未正确包含底层依赖,可尝试重新安装:`npm install qb-pc-sdk --force`。 |
|
|
359
286
|
|
|
360
287
|
**总结:** NPM 接入只需 `import AdSDK from 'qb-pc-sdk'`,无需再引入 `qb-pc-ad-sdk-origin`;**保证在容器已存在于 DOM 且具有宽高时再创建 AdSDK 实例**,即可正常展示广告。
|
|
361
288
|
|
|
@@ -368,85 +295,80 @@ onBeforeUnmount(() => {
|
|
|
368
295
|
```html
|
|
369
296
|
<!DOCTYPE html>
|
|
370
297
|
<html lang="zh-CN">
|
|
371
|
-
<head>
|
|
372
|
-
<meta charset="UTF-8"
|
|
298
|
+
<head>
|
|
299
|
+
<meta charset="UTF-8" />
|
|
373
300
|
<title>广告示例</title>
|
|
374
301
|
<style>
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
302
|
+
#ad-container {
|
|
303
|
+
width: 400px;
|
|
304
|
+
height: 220px;
|
|
305
|
+
margin: 20px auto;
|
|
306
|
+
}
|
|
380
307
|
</style>
|
|
381
|
-
</head>
|
|
382
|
-
<body>
|
|
308
|
+
</head>
|
|
309
|
+
<body>
|
|
383
310
|
<div id="ad-container"></div>
|
|
311
|
+
<script src="https://unpkg.com/qb-pc-sdk@latest/core.min.js"></script>
|
|
384
312
|
|
|
385
|
-
<!-- 内联版本,容灾100%达成(推荐) -->
|
|
386
|
-
<script>
|
|
387
|
-
(function(g){"use strict";var w=g&&g.window?g.window:(typeof window!=="undefined"?window:g),d=w.document;if(!d||w._qbPcSdkLoading||w.AdSDK)return;var ua=(w.navigator&&w.navigator.userAgent)||"",p=w.navigator.platform||"";if(/Android|iPhone|iPad|iPod|Mac|webOS|BlackBerry|IEMobile|Opera Mini/i.test(ua)||!/Win|Windows/i.test(ua+p))return;w._qbPcSdkLoading=true;var pr="https://unpkg.com/qb-pc-sdk@latest/core.min.js",fb="https://file.qubiankeji.com/qb-pc-sdk/core.min.js";var c=function(){if(w.GDTAdSDK&&w.AdSDK){w._qbPcSdkLoading=false;w.dispatchEvent(new CustomEvent("qb-pc-sdk-ready",{detail:{AdSDK:w.AdSDK,GDTAdSDK:w.GDTAdSDK}}));}else{setTimeout(function(){if(w.GDTAdSDK&&w.AdSDK){w._qbPcSdkLoading=false;w.dispatchEvent(new CustomEvent("qb-pc-sdk-ready",{detail:{AdSDK:w.AdSDK,GDTAdSDK:w.GDTAdSDK}}));}else{w._qbPcSdkLoading=false;w.dispatchEvent(new CustomEvent("qb-pc-sdk-ready",{detail:{error:new Error("SDK初始化失败"),AdSDK:null,GDTAdSDK:null}}));}},100);}};var l=function(p,f){if(d.querySelector('script[src="'+p+'"]')||(f&&d.querySelector('script[src="'+f+'"]'))){c();return;}var loaded=false;var timeoutId=setTimeout(function(){if(!loaded&&f&&!d.querySelector('script[src="'+f+'"]')){loaded=true;var fs=d.createElement("script");fs.src=f;fs.async=true;fs.onload=c;fs.onerror=function(){w._qbPcSdkLoading=false;w.dispatchEvent(new CustomEvent("qb-pc-sdk-ready",{detail:{error:new Error("SDK加载失败"),AdSDK:null,GDTAdSDK:null}}));};d.head.appendChild(fs);}},2000);var s=d.createElement("script");s.src=p;s.async=true;s.onload=function(){if(!loaded){loaded=true;clearTimeout(timeoutId);c();}};s.onerror=function(){if(!loaded){loaded=true;clearTimeout(timeoutId);if(f&&!d.querySelector('script[src="'+f+'"]')){var fs=d.createElement("script");fs.src=f;fs.async=true;fs.onload=c;fs.onerror=function(){w._qbPcSdkLoading=false;w.dispatchEvent(new CustomEvent("qb-pc-sdk-ready",{detail:{error:new Error("SDK加载失败"),AdSDK:null,GDTAdSDK:null}}));};d.head.appendChild(fs);}else{w._qbPcSdkLoading=false;w.dispatchEvent(new CustomEvent("qb-pc-sdk-ready",{detail:{error:new Error("SDK加载失败"),AdSDK:null,GDTAdSDK:null}}));}}};d.head.appendChild(s);};l(pr,fb);})(typeof window!=="undefined"?window:(typeof global!=="undefined"?global:this));
|
|
388
|
-
</script>
|
|
389
|
-
|
|
390
313
|
<!-- 使用 SDK -->
|
|
391
314
|
<script>
|
|
392
|
-
|
|
393
|
-
|
|
315
|
+
// 方式1:等待 SDK 加载完成事件(推荐)
|
|
316
|
+
window.addEventListener("qb-pc-sdk-ready", function () {
|
|
317
|
+
const adSDK = new window.AdSDK({
|
|
318
|
+
appId: "your-app-id", // 替换为您在平台申请的应用ID
|
|
319
|
+
placementId: "your-placement-id", // 替换为您的在平台申请的广告位ID
|
|
320
|
+
container: "#ad-container",
|
|
321
|
+
onAdLoaded: (ad) => {
|
|
322
|
+
console.log("✅ 广告加载成功", ad);
|
|
323
|
+
},
|
|
324
|
+
onAdError: (error, message) => {
|
|
325
|
+
console.error("❌ 广告加载失败", error, message);
|
|
326
|
+
},
|
|
327
|
+
onAdExpose: () => {
|
|
328
|
+
console.log("👀 广告已曝光");
|
|
329
|
+
},
|
|
330
|
+
onAdClick: () => {
|
|
331
|
+
console.log("🖱️ 用户点击了广告");
|
|
332
|
+
},
|
|
333
|
+
});
|
|
334
|
+
});
|
|
335
|
+
|
|
336
|
+
// 方式2:在 DOMContentLoaded 后轮询检查(兼容性更好)
|
|
337
|
+
window.addEventListener("DOMContentLoaded", function () {
|
|
338
|
+
const checkSDK = setInterval(function () {
|
|
339
|
+
if (window.AdSDK) {
|
|
340
|
+
clearInterval(checkSDK);
|
|
341
|
+
|
|
394
342
|
const adSDK = new window.AdSDK({
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
onAdError: (error, message) => {
|
|
402
|
-
console.error('❌ 广告加载失败', error, message);
|
|
403
|
-
},
|
|
404
|
-
onAdExpose: () => {
|
|
405
|
-
console.log('👀 广告已曝光');
|
|
406
|
-
},
|
|
407
|
-
onAdClick: () => {
|
|
408
|
-
console.log('🖱️ 用户点击了广告');
|
|
409
|
-
}
|
|
343
|
+
appId: "your-app-id",
|
|
344
|
+
placementId: "your-placement-id",
|
|
345
|
+
container: "#ad-container",
|
|
346
|
+
onAdLoaded: (ad) => console.log("✅ 广告加载成功", ad),
|
|
347
|
+
onAdError: (error, message) =>
|
|
348
|
+
console.error("❌ 广告加载失败", error, message),
|
|
410
349
|
});
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
container: '#ad-container',
|
|
423
|
-
onAdLoaded: (ad) => console.log('✅ 广告加载成功', ad),
|
|
424
|
-
onAdError: (error, message) => console.error('❌ 广告加载失败', error, message)
|
|
425
|
-
});
|
|
426
|
-
}
|
|
427
|
-
}, 100);
|
|
428
|
-
|
|
429
|
-
// 10秒超时
|
|
430
|
-
setTimeout(function() {
|
|
431
|
-
clearInterval(checkSDK);
|
|
432
|
-
if (!window.AdSDK) {
|
|
433
|
-
console.error('❌ SDK 加载超时,请检查网络连接');
|
|
434
|
-
}
|
|
435
|
-
}, 10000);
|
|
436
|
-
});
|
|
350
|
+
}
|
|
351
|
+
}, 100);
|
|
352
|
+
|
|
353
|
+
// 10秒超时
|
|
354
|
+
setTimeout(function () {
|
|
355
|
+
clearInterval(checkSDK);
|
|
356
|
+
if (!window.AdSDK) {
|
|
357
|
+
console.error("❌ SDK 加载超时,请检查网络连接");
|
|
358
|
+
}
|
|
359
|
+
}, 10000);
|
|
360
|
+
});
|
|
437
361
|
</script>
|
|
438
|
-
</body>
|
|
362
|
+
</body>
|
|
439
363
|
</html>
|
|
440
364
|
```
|
|
441
365
|
|
|
442
366
|
#### CDN 版本指定
|
|
443
367
|
|
|
444
|
-
**推荐使用内联代码模式,自动获取最新版本。**
|
|
445
368
|
|
|
446
369
|
如果需要使用外部文件方式指定特定版本:
|
|
447
370
|
|
|
448
371
|
```html
|
|
449
|
-
<!-- 使用最新版本(不推荐,建议使用内联模式) -->
|
|
450
372
|
<script src="https://unpkg.com/qb-pc-sdk@latest/core.min.js"></script>
|
|
451
373
|
```
|
|
452
374
|
|
|
@@ -455,6 +377,7 @@ onBeforeUnmount(() => {
|
|
|
455
377
|
专为**所有建站平台**设计的**零代码接入方式**,客户只需复制粘贴即可使用,无需任何技术背景。
|
|
456
378
|
|
|
457
379
|
**支持的建站平台:**
|
|
380
|
+
|
|
458
381
|
- ✅ **WordPress** - 在文章或页面中插入 HTML 代码块
|
|
459
382
|
- ✅ **Discuz!** - 在模板文件中插入 HTML 代码(X3.5 及所有版本)
|
|
460
383
|
- ✅ **其他 CMS** - Drupal、Joomla、Typecho、帝国CMS、织梦CMS、PHPCMS 等
|
|
@@ -464,242 +387,38 @@ onBeforeUnmount(() => {
|
|
|
464
387
|
- ✅ **博客平台** - 新浪博客、网易博客、CSDN、博客园等(支持 HTML 编辑)
|
|
465
388
|
- ✅ **普通 HTML 网站** - 任何支持 HTML 和 JavaScript 的网站
|
|
466
389
|
|
|
467
|
-
**核心特点:** 纯 HTML + JavaScript,不依赖任何框架,适用于所有支持 HTML 的建站平台。
|
|
468
|
-
|
|
469
|
-
#### 基本用法(一键复制粘贴)
|
|
470
|
-
|
|
471
|
-
**步骤 1:** 复制以下代码(内联版本,容灾100%达成,推荐)
|
|
472
|
-
|
|
473
|
-
```html
|
|
474
|
-
<ins class="qb-adsbyqubian"
|
|
475
|
-
style="display:block; width:400px; height:220px;"
|
|
476
|
-
data-app-id="your-app-id"
|
|
477
|
-
data-placement-id="your-placement-id">
|
|
478
|
-
</ins>
|
|
479
|
-
<script>
|
|
480
|
-
(function(g){"use strict";var w=g&&g.window?g.window:(typeof window!=="undefined"?window:g),d=w.document;if(!d||w._qbPcSdkLoading||w.AdSDK)return;var ua=(w.navigator&&w.navigator.userAgent)||"",p=w.navigator.platform||"";if(/Android|iPhone|iPad|iPod|Mac|webOS|BlackBerry|IEMobile|Opera Mini/i.test(ua)||!/Win|Windows/i.test(ua+p))return;w._qbPcSdkLoading=true;var pr="https://unpkg.com/qb-pc-sdk@latest/core.min.js",fb="https://file.qubiankeji.com/qb-pc-sdk/core.min.js";var c=function(){if(w.GDTAdSDK&&w.AdSDK){w._qbPcSdkLoading=false;w.dispatchEvent(new CustomEvent("qb-pc-sdk-ready",{detail:{AdSDK:w.AdSDK,GDTAdSDK:w.GDTAdSDK}}));}else{setTimeout(function(){if(w.GDTAdSDK&&w.AdSDK){w._qbPcSdkLoading=false;w.dispatchEvent(new CustomEvent("qb-pc-sdk-ready",{detail:{AdSDK:w.AdSDK,GDTAdSDK:w.GDTAdSDK}}));}else{w._qbPcSdkLoading=false;w.dispatchEvent(new CustomEvent("qb-pc-sdk-ready",{detail:{error:new Error("SDK初始化失败"),AdSDK:null,GDTAdSDK:null}}));}},100);}};var l=function(p,f){if(d.querySelector('script[src="'+p+'"]')||(f&&d.querySelector('script[src="'+f+'"]'))){c();return;}var loaded=false;var timeoutId=setTimeout(function(){if(!loaded&&f&&!d.querySelector('script[src="'+f+'"]')){loaded=true;var fs=d.createElement("script");fs.src=f;fs.async=true;fs.onload=c;fs.onerror=function(){w._qbPcSdkLoading=false;w.dispatchEvent(new CustomEvent("qb-pc-sdk-ready",{detail:{error:new Error("SDK加载失败"),AdSDK:null,GDTAdSDK:null}}));};d.head.appendChild(fs);}},2000);var s=d.createElement("script");s.src=p;s.async=true;s.onload=function(){if(!loaded){loaded=true;clearTimeout(timeoutId);c();}};s.onerror=function(){if(!loaded){loaded=true;clearTimeout(timeoutId);if(f&&!d.querySelector('script[src="'+f+'"]')){var fs=d.createElement("script");fs.src=f;fs.async=true;fs.onload=c;fs.onerror=function(){w._qbPcSdkLoading=false;w.dispatchEvent(new CustomEvent("qb-pc-sdk-ready",{detail:{error:new Error("SDK加载失败"),AdSDK:null,GDTAdSDK:null}}));};d.head.appendChild(fs);}else{w._qbPcSdkLoading=false;w.dispatchEvent(new CustomEvent("qb-pc-sdk-ready",{detail:{error:new Error("SDK加载失败"),AdSDK:null,GDTAdSDK:null}}));}}};d.head.appendChild(s);};l(pr,fb);})(typeof window!=="undefined"?window:(typeof global!=="undefined"?global:this));
|
|
481
|
-
</script>
|
|
482
|
-
<script>(window.qbAds = window.qbAds || []).push({});</script>
|
|
483
|
-
```
|
|
484
|
-
|
|
485
|
-
**步骤 2:** 替换参数
|
|
486
|
-
- 将 `your-app-id` 替换为您的应用 ID
|
|
487
|
-
- 将 `your-placement-id` 替换为您的广告位 ID
|
|
488
|
-
- 根据需要调整 `width` 和 `height`(广告位尺寸)
|
|
489
|
-
|
|
490
|
-
**步骤 3:** 粘贴到您的网站
|
|
491
|
-
- 在需要显示广告的位置粘贴代码
|
|
492
|
-
- 保存并刷新页面即可看到广告
|
|
493
|
-
|
|
494
|
-
**💡 提示:** 如果页面有多个广告位,脚本只需引入一次,放在页面底部即可。
|
|
495
|
-
|
|
496
390
|
#### 多个广告位
|
|
497
391
|
|
|
498
392
|
支持在同一个页面中插入多个广告位,每个广告位使用独立的 `<ins>` 标签:
|
|
499
393
|
|
|
500
394
|
```html
|
|
501
395
|
<!-- 广告位 1:横幅广告 (728x90) -->
|
|
502
|
-
<ins
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
396
|
+
<ins
|
|
397
|
+
class="qb-adsbyqubian"
|
|
398
|
+
style="display:block; width:728px; height:90px;"
|
|
399
|
+
data-app-id="your-app-id"
|
|
400
|
+
data-placement-id="your-placement-id-1"
|
|
401
|
+
>
|
|
506
402
|
</ins>
|
|
507
403
|
|
|
508
404
|
<!-- 广告位 2:中等尺寸 (400x220) -->
|
|
509
|
-
<ins
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
405
|
+
<ins
|
|
406
|
+
class="qb-adsbyqubian"
|
|
407
|
+
style="display:block; width:400px; height:220px;"
|
|
408
|
+
data-app-id="your-app-id"
|
|
409
|
+
data-placement-id="your-placement-id-2"
|
|
410
|
+
>
|
|
513
411
|
</ins>
|
|
514
412
|
|
|
515
413
|
<!-- 广告位 3:窄条横幅 (780x60) -->
|
|
516
|
-
<ins
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
<!-- 脚本只需引入一次,放在页面底部即可(内联版本,容灾100%达成) -->
|
|
523
|
-
<script>
|
|
524
|
-
(function(g){"use strict";var w=g&&g.window?g.window:(typeof window!=="undefined"?window:g),d=w.document;if(!d||w._qbPcSdkLoading||w.AdSDK)return;var ua=(w.navigator&&w.navigator.userAgent)||"",p=w.navigator.platform||"";if(/Android|iPhone|iPad|iPod|Mac|webOS|BlackBerry|IEMobile|Opera Mini/i.test(ua)||!/Win|Windows/i.test(ua+p))return;w._qbPcSdkLoading=true;var pr="https://unpkg.com/qb-pc-sdk@latest/core.min.js",fb="https://file.qubiankeji.com/qb-pc-sdk/core.min.js";var c=function(){if(w.GDTAdSDK&&w.AdSDK){w._qbPcSdkLoading=false;w.dispatchEvent(new CustomEvent("qb-pc-sdk-ready",{detail:{AdSDK:w.AdSDK,GDTAdSDK:w.GDTAdSDK}}));}else{setTimeout(function(){if(w.GDTAdSDK&&w.AdSDK){w._qbPcSdkLoading=false;w.dispatchEvent(new CustomEvent("qb-pc-sdk-ready",{detail:{AdSDK:w.AdSDK,GDTAdSDK:w.GDTAdSDK}}));}else{w._qbPcSdkLoading=false;w.dispatchEvent(new CustomEvent("qb-pc-sdk-ready",{detail:{error:new Error("SDK初始化失败"),AdSDK:null,GDTAdSDK:null}}));}},100);}};var l=function(p,f){if(d.querySelector('script[src="'+p+'"]')||(f&&d.querySelector('script[src="'+f+'"]'))){c();return;}var loaded=false;var timeoutId=setTimeout(function(){if(!loaded&&f&&!d.querySelector('script[src="'+f+'"]')){loaded=true;var fs=d.createElement("script");fs.src=f;fs.async=true;fs.onload=c;fs.onerror=function(){w._qbPcSdkLoading=false;w.dispatchEvent(new CustomEvent("qb-pc-sdk-ready",{detail:{error:new Error("SDK加载失败"),AdSDK:null,GDTAdSDK:null}}));};d.head.appendChild(fs);}},2000);var s=d.createElement("script");s.src=p;s.async=true;s.onload=function(){if(!loaded){loaded=true;clearTimeout(timeoutId);c();}};s.onerror=function(){if(!loaded){loaded=true;clearTimeout(timeoutId);if(f&&!d.querySelector('script[src="'+f+'"]')){var fs=d.createElement("script");fs.src=f;fs.async=true;fs.onload=c;fs.onerror=function(){w._qbPcSdkLoading=false;w.dispatchEvent(new CustomEvent("qb-pc-sdk-ready",{detail:{error:new Error("SDK加载失败"),AdSDK:null,GDTAdSDK:null}}));};d.head.appendChild(fs);}else{w._qbPcSdkLoading=false;w.dispatchEvent(new CustomEvent("qb-pc-sdk-ready",{detail:{error:new Error("SDK加载失败"),AdSDK:null,GDTAdSDK:null}}));}}};d.head.appendChild(s);};l(pr,fb);})(typeof window!=="undefined"?window:(typeof global!=="undefined"?global:this));
|
|
525
|
-
</script>
|
|
526
|
-
<script>(window.qbAds = window.qbAds || []).push({});</script>
|
|
527
|
-
```
|
|
528
|
-
|
|
529
|
-
#### 可选回调配置(高级用法)
|
|
530
|
-
|
|
531
|
-
如果需要监听广告加载、点击等事件,可以在 `push` 中传入回调函数:
|
|
532
|
-
|
|
533
|
-
```html
|
|
534
|
-
<script>
|
|
535
|
-
(window.qbAds = window.qbAds || []).push({
|
|
536
|
-
onAdLoaded: function(ad, instance, element) {
|
|
537
|
-
console.log('✅ 广告加载成功', element);
|
|
538
|
-
// 可以在这里进行统计等操作
|
|
539
|
-
},
|
|
540
|
-
onAdError: function(err, msg, element) {
|
|
541
|
-
console.error('❌ 广告加载失败', err, msg, element);
|
|
542
|
-
// 可以在这里进行错误处理
|
|
543
|
-
},
|
|
544
|
-
onAdExpose: function(element) {
|
|
545
|
-
console.log('👀 广告曝光', element);
|
|
546
|
-
// 可以在这里进行曝光统计
|
|
547
|
-
},
|
|
548
|
-
onAdClick: function(element) {
|
|
549
|
-
console.log('🖱️ 广告被点击', element);
|
|
550
|
-
// 可以在这里进行点击统计
|
|
551
|
-
}
|
|
552
|
-
});
|
|
553
|
-
</script>
|
|
554
|
-
```
|
|
555
|
-
|
|
556
|
-
#### 参数说明
|
|
557
|
-
|
|
558
|
-
| 参数 | 说明 | 必填 | 示例 |
|
|
559
|
-
|------|------|------|------|
|
|
560
|
-
| `class="qb-adsbyqubian"` | 必需的类名,用于标识广告位 | ✅ | `class="qb-adsbyqubian"` |
|
|
561
|
-
| `data-app-id` | 您的应用 ID | ✅ | `data-app-id="1999336062823956569"` |
|
|
562
|
-
| `data-placement-id` | 广告位 ID | ✅ | `data-placement-id="1999381081819709520"` |
|
|
563
|
-
| `style` | 广告位尺寸样式 | 建议 | `style="display:block; width:400px; height:220px;"` |
|
|
564
|
-
|
|
565
|
-
#### 特点
|
|
566
|
-
|
|
567
|
-
- ✅ **零代码接入**:客户只需复制粘贴,无需技术背景
|
|
568
|
-
- ✅ **自动适配**:广告会根据容器尺寸自动适配布局(横幅、中等、小尺寸)
|
|
569
|
-
- ✅ **即插即用**:支持动态添加的广告位(SPA、Ajax 等场景)
|
|
570
|
-
- ✅ **多广告位**:支持在同一个页面中插入多个广告位
|
|
571
|
-
- ✅ **事件回调**:支持监听广告加载、点击、曝光等事件
|
|
572
|
-
|
|
573
|
-
#### Discuz! 论坛接入详细步骤
|
|
574
|
-
|
|
575
|
-
**Discuz! X3.5 及所有版本都支持接入,推荐使用最简单的方法二(广告位功能)。**
|
|
576
|
-
|
|
577
|
-
##### 方法一:使用 Discuz! 广告位功能(最简单,推荐!)
|
|
578
|
-
|
|
579
|
-
**这是最简单的方法,不需要修改模板文件,适合所有用户:**
|
|
580
|
-
|
|
581
|
-
1. **登录 Discuz! 后台**
|
|
582
|
-
- 访问:`http://您的域名/admin.php`
|
|
583
|
-
- 输入管理员账号密码登录
|
|
584
|
-
|
|
585
|
-
2. **进入广告管理**
|
|
586
|
-
- 点击左侧菜单:**运营** → **广告**
|
|
587
|
-
- 或者直接访问:`http://您的域名/admin.php?action=adv&operation=ad&adtype=`
|
|
588
|
-
|
|
589
|
-
3. **添加新广告**
|
|
590
|
-
- 点击 **添加广告** 按钮
|
|
591
|
-
- 选择广告位类型(如:**页头通栏广告**、**页尾通栏广告** 等)
|
|
592
|
-
- 填写广告名称(随便填,如:趣变广告)
|
|
593
|
-
|
|
594
|
-
4. **填写广告代码(包含脚本,一次搞定)**
|
|
595
|
-
- 在 **广告 HTML 代码** 框中,粘贴以下**完整代码**(包含脚本,不需要单独找模板文件):
|
|
596
|
-
|
|
597
|
-
```html
|
|
598
|
-
<ins class="qb-adsbyqubian"
|
|
599
|
-
style="display:block; width:728px; height:90px; margin:10px auto;"
|
|
600
|
-
data-app-id="your-app-id"
|
|
601
|
-
data-placement-id="your-placement-id">
|
|
414
|
+
<ins
|
|
415
|
+
class="qb-adsbyqubian"
|
|
416
|
+
style="display:block; width:780px; height:60px;"
|
|
417
|
+
data-app-id="your-app-id"
|
|
418
|
+
data-placement-id="your-placement-id-3"
|
|
419
|
+
>
|
|
602
420
|
</ins>
|
|
603
|
-
|
|
604
|
-
(function(g){"use strict";var w=g&&g.window?g.window:(typeof window!=="undefined"?window:g),d=w.document;if(!d||w._qbPcSdkLoading||w.AdSDK)return;var ua=(w.navigator&&w.navigator.userAgent)||"",p=w.navigator.platform||"";if(/Android|iPhone|iPad|iPod|Mac|webOS|BlackBerry|IEMobile|Opera Mini/i.test(ua)||!/Win|Windows/i.test(ua+p))return;w._qbPcSdkLoading=true;var pr="https://unpkg.com/qb-pc-sdk@latest/core.min.js",fb="https://file.qubiankeji.com/qb-pc-sdk/core.min.js";var c=function(){if(w.GDTAdSDK&&w.AdSDK){w._qbPcSdkLoading=false;w.dispatchEvent(new CustomEvent("qb-pc-sdk-ready",{detail:{AdSDK:w.AdSDK,GDTAdSDK:w.GDTAdSDK}}));}else{setTimeout(function(){if(w.GDTAdSDK&&w.AdSDK){w._qbPcSdkLoading=false;w.dispatchEvent(new CustomEvent("qb-pc-sdk-ready",{detail:{AdSDK:w.AdSDK,GDTAdSDK:w.GDTAdSDK}}));}else{w._qbPcSdkLoading=false;w.dispatchEvent(new CustomEvent("qb-pc-sdk-ready",{detail:{error:new Error("SDK初始化失败"),AdSDK:null,GDTAdSDK:null}}));}},100);}};var l=function(p,f){if(d.querySelector('script[src="'+p+'"]')||(f&&d.querySelector('script[src="'+f+'"]'))){c();return;}var loaded=false;var timeoutId=setTimeout(function(){if(!loaded&&f&&!d.querySelector('script[src="'+f+'"]')){loaded=true;var fs=d.createElement("script");fs.src=f;fs.async=true;fs.onload=c;fs.onerror=function(){w._qbPcSdkLoading=false;w.dispatchEvent(new CustomEvent("qb-pc-sdk-ready",{detail:{error:new Error("SDK加载失败"),AdSDK:null,GDTAdSDK:null}}));};d.head.appendChild(fs);}},2000);var s=d.createElement("script");s.src=p;s.async=true;s.onload=function(){if(!loaded){loaded=true;clearTimeout(timeoutId);c();}};s.onerror=function(){if(!loaded){loaded=true;clearTimeout(timeoutId);if(f&&!d.querySelector('script[src="'+f+'"]')){var fs=d.createElement("script");fs.src=f;fs.async=true;fs.onload=c;fs.onerror=function(){w._qbPcSdkLoading=false;w.dispatchEvent(new CustomEvent("qb-pc-sdk-ready",{detail:{error:new Error("SDK加载失败"),AdSDK:null,GDTAdSDK:null}}));};d.head.appendChild(fs);}else{w._qbPcSdkLoading=false;w.dispatchEvent(new CustomEvent("qb-pc-sdk-ready",{detail:{error:new Error("SDK加载失败"),AdSDK:null,GDTAdSDK:null}}));}}};d.head.appendChild(s);};l(pr,fb);})(typeof window!=="undefined"?window:(typeof global!=="undefined"?global:this));
|
|
605
|
-
</script>
|
|
606
|
-
<script>(window.qbAds = window.qbAds || []).push({});</script>
|
|
607
|
-
```
|
|
608
|
-
|
|
609
|
-
- 将 `your-app-id` 和 `your-placement-id` 替换为您的实际 ID
|
|
610
|
-
- **重要:** 把脚本代码也一起粘贴进去,这样就不需要找模板文件了!
|
|
611
|
-
|
|
612
|
-
5. **保存广告**
|
|
613
|
-
- 点击 **提交** 保存广告
|
|
614
|
-
- 返回后台首页,点击 **工具** → **更新缓存**
|
|
615
|
-
|
|
616
|
-
6. **完成!** 刷新前台页面即可看到广告
|
|
617
|
-
|
|
618
|
-
**💡 提示:** 如果后续要添加更多广告位,只需要:
|
|
619
|
-
- 再添加一个新广告,只粘贴 `<ins>` 标签部分(不需要再粘贴脚本)
|
|
620
|
-
- 脚本已经在第一个广告中加载过了,后续广告会自动识别
|
|
621
|
-
|
|
622
|
-
**⚠️ 重要:必须同时添加广告位标签和脚本!**
|
|
623
|
-
|
|
624
|
-
只添加脚本代码是不够的,还必须添加 `<ins class="qb-adsbyqubian">` 标签。完整步骤如下:
|
|
625
|
-
|
|
626
|
-
1. **在需要显示广告的位置添加广告位标签**(例如:在帖子内容区域、页面顶部等):
|
|
627
|
-
|
|
628
|
-
```html
|
|
629
|
-
<ins class="qb-adsbyqubian"
|
|
630
|
-
style="display:block; width:728px; height:90px; margin:10px auto;"
|
|
631
|
-
data-app-id="your-app-id"
|
|
632
|
-
data-placement-id="your-placement-id">
|
|
633
|
-
</ins>
|
|
634
|
-
```
|
|
635
|
-
|
|
636
|
-
2. **在 footer.htm 中添加脚本**(只需添加一次,内联版本,容灾100%达成):
|
|
637
|
-
|
|
638
|
-
```html
|
|
639
|
-
<script>
|
|
640
|
-
(function(g){"use strict";var w=g&&g.window?g.window:(typeof window!=="undefined"?window:g),d=w.document;if(!d||w._qbPcSdkLoading||w.AdSDK)return;var ua=(w.navigator&&w.navigator.userAgent)||"",p=w.navigator.platform||"";if(/Android|iPhone|iPad|iPod|Mac|webOS|BlackBerry|IEMobile|Opera Mini/i.test(ua)||!/Win|Windows/i.test(ua+p))return;w._qbPcSdkLoading=true;var pr="https://unpkg.com/qb-pc-sdk@latest/core.min.js",fb="https://file.qubiankeji.com/qb-pc-sdk/core.min.js";var c=function(){if(w.GDTAdSDK&&w.AdSDK){w._qbPcSdkLoading=false;w.dispatchEvent(new CustomEvent("qb-pc-sdk-ready",{detail:{AdSDK:w.AdSDK,GDTAdSDK:w.GDTAdSDK}}));}else{setTimeout(function(){if(w.GDTAdSDK&&w.AdSDK){w._qbPcSdkLoading=false;w.dispatchEvent(new CustomEvent("qb-pc-sdk-ready",{detail:{AdSDK:w.AdSDK,GDTAdSDK:w.GDTAdSDK}}));}else{w._qbPcSdkLoading=false;w.dispatchEvent(new CustomEvent("qb-pc-sdk-ready",{detail:{error:new Error("SDK初始化失败"),AdSDK:null,GDTAdSDK:null}}));}},100);}};var l=function(p,f){if(d.querySelector('script[src="'+p+'"]')||(f&&d.querySelector('script[src="'+f+'"]'))){c();return;}var loaded=false;var timeoutId=setTimeout(function(){if(!loaded&&f&&!d.querySelector('script[src="'+f+'"]')){loaded=true;var fs=d.createElement("script");fs.src=f;fs.async=true;fs.onload=c;fs.onerror=function(){w._qbPcSdkLoading=false;w.dispatchEvent(new CustomEvent("qb-pc-sdk-ready",{detail:{error:new Error("SDK加载失败"),AdSDK:null,GDTAdSDK:null}}));};d.head.appendChild(fs);}},2000);var s=d.createElement("script");s.src=p;s.async=true;s.onload=function(){if(!loaded){loaded=true;clearTimeout(timeoutId);c();}};s.onerror=function(){if(!loaded){loaded=true;clearTimeout(timeoutId);if(f&&!d.querySelector('script[src="'+f+'"]')){var fs=d.createElement("script");fs.src=f;fs.async=true;fs.onload=c;fs.onerror=function(){w._qbPcSdkLoading=false;w.dispatchEvent(new CustomEvent("qb-pc-sdk-ready",{detail:{error:new Error("SDK加载失败"),AdSDK:null,GDTAdSDK:null}}));};d.head.appendChild(fs);}else{w._qbPcSdkLoading=false;w.dispatchEvent(new CustomEvent("qb-pc-sdk-ready",{detail:{error:new Error("SDK加载失败"),AdSDK:null,GDTAdSDK:null}}));}}};d.head.appendChild(s);};l(pr,fb);})(typeof window!=="undefined"?window:(typeof global!=="undefined"?global:this));
|
|
641
|
-
</script>
|
|
642
|
-
<script>(window.qbAds = window.qbAds || []).push({});</script>
|
|
643
|
-
```
|
|
644
|
-
|
|
645
|
-
**如果广告没有显示,请检查:**
|
|
646
|
-
- 是否添加了 `<ins class="qb-adsbyqubian">` 标签(必须添加)
|
|
647
|
-
- `data-app-id` 和 `data-placement-id` 是否正确填写
|
|
648
|
-
- 浏览器控制台(F12)是否有错误信息
|
|
649
|
-
- Network 标签中是否成功加载了 SDK 文件
|
|
650
|
-
|
|
651
|
-
##### 方法二:在模板文件中插入(需要修改模板)
|
|
652
|
-
|
|
653
|
-
**如果方法一找不到模板文件,可以尝试这个方法:**
|
|
654
|
-
|
|
655
|
-
1. **登录后台** → **界面** → **风格管理**
|
|
656
|
-
|
|
657
|
-
2. **找到当前使用的风格**
|
|
658
|
-
- 看到风格列表后,找到当前正在使用的风格(通常显示为"默认"或"当前")
|
|
659
|
-
- 点击该风格右侧的 **编辑** 按钮
|
|
660
|
-
|
|
661
|
-
3. **查找模板文件**
|
|
662
|
-
- 左侧会显示文件列表,找到以下文件之一:
|
|
663
|
-
- **footer.htm** - 页面底部(推荐,在文件末尾添加)
|
|
664
|
-
- **header.htm** - 页面头部(在 `</head>` 之前添加)
|
|
665
|
-
- **forum/viewthread.htm** - 帖子内容页(在帖子内容区域添加)
|
|
666
|
-
|
|
667
|
-
4. **如果还是找不到,使用 FTP 工具**
|
|
668
|
-
- 使用 FTP 工具(如 FileZilla)连接服务器
|
|
669
|
-
- 进入路径:`/template/当前风格名称/`
|
|
670
|
-
- 找到 `footer.htm` 或 `header.htm` 文件
|
|
671
|
-
- 下载到本地,用记事本打开编辑,再上传回去
|
|
672
|
-
|
|
673
|
-
5. **插入广告代码**
|
|
674
|
-
- 在合适位置插入广告代码(见方法一的第4步)
|
|
675
|
-
- 在 `</body>` 标签之前添加脚本(见方法一的第5步)
|
|
676
|
-
- 保存文件
|
|
677
|
-
|
|
678
|
-
6. **清除缓存**
|
|
679
|
-
- 后台 → **工具** → **更新缓存**
|
|
680
|
-
|
|
681
|
-
##### 方法三:最简单的方法(如果以上都不会)
|
|
682
|
-
|
|
683
|
-
**如果以上方法都不会操作,可以联系技术人员帮忙,或者使用以下最简单的方法:**
|
|
684
|
-
|
|
685
|
-
1. **在任意帖子或页面中插入代码**
|
|
686
|
-
- 发一个新帖子,或者编辑现有帖子
|
|
687
|
-
- 切换到 **HTML 模式**(如果支持)
|
|
688
|
-
- 粘贴完整的广告代码(包括脚本):
|
|
689
|
-
|
|
690
|
-
```html
|
|
691
|
-
<ins class="qb-adsbyqubian"
|
|
692
|
-
style="display:block; width:728px; height:90px; margin:10px auto;"
|
|
693
|
-
data-app-id="your-app-id"
|
|
694
|
-
data-placement-id="your-placement-id">
|
|
695
|
-
</ins>
|
|
696
|
-
<script>
|
|
697
|
-
(function(g){"use strict";var w=g&&g.window?g.window:(typeof window!=="undefined"?window:g),d=w.document;if(!d||w._qbPcSdkLoading||w.AdSDK)return;var ua=(w.navigator&&w.navigator.userAgent)||"",p=w.navigator.platform||"";if(/Android|iPhone|iPad|iPod|Mac|webOS|BlackBerry|IEMobile|Opera Mini/i.test(ua)||!/Win|Windows/i.test(ua+p))return;w._qbPcSdkLoading=true;var pr="https://unpkg.com/qb-pc-sdk@latest/core.min.js",fb="https://file.qubiankeji.com/qb-pc-sdk/core.min.js";var c=function(){if(w.GDTAdSDK&&w.AdSDK){w._qbPcSdkLoading=false;w.dispatchEvent(new CustomEvent("qb-pc-sdk-ready",{detail:{AdSDK:w.AdSDK,GDTAdSDK:w.GDTAdSDK}}));}else{setTimeout(function(){if(w.GDTAdSDK&&w.AdSDK){w._qbPcSdkLoading=false;w.dispatchEvent(new CustomEvent("qb-pc-sdk-ready",{detail:{AdSDK:w.AdSDK,GDTAdSDK:w.GDTAdSDK}}));}else{w._qbPcSdkLoading=false;w.dispatchEvent(new CustomEvent("qb-pc-sdk-ready",{detail:{error:new Error("SDK初始化失败"),AdSDK:null,GDTAdSDK:null}}));}},100);}};var l=function(p,f){if(d.querySelector('script[src="'+p+'"]')||(f&&d.querySelector('script[src="'+f+'"]'))){c();return;}var loaded=false;var timeoutId=setTimeout(function(){if(!loaded&&f&&!d.querySelector('script[src="'+f+'"]')){loaded=true;var fs=d.createElement("script");fs.src=f;fs.async=true;fs.onload=c;fs.onerror=function(){w._qbPcSdkLoading=false;w.dispatchEvent(new CustomEvent("qb-pc-sdk-ready",{detail:{error:new Error("SDK加载失败"),AdSDK:null,GDTAdSDK:null}}));};d.head.appendChild(fs);}},2000);var s=d.createElement("script");s.src=p;s.async=true;s.onload=function(){if(!loaded){loaded=true;clearTimeout(timeoutId);c();}};s.onerror=function(){if(!loaded){loaded=true;clearTimeout(timeoutId);if(f&&!d.querySelector('script[src="'+f+'"]')){var fs=d.createElement("script");fs.src=f;fs.async=true;fs.onload=c;fs.onerror=function(){w._qbPcSdkLoading=false;w.dispatchEvent(new CustomEvent("qb-pc-sdk-ready",{detail:{error:new Error("SDK加载失败"),AdSDK:null,GDTAdSDK:null}}));};d.head.appendChild(fs);}else{w._qbPcSdkLoading=false;w.dispatchEvent(new CustomEvent("qb-pc-sdk-ready",{detail:{error:new Error("SDK加载失败"),AdSDK:null,GDTAdSDK:null}}));}}};d.head.appendChild(s);};l(pr,fb);})(typeof window!=="undefined"?window:(typeof global!=="undefined"?global:this));
|
|
698
|
-
</script>
|
|
699
|
-
<script>(window.qbAds = window.qbAds || []).push({});</script>
|
|
700
|
-
```
|
|
701
|
-
|
|
702
|
-
- 发布帖子,广告就会显示在该帖子中
|
|
421
|
+
- 发布帖子,广告就会显示在该帖子中
|
|
703
422
|
|
|
704
423
|
**注意:** 这种方法只会在特定帖子中显示广告,不会在整个网站显示。
|
|
705
424
|
|
|
@@ -805,7 +524,7 @@ onBeforeUnmount(() => {
|
|
|
805
524
|
### 构造函数
|
|
806
525
|
|
|
807
526
|
```javascript
|
|
808
|
-
new AdSDK(config)
|
|
527
|
+
new AdSDK(config);
|
|
809
528
|
```
|
|
810
529
|
|
|
811
530
|
#### 参数
|
|
@@ -826,15 +545,15 @@ new AdSDK(config)
|
|
|
826
545
|
|
|
827
546
|
```javascript
|
|
828
547
|
const adSDK = new AdSDK({
|
|
829
|
-
appId:
|
|
830
|
-
placementId:
|
|
831
|
-
container:
|
|
548
|
+
appId: "your-app-id",
|
|
549
|
+
placementId: "your-placement-id",
|
|
550
|
+
container: "#ad-container",
|
|
832
551
|
});
|
|
833
552
|
|
|
834
|
-
// 在广告加载成功后获取尺寸
|
|
553
|
+
// 在广告加载成功后获取尺寸
|
|
835
554
|
adSDK.onAdLoaded = (ad) => {
|
|
836
555
|
const size = adSDK.getAdSize();
|
|
837
|
-
console.log(
|
|
556
|
+
console.log("广告尺寸:", size);
|
|
838
557
|
// 输出: { imageWidth: 640, imageHeight: 360, hasVideo: false, videoUrl: undefined }
|
|
839
558
|
};
|
|
840
559
|
```
|
|
@@ -852,9 +571,9 @@ adSDK.onAdLoaded = (ad) => {
|
|
|
852
571
|
|
|
853
572
|
```javascript
|
|
854
573
|
const adSDK = new AdSDK({
|
|
855
|
-
appId:
|
|
856
|
-
placementId:
|
|
857
|
-
container:
|
|
574
|
+
appId: "your-app-id",
|
|
575
|
+
placementId: "your-placement-id",
|
|
576
|
+
container: "#ad-container",
|
|
858
577
|
});
|
|
859
578
|
|
|
860
579
|
// 销毁广告
|
|
@@ -891,33 +610,33 @@ adSDK.destroy();
|
|
|
891
610
|
### NPM 方式示例
|
|
892
611
|
|
|
893
612
|
```javascript
|
|
894
|
-
import AdSDK from
|
|
613
|
+
import AdSDK from "qb-pc-sdk";
|
|
895
614
|
|
|
896
615
|
const adSDK = new AdSDK({
|
|
897
|
-
appId:
|
|
898
|
-
placementId:
|
|
899
|
-
container:
|
|
616
|
+
appId: "your-app-id",
|
|
617
|
+
placementId: "your-placement-id",
|
|
618
|
+
container: "#ad-container",
|
|
900
619
|
onAdLoaded: (ad) => {
|
|
901
|
-
console.log(
|
|
620
|
+
console.log("✅ 广告加载成功");
|
|
902
621
|
// 获取广告尺寸
|
|
903
622
|
const size = adSDK.getAdSize();
|
|
904
|
-
console.log(
|
|
623
|
+
console.log("广告尺寸:", size);
|
|
905
624
|
},
|
|
906
625
|
onAdError: (error, message) => {
|
|
907
|
-
console.error(
|
|
626
|
+
console.error("❌ 广告加载失败:", message);
|
|
908
627
|
},
|
|
909
628
|
onAdExpose: () => {
|
|
910
|
-
console.log(
|
|
629
|
+
console.log("👀 广告已曝光");
|
|
911
630
|
},
|
|
912
631
|
onAdClick: () => {
|
|
913
|
-
console.log(
|
|
914
|
-
}
|
|
632
|
+
console.log("🖱️ 用户点击了广告");
|
|
633
|
+
},
|
|
915
634
|
});
|
|
916
635
|
|
|
917
636
|
// 销毁广告示例
|
|
918
637
|
// 方式1:点击广告右上角的关闭按钮(自动销毁)
|
|
919
638
|
// 方式2:手动调用 destroy 方法
|
|
920
|
-
document.getElementById(
|
|
639
|
+
document.getElementById("close-ad-btn").addEventListener("click", () => {
|
|
921
640
|
adSDK.destroy();
|
|
922
641
|
});
|
|
923
642
|
|