Vungle可试玩广告制作要求

该文档旨在帮助用户自行制作可在Vungle平台上运行的交互广告内容。

勿做

1. 请勿使用多级目录。所有CSS, JS, 和素材均需要和index.html以及ad.html在同一级目 录下。
2. 请勿在CSS使用vw或vh。
3. 请勿使用location.reload。
4. 请勿添加自己的关闭按钮。 
5. 请勿使用外部链接，所有的素材必须在本地可以打开。
6. 请勿使用额外的href链接跳转。
7. 请勿加载外部素材。由于CORS问题，文件需要在creative内部加载。如果需要，可以使用base64。
8. 请勿自动触发click事件。Vungle会处理广告Click事件。
9. 请勿同时触发Complete和Download(CTA)事件。

要做

1. 请确定输出的最终文件没有javascript错误 
2. 请确定最终文件可以在屏幕旋转时进行自适应。 
3. 请确定CTA是可见可触发的。
4. 请确定Ad Pause和Ad Resume事件，能够正常控制视频和音频。
5. 请确定使用Complete事件来通知SDK，广告播放完毕。一般至少试玩3步后，再调用该事件。
6. 请确定所有的素材都是压缩状态，且总大小不超过5M。

事件处理

CTA

ad.html中的CTA按钮需要调用​parent.postMessage('download','*')，示例:

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

Complete

当广告体验结束时，请调用 ​parent.postMessage('complete','*')，​示例:

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

Ad Pause

使用该Listener来暂停audio/video/animations。该事件一般在广告对用户不可见时触发。例如：当有警告弹窗出现在广告之上时或者当用户退出app时。

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

Ad Resume

使用该Listener来恢复播放audio/video/animations。该事件一般在广告重新对用户可见时触发。例如：当广告上层来自系统弹窗消失，或用户将app从后台置于前台时。

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

Windows广告注意事项

如果期望可玩广告在windows平台运行，那么需要适配额外的对比度和分辨率，具体如下：

* Desktop full-screen

* Desktop window (与移动设备分辨率类似)

* 常见额外对比度 (示例):

 * 2:5

 * 5:2 long/tall

 * 1:1 square windows

示例代码

请在这里试验效果：

https://codepen.io/anon/pen/ajoGze

请在这里下载模板：

https://bitbucket.org/vungle_creative_labs/vcl-templates/get/33d22f8ec9e3.zip