Vungle 试玩广告开发文档

本文档指导您创建在 Vungle 网络上兼容的广告。

Requirements

创建 Vungle 兼容的广告体验时，必须遵循以下标准，否则可能无法通过 QA：

✅ Do

• 将主 HTML 文件命名为 index.html

• 确保使用 Complete 事件在广告体验完成时通知 SDK。这应该在用户完成创意的交互元素后进行。在加载带有 CTA 的结束屏幕时触发就是一个很好的例子

• 检查广告中没有 JavaScript 错误，并确保通过标记验证（使用 W3C 等验证器，或在本地开发时进行代码检查）

• 确保您的创意在两种方向上都兼容，必要时使用宽高比断点

• 确保在体验过程中 CTA 可操作且可见

• 确保在 SDK 暂停或恢复广告时使用 Ad Pause/Ad Resume 事件来控制视频和音频

• 确保所有资源都经过压缩，广告的总文件大小不应超过 5MB

🚫 Do NOT

• 不要使用嵌套目录结构。所有文件（如 CSS、JS 和其他资源）必须与 index.html 或 ad.html 保持在同一层级

• 不要在 CSS 中使用 vw 和 vh

• 不要使用 document.location.reload

• 不要使用自己的关闭按钮。我们的模板会自动添加关闭按钮

• 不要使用外部链接加载资源。所有资源必须在创意内本地引用

• 不要使用广告跟踪链接或任何外部跟踪库

• 不要外部加载资源。由于 CORS（跨源），文件需要在创意内加载。必要时使用 base64

• 不要包含对 MRAID 文件的引用，如 mraid.js

• 不要自动触发点击事件。我们的模板会自动处理额外的点击事件

• 不要使用无效或无法通过标记验证的代码（请使用 W3C 等标记验证器检查代码是否完整且正确工作）。这确保了它能在我们不同 SDK 平台（iOS、Android、Windows 和 Amazon）支持的所有浏览器中一致运行

Making a Creative

CTA

CTA 应调用 parent.postMessage('download','*')，且仅在用户操作/点击 CTA 时使用。例如：

<a href="#" onclick="parent.postMessage('download','*')">Download</a>

Complete

当广告体验的可玩/交互部分结束时，可玩广告应调用 parent.postMessage('complete','*')。例如，当游戏体验完成且可玩广告体验中唯一剩余的操作是 CTA 点击时（即结束屏幕）。complete 事件不应与 CTA/Download 点击绑定，也不应在没有任何交互的情况下触发。

function onGameComplete() {
    parent.postMessage('complete','*');
}

Ad Pause

使用此事件暂停音频/视频/动画。当广告暂时对用户不可见时会发生此事件；例如，如果警告出现在广告上方，或者用户在观看广告时退出应用程序。

window.addEventListener('ad-event-pause', function() {
    // Pause audio/video/animations inside here
});

Ad Resume

使用此事件恢复音频/视频/动画。当广告再次对用户可见时会发生此事件；例如，在关闭出现在广告上方的警告后，或当用户在广告播放时恢复应用程序。

window.addEventListener('ad-event-resume', function() {
    // Resume audio/video/animations inside here
});

Developing Ads for Windows

任何打算在 Windows 上运行的可玩广告都需要考虑额外的宽高比和分辨率，例如以下之一：

• Desktop full-screen

• Desktop window（类似于移动设备的宽高比/分辨率）

• 其他极端宽高比（例如）：

  • 2:5

  • 5:2 long/tall

  • 1:1 square windows