打开空间

实施指南

前贴片视频

Pre-roll video ads

在播放器内、访客选择观看的视频开始之前播放的视频广告。

  • Ad Manager
  • Ad Exchange
  • AdSense(通过 Ad Manager)
  • 在视频播放器内(手机和桌面端)
桌面端
手机

1 分钟看懂

什么是前贴片视频

您去电影院时,电影开始前是不是会先放几段预告片和广告?前贴片视频就是这样,只不过放在您的网站上。访客点击播放想看视频,在内容出现之前,同一个播放器里会先播放一段广告。播放器就是播放视频的那个框,带有播放、暂停和音量按钮。广告结束后,所选的视频才开始。

要做到这一点,播放器必须知道如何请求广告。Google 提供了一套叫做 IMA SDK 的代码包,您把它和播放器放在一起使用。它会使用广告标记向 Ad Manager 发出请求。广告标记是一个网址,带有广告位的信息,比如广告单元和播放器尺寸。返回的结果采用 VAST 格式,这是一种标准格式,就像一份说明书,告诉播放器播放哪个视频以及如何统计观看次数。如果网站使用了视频广告规则,返回的结果可能是 VMAP,就像电视节目表,说明每个广告时段在什么时候插入。

Google 还特别说明了视频自动开始播放(即自动播放)的问题。Chrome 和 Safari 等浏览器有各自的规则,视频往往只有在静音时才能自动开始。没有简单的方法可以提前知道浏览器是否允许,唯一的办法就是尝试播放。因此,IMA 指南提到,在手机上,广告容器应由访客的操作来触发,比如点击播放按钮。而且如果播放器将自动播放或静音播放,就应该在请求中说明,这样返回的就只会是能以这种方式播放的广告。

当视频就是访问的原因时,前贴片广告就很值得,例如一堂课、一道食谱或一条视频新闻。在 Google 的视频政策中,这个广告位叫插播,意思是处在用户选择观看的内容之中,必须正确声明。请始终记住:用户是为视频而来的,所以广告不能干扰控件,也不能卡住内容。

分步说明

如何实施

  1. 创建视频广告单元在 Ad Manager 中,前贴片广告使用视频和音频广告单元。播放器要用的标记就来自这个广告单元。
  2. 生成广告标记进入库存、广告单元,打开广告单元并点击标记。选择适用于视频和音频的 Google 发布商代码,按步骤操作并复制标记。方括号中的值需要由播放器在请求时填入。
  3. 把 IMA SDK 放到页面中请在您自己的代码之前加载 IMA SDK 脚本。在视频上方创建一个放广告的容器,并用 AdDisplayContainer 把容器和视频连接起来。AdDisplayContainer 是 IMA 中负责展示广告的部分。
  4. 请求广告用你的标记创建 AdsLoader 和 AdsRequest,并提供线性广告位的宽度和高度。当返回多个广告时,这能帮助 IMA 选出合适的广告。
  5. 暂停并恢复内容当 IMA 请求暂停(CONTENT_PAUSE_REQUESTED 事件)时,暂停视频。当它请求继续(CONTENT_RESUME_REQUESTED)时,恢复播放。如果出错,就销毁广告管理器,让视频不带广告直接播放。
  6. 从访客的点击开始在播放按钮上,先初始化广告容器,再启动并开始 AdsManager。IMA 指南指出,在手机上,广告容器必须由访客的操作来初始化。

实施示例

代码及屏幕上的效果

放在视频页面上:IMA 脚本放在顶部,播放器上方放广告容器,并加上在访客点击“观看”时请求前贴片广告的代码。
<!-- 1. Carrega o IMA SDK (antes do seu código) -->
<script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>

<!-- 2. O vídeo e, por cima dele, a caixa do anúncio -->
<div style="position:relative;width:640px;height:360px">
  <video id="conteudo" width="640" height="360" playsinline controls>
    <source src="meu-video.mp4" type="video/mp4">
  </video>
  <div id="adContainer" style="position:absolute;top:0;left:0"></div>
</div>
<button id="playButton">Assistir</button>

<script>
  var video = document.getElementById('conteudo');
  var adDisplayContainer = new google.ima.AdDisplayContainer(
      document.getElementById('adContainer'), video);
  var adsLoader = new google.ima.AdsLoader(adDisplayContainer);
  var adsManager;

  adsLoader.addEventListener(
      google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED,
      function (e) {
        adsManager = e.getAdsManager(video);
        adsManager.addEventListener(
            google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED,
            function () { video.pause(); });
        adsManager.addEventListener(
            google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED,
            function () { video.play(); });
        adsManager.addEventListener(
            google.ima.AdErrorEvent.Type.AD_ERROR, onAdError);
      });
  adsLoader.addEventListener(
      google.ima.AdErrorEvent.Type.AD_ERROR, onAdError);

  function onAdError(e) {
    console.log(e.getError());
    if (adsManager) { adsManager.destroy(); }
    video.play(); // sem anúncio, o vídeo continua
  }

  // 3. Pedido do anúncio (IDs de exemplo)
  var adsRequest = new google.ima.AdsRequest();
  adsRequest.adTagUrl = 'https://pubads.g.doubleclick.net/gampad/ads?' +
      'iu=/1234567/exemplo&sz=640x480&env=vp&gdfp_req=1&output=vast' +
      '&unviewed_position_start=1&vpa=click&vpmute=0&plcmt=1' +
      '&description_url=https%3A%2F%2Fwww.exemplo.com%2Fvideo&correlator=';
  adsRequest.linearAdSlotWidth = 640;
  adsRequest.linearAdSlotHeight = 400;
  adsLoader.requestAds(adsRequest);

  // 4. Só começa quando a pessoa clica em Assistir
  document.getElementById('playButton').addEventListener('click', function () {
    adDisplayContainer.initialize();
    try {
      adsManager.init(640, 360, google.ima.ViewMode.NORMAL);
      adsManager.start();
    } catch (err) {
      video.play();
    }
  });
</script>
在桌面端广告在播放器内播放,位置就是视频将要播放的地方,在内容开始之前。广告结束后,所选的视频开始播放。
在手机上它同样出现在播放器内,通常是在访客点击播放之后。在 iPhone 上,视频需要 playsinline 属性,才能在页面内播放,而不是进入全屏播放器。

Google 的建议

可以做和不可以做

可以

  • 在用户选择的视频之前,在播放器内使用 IMA SDK 播放广告,IMA SDK 是 Google 对插播广告位要求的工具之一。
  • 让广告从访客点击播放按钮时开始,这是 IMA 指南对手机的建议。
  • 可以使用自动播放,包括静音播放,前提是播放器在请求中说明会自动播放,以及是否静音。
  • 广告出错时,让视频正常播放,Google 的示例就是这样做的。

不可以

  • 不能错误声明广告位:带视频的播放器中的广告,必须声明为插播或补充内容(伴随主要内容的视频)。
  • 不得让广告和视频的控件被遮挡、隐藏或失灵。
  • 不得同时有多个带声音的视频自动播放,也不得在屏幕上同时有多个自动播放的播放器可见。
  • 广告不得在广告位至少 50% 可见之前自动开始。
  • 不要使用 IMA 产品通过 YouTube 视频赚钱。

提示

正确的做法

注意

常见错误

直接在电脑上打开文件

IMA 指南要求通过网络服务器提供页面,即使是本地服务器也一样。直接打开 HTML 文件可能会导致测试失败。

在手机上没有访客操作就开始

在手机上,广告容器必须由访客的操作来初始化,比如点击播放。否则广告可能无法播放。

没有处理广告错误

有问题的 VAST 响应可能会导致错误。Google 的示例会销毁广告管理器并播放视频,这样访客就不会卡在静止的画面上。

忘记调整尺寸

窗口大小改变时,Google 的示例会用视频的尺寸调用 AdsManager 的调整大小方法。否则,广告的尺寸可能不对。

常见问题

要用前贴片广告,我需要广告规则吗?

不需要。播放器可以通过 IMA 请求 VAST 标记。Google 表示,广告规则参数(ad_rule)对投放广告不是必需的,只有使用视频广告规则时才需要。

VAST 和 VMAP 有什么区别?

VAST 是告诉播放器播放哪条广告的响应。VMAP 是配合广告规则使用的响应,说明各个广告时段何时插入。标记通过 output 参数选择格式,取值如 vast 和 vmap。

前贴片广告可以自动播放吗?

可以,前提是浏览器允许。Chrome 和 Safari 会限制自动播放,尤其是带声音的。播放器应先测试,并在请求中说明是否会自动播放和静音播放,在手机上则要由访客的操作来启动广告。

如果广告没有加载,会怎么样?

Google 的指南要求在广告未能加载时视频继续播放。在示例中,广告管理器会被销毁,视频不带广告继续播放。

资料库

Google 官方来源

本页内容均以 Google 官方文档为准。可直接阅读原文:

你的网站是否正确使用了这种格式?

审核会像访问者一样读取网站,不点击任何内容,并告诉你需要修正什么。

开始审核