HTML5 页内广告素材制作指南

添加 HTML5 启动器

启动器是 Studio 的核心代码库。您可以将启动器想象成广告素材的“大脑”。所有组件和 API 调用都必须通过启动器来实施。所有富媒体广告素材都必须包含启动器库。添加启动器后,可自动确保广告素材符合以下条件:

  • 能够对展示时间、展示次数、互动时长和其他标准指标进行标准跟踪
  • 能够处理更复杂的功能,如视频和展开功能
如果您使用 Google Web Designer 制作广告,系统会在您选择“Display & Video 360”环境时自动为您添加启动器。这种情况下无需添加下面的任何代码。

添加启动器

向 HTML 文件的 <head> 标记添加一个链接到启动器的脚本代码:

<script src="https://s0.2mdn.net/ads/studio/Enabler.js"></script>

这样做可以在 Enabler 全局命名空间中提供一个单例对象。若要对其调用方法,只需调用 Enabler.isInitialized()、Enabler.exit() 等即可。

设置广告素材的尺寸

与图片或视频不同,HTML 文档本身不包含尺寸。为了以合适的尺寸展示广告,请在 head 部分为 HTML 文件添加广告尺寸元标记。

具体方法是:复制下面的示例元标记,然后更改宽度和高度,使其与广告素材尺寸保持一致。

适用于 300x250 广告素材的广告尺寸元标记示例

<meta name="ad.size" content="width=300,height=250">

可选:设置展开标记

有几个可选的方法可供您用来设置展开式广告的行为。如果您需要使用其中的任何方法,请将其放在下文中的启动器初始化代码之前。这些方法是:

  • Enabler.setExpandingPixelOffsets(left:number, top:number, opt_expandedWidth:number, opt_expandedHeight:number)
    设置展开式广告的场景偏移。
  • Enabler.setIsMultiDirectional(value:Boolean)
    允许广告朝多个方向展开。

  • Enabler.setStartExpanded(startExpanded:Boolean)
    广告加载时,加载已经打开的展开版本,而不是等待用户将其展开。

    如需详细了解这些方法,请参见 Studio 的 HTML5 SDK

等待启动器初始化

在启动器完成初始化之前,系统无法自动执行广告中的任何内容。这可确保在用户与相应广告互动前,所有内容都已正常加载,并且启动器方法可供调用。

在 JavaScript 中,使用启动器的 isInitialized 方法验证启动器是否已初始化,该方法会返回 true 或 false。如果返回的是 true,系统会执行调用以开始运行函数,在此示例中为 launcherInitHandler()。如果返回的是 false,系统会执行后备调用,以便监听启动器的 INIT 事件。

// 如果返回的是 true,则开始运行函数。如果返回的是 false,则监听 INIT。
window.onload = function() {
  if (Enabler.isInitialized()) {
    enablerInitHandler();
  } else {
    Enabler.addEventListener(studio.events.StudioEvent.INIT, enablerInitHandler);
  }
}

function enablerInitHandler() {
  // 开始礼让加载,或开始播放动画,
  // 加载图片素材资源,调用启动器方法
  // 并且/或者添加其他 Studio 模块。
}

启动器初始化后,便会开始播放动画,加载图片素材资源并调用跟踪方法,或者添加其他 Studio 模块。

更新启动器

当新版启动器发布后,您会在 Studio 界面中看到一条警告,提示广告素材的启动器版本已过时。若要升级为最新版启动器,请重新上传广告素材的主要 HTML 素材资源。

该内容对您有帮助吗?

您有什么改进建议?
搜索
清除搜索内容
关闭搜索框
主菜单
10658078762095082713
true
搜索支持中心
true
true
true
true
true
74220
false
false