|
@@ -101,8 +101,8 @@ https://gemini.google.com/share/8340c20dd2d1
|
|
|
| 渲染引擎 | WebGL 2(自研,无外部 GL 框架) |
|
|
| 渲染引擎 | WebGL 2(自研,无外部 GL 框架) |
|
|
|
| 构建工具 | Vite 5 + TypeScript 5 |
|
|
| 构建工具 | Vite 5 + TypeScript 5 |
|
|
|
| 打包插件 | vite-plugin-singlefile(输出单文件 HTML) |
|
|
| 打包插件 | vite-plugin-singlefile(输出单文件 HTML) |
|
|
|
-| 广告生命周期 | MRAID 2.0 + Unity DAPI |
|
|
|
|
|
-| 跳转优先级 | `mraid.open()` → `ExitApi.exit()` → `window.open()` |
|
|
|
|
|
|
|
+| 广告平台适配 | AdPlatformAdapter(Applovin / Unity / Playturbo-Mintegral / Google) |
|
|
|
|
|
+| 单文件产物 | 默认与各平台 profile 均输出自包含 HTML |
|
|
|
|
|
|
|
|
## 项目结构
|
|
## 项目结构
|
|
|
|
|
|
|
@@ -111,7 +111,7 @@ src/
|
|
|
filler/ # 广告主逻辑
|
|
filler/ # 广告主逻辑
|
|
|
index.ts # 入口,整合加载/CTA/平台初始化
|
|
index.ts # 入口,整合加载/CTA/平台初始化
|
|
|
cta.ts # CTA 按钮点击 + 高亮动画
|
|
cta.ts # CTA 按钮点击 + 高亮动画
|
|
|
- mraid.ts # 平台生命周期适配(MRAID / Unity DAPI)
|
|
|
|
|
|
|
+ ad-platform/ # 平台 Adapter;构建时通过 Vite alias 选择目标平台
|
|
|
FillerScene.ts# WebGL 填色场景
|
|
FillerScene.ts# WebGL 填色场景
|
|
|
FingerHint.ts # 指引手指 DOM overlay
|
|
FingerHint.ts # 指引手指 DOM overlay
|
|
|
Loader.ts # 资源加载
|
|
Loader.ts # 资源加载
|
|
@@ -120,7 +120,12 @@ assets/
|
|
|
res/ # 填色资源包(config.json + 图片)
|
|
res/ # 填色资源包(config.json + 图片)
|
|
|
css/ # 样式
|
|
css/ # 样式
|
|
|
dist/
|
|
dist/
|
|
|
- index.html # 最终产物,单文件自包含 HTML(~985 KB)
|
|
|
|
|
|
|
+ index.html # 默认产物
|
|
|
|
|
+ applovin/applovin.html # Applovin 产物
|
|
|
|
|
+ unity/unity.html # Unity 产物
|
|
|
|
|
+ playturbo/playturbo.html # Playturbo 产物
|
|
|
|
|
+ mintegral/mintegral.html # Mintegral 产物
|
|
|
|
|
+ google/google.html # Google 产物
|
|
|
```
|
|
```
|
|
|
|
|
|
|
|
## 开发调试
|
|
## 开发调试
|
|
@@ -151,35 +156,47 @@ http://42.193.231.145:5173
|
|
|
|
|
|
|
|
## 构建
|
|
## 构建
|
|
|
|
|
|
|
|
|
|
+本项目保持一套业务源码,通过 Vite `--mode` 在构建期选择平台 Adapter,并输出平台专用单文件 HTML。默认构建使用 Google-like adapter,输出 `dist/index.html`。
|
|
|
|
|
+
|
|
|
```bash
|
|
```bash
|
|
|
-npm run build
|
|
|
|
|
|
|
+npm run build # dist/index.html
|
|
|
|
|
+npm run build:applovin # dist/applovin/applovin.html
|
|
|
|
|
+npm run build:unity # dist/unity/unity.html
|
|
|
|
|
+npm run build:playturbo # dist/playturbo/playturbo.html
|
|
|
|
|
+npm run build:mintegral # dist/mintegral/mintegral.html
|
|
|
|
|
+npm run build:google # dist/google/google.html
|
|
|
|
|
+npm run build:all # 依次输出以上全部产物
|
|
|
```
|
|
```
|
|
|
|
|
|
|
|
-输出文件:`dist/index.html`(单文件,所有 JS/CSS/图片/字体均内联)
|
|
|
|
|
|
|
+所有产物均为单文件自包含 HTML,JS/CSS/图片/字体均内联。构建后会移除 Vite 单文件产物中的 `type="module"` 和 `crossorigin` 属性,以满足 Playturbo 对本地 HTML 文件的扫描要求。
|
|
|
|
|
|
|
|
| 指标 | 数值 |
|
|
| 指标 | 数值 |
|
|
|
| ------------ | -------------------- |
|
|
| ------------ | -------------------- |
|
|
|
-| 文件大小 | ~985 KB |
|
|
|
|
|
-| Gzip 大小 | ~641 KB |
|
|
|
|
|
|
|
+| 文件大小 | ~1.02 MB |
|
|
|
|
|
+| Gzip 大小 | ~673 KB |
|
|
|
| 平台大小限制 | 5 MB(各平台均满足) |
|
|
| 平台大小限制 | 5 MB(各平台均满足) |
|
|
|
|
|
|
|
|
-> **注意**:构建前请确认 `src/filler/cta.ts` 中的 `STORE_URL_IOS` / `STORE_URL_ANDROID`:
|
|
|
|
|
|
|
+平台选择由 `vite.config.js` 中的 `platformBuilds` 控制:`playturbo` 与 `mintegral` 都使用 Playturbo adapter,但输出到不同目录和文件名。当前不需要 `.env.applovin` / `.env.unity` 等环境文件。
|
|
|
|
|
+
|
|
|
|
|
+> **注意**:非 Playturbo/Mintegral 平台的 Store 链接集中在 `src/filler/ad-platform/adapters/storeUrls.ts`:
|
|
|
>
|
|
>
|
|
|
> - **测试阶段**:使用 PBN 落地页(当前默认),避免产生无效转化
|
|
> - **测试阶段**:使用 PBN 落地页(当前默认),避免产生无效转化
|
|
|
> - **正式上线**:换回自己 app 的 Store 链接(文件内有注释说明)
|
|
> - **正式上线**:换回自己 app 的 Store 链接(文件内有注释说明)
|
|
|
|
|
+>
|
|
|
|
|
+> Playturbo/Mintegral 产物不会内置 Store URL,CTA 只调用平台要求的 `window.install()`。
|
|
|
|
|
|
|
|
## 多平台测试
|
|
## 多平台测试
|
|
|
|
|
|
|
|
### 测试前准备
|
|
### 测试前准备
|
|
|
|
|
|
|
|
-1. 执行 `npm run build`,确认 `dist/index.html` 为最新产物
|
|
|
|
|
-2. 检查 `cta.ts` 中的落地页 URL 符合当前测试目的
|
|
|
|
|
|
|
+1. 根据目标平台执行对应构建命令,或执行 `npm run build:all` 生成全部产物
|
|
|
|
|
+2. 检查 `src/filler/ad-platform/adapters/storeUrls.ts` 中的落地页 URL 符合当前测试目的
|
|
|
|
|
|
|
|
### Applovin
|
|
### Applovin
|
|
|
|
|
|
|
|
**预览工具**:https://p.applov.in/playablePreview?create=1
|
|
**预览工具**:https://p.applov.in/playablePreview?create=1
|
|
|
|
|
|
|
|
-1. 打开预览工具,上传 `dist/index.html`
|
|
|
|
|
|
|
+1. 执行 `npm run build:applovin`,打开预览工具,上传 `dist/applovin/applovin.html`
|
|
|
2. 检查项:
|
|
2. 检查项:
|
|
|
- [ ] 广告正常加载,WebGL 填色可交互
|
|
- [ ] 广告正常加载,WebGL 填色可交互
|
|
|
- [ ] CTA 按钮可点击(Applovin 通过 `ExitApi.exit()` 关闭广告,落地页由平台后台配置)
|
|
- [ ] CTA 按钮可点击(Applovin 通过 `ExitApi.exit()` 关闭广告,落地页由平台后台配置)
|
|
@@ -190,7 +207,7 @@ npm run build
|
|
|
|
|
|
|
|
**规范文档**:https://docs.unity.com/zh-cn/grow/acquire/creatives/playable/specifications
|
|
**规范文档**:https://docs.unity.com/zh-cn/grow/acquire/creatives/playable/specifications
|
|
|
|
|
|
|
|
-1. 在 Unity Creative 后台上传 `dist/index.html`
|
|
|
|
|
|
|
+1. 执行 `npm run build:unity`,在 Unity Creative 后台上传 `dist/unity/unity.html`
|
|
|
2. 检查项:
|
|
2. 检查项:
|
|
|
- [ ] `dapi.gameReady()` 被正确调用(可在控制台确认)
|
|
- [ ] `dapi.gameReady()` 被正确调用(可在控制台确认)
|
|
|
- [ ] CTA 跳转正常(Unity 使用 MRAID `mraid.open(url)` 跳转)
|
|
- [ ] CTA 跳转正常(Unity 使用 MRAID `mraid.open(url)` 跳转)
|
|
@@ -200,7 +217,7 @@ npm run build
|
|
|
|
|
|
|
|
**规范文档**:https://support.google.com/google-ads/answer/9981650?hl=en#_HTML
|
|
**规范文档**:https://support.google.com/google-ads/answer/9981650?hl=en#_HTML
|
|
|
|
|
|
|
|
-1. 使用 Google Web Designer 或 HTML5 验证工具检验
|
|
|
|
|
|
|
+1. 执行 `npm run build:google`,使用 Google Web Designer 或 HTML5 验证工具检验 `dist/google/google.html`
|
|
|
2. 检查项:
|
|
2. 检查项:
|
|
|
- [ ] 无外部网络请求(所有资源均已内联)
|
|
- [ ] 无外部网络请求(所有资源均已内联)
|
|
|
- [ ] 文件大小满足限制(≤5 MB)
|
|
- [ ] 文件大小满足限制(≤5 MB)
|
|
@@ -211,11 +228,14 @@ npm run build
|
|
|
|
|
|
|
|
**规范文档**:https://www.playturbo.com/review/doc
|
|
**规范文档**:https://www.playturbo.com/review/doc
|
|
|
|
|
|
|
|
-1. 按平台文档要求上传或提交审核
|
|
|
|
|
|
|
+1. 执行 `npm run build:playturbo` 或 `npm run build:mintegral`,按平台文档要求上传对应产物
|
|
|
2. 检查项:
|
|
2. 检查项:
|
|
|
- - [ ] MRAID 初始化流程正常
|
|
|
|
|
|
|
+ - [ ] 资源加载完成后调用 `window.gameReady()`
|
|
|
|
|
+ - [ ] 结束流程调用 `window.gameEnd()`
|
|
|
|
|
+ - [ ] CTA 只调用 `window.install()`,不主动 `window.open` 或跳 Store URL
|
|
|
|
|
+ - [ ] 产物不包含 `type="module"`、`crossorigin`、`import`、`export`
|
|
|
|
|
+ - [ ] 暴露 `window.gameStart` / `window.gameClose`
|
|
|
- [ ] 音频在用户首次交互后解锁(iOS 限制)
|
|
- [ ] 音频在用户首次交互后解锁(iOS 限制)
|
|
|
- - [ ] CTA 跳转正常
|
|
|
|
|
|
|
|
|
|
### 真机测试
|
|
### 真机测试
|
|
|
|
|
|
|
@@ -241,7 +261,7 @@ A: 检查 WebGL context 是否初始化成功,Console 有无报错。
|
|
|
A: iOS 要求用户交互后才能播放音频,代码已有 unlock 逻辑,确认首次点击后音效正常即可。
|
|
A: iOS 要求用户交互后才能播放音频,代码已有 unlock 逻辑,确认首次点击后音效正常即可。
|
|
|
|
|
|
|
|
**Q: CTA 点击没有跳转?**
|
|
**Q: CTA 点击没有跳转?**
|
|
|
-A: 各平台跳转机制不同——Applovin 由平台后台控制落地页;MRAID 环境下用 `mraid.open(url)`;其余环境用 `window.open(url)`。
|
|
|
|
|
|
|
+A: 各平台跳转机制不同:Applovin 优先用 `ExitApi.exit()`;Unity/通用 MRAID 环境用 `mraid.open(url)`;Google-like 环境用 `window.open(url)`;Playturbo/Mintegral 只允许调用 `window.install()`,不应主动跳 Store URL。
|
|
|
|
|
|
|
|
**Q: 构建产物超过平台大小限制?**
|
|
**Q: 构建产物超过平台大小限制?**
|
|
|
A: 检查 `assets/res/` 下的图片资源,压缩大尺寸图片后重新构建。
|
|
A: 检查 `assets/res/` 下的图片资源,压缩大尺寸图片后重新构建。
|