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 

Powered by Creativity Driven by Performance Sign Up Here

Questions?

Need further assistance, feel free to reach out to us, we’re here to help!

这篇文章有帮助吗?