开发者资源

制作适用于 Google 移动广告 SDK 的广告

本文介绍了如何制作适用于 Google 移动广告 SDK 的广告。首先，探讨了开发者需要获得哪些信息。然后，讲解了如何使用这些信息来创建用于指定广告行为的代码。

可用的广告格式包括应用内横幅广告、展开式横幅广告和全屏广告。每种广告格式都有自己的广告素材资源和功能。例如，展开式横幅广告可在被点击后更改尺寸和背景颜色。Google 移动广告 SDK 与 MRAID 标准兼容。

若要使用 Google 移动广告 SDK，您必须为您的开发者收集应用 ID、广告单元 ID 和广告尺寸。

本页内容：

查找 Google 移动广告应用 ID

  1. 登录 Google Ad Manager。
  2. 依次点击广告资源 > 应用。
  3. 找到您需要 ID 的移动应用，或认领新的移动应用。
  4. 点击 点击复制 图标将“应用 ID”复制到剪贴板。例如 ca-app-pub-3940256099942544~3347511713
  5. 将此信息发送给您的开发者。

查找广告单元 ID 和尺寸

  1. 依次点击广告资源 > 广告单元。
  2. 点击相应广告单元（您要为其创建广告代码）的名称，或者创建新的广告单元。
  3. 点击代码。
  4. 选择“移动应用代码”这一代码类型，然后点击继续。
  5. 在“生成的代码”页面中，复制“广告单元 ID”和“广告单元尺寸”。将此信息发送给您的开发者。

其他 JavaScript 函数

如需利用 Google 移动广告 SDK 的功能，请参阅开发者文档。

下文重点介绍了一些可用于修改广告素材 <head> 部分的函数。

全部展开  全部收起

使用设备功能

借助此 SDK，开发者可以使用 iOS 和 Android 中的应用内浏览器功能。这使得开发者能够在平台支持的情况下，通过 HTML5 使用加速度计、陀螺仪和罗盘等设备功能。

开发者文档详细了解这些功能（Android 和 iOS）。
应用事件

应用事件让您可以在广告素材分派应用事件时，在应用中执行自定义代码。借助应用事件，您可以引入能与应用互动的自定义广告执行功能，比如更改应用的背景色。

开发者文档了解如何实施应用事件。
将图片调整为适合全屏展示

如果您发现全屏广告只占据部分屏幕，请在广告的 <head> 部分中插入以下代码：

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>。

应用内广告的示例代码：在移动设备上点击转到日历（使用 MRAID v2.0）

此模板是一个横幅广告单元，最开始会展示为屏幕底部的横幅广告。如果用户点击该横幅，那么他们的默认“日历”应用会在获其同意的情况下创建一个新活动。

行为和界面元素

此类广告素材包含以下界面元素：

  • 横幅图片及其高度和宽度。
  • 必须提供与相应活动相关的信息，如摘要、说明、地点、开始日期和结束日期。
名称 类型 是否必需 说明
横幅图片文件 文件 是 横幅广告的图片。
横幅图片宽度 数值 是 横幅图片的宽度。
横幅图片高度 数值 是 横幅图片的高度。
活动摘要 文本 是 活动的摘要。
活动说明 文本 是 活动的说明。
活动地点 文本 否 活动的地点。
活动开始日期 文本 是 活动的开始日期。开始日期应采用如下格式：“2016-10-22T00:00-05:00”。该日期表示 2016 年 10 月 22 日午夜零点至凌晨 5 点。
活动结束日期 文本 是 活动的结束日期。结束日期应采用如下格式：“2016-10-22T00:00-05:00”。该日期表示 2016 年 10 月 22 日午夜零点至凌晨 5 点。
  

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<head>
<script type="text/javascript" src="mraid.js"></script>
</head>
<body>
<div id="normal" style="display:none; margin:auto;top:0px;text-align:center">
<a href="#" onClick="addToCalendar()"; return false;>
<img width="[%BannerImageWidth%]" height="[%BannerImageHeight%]" src="[%BannerImageFile%]" />
</a>
</div>
<script>

// Check whether mraid is ready by adding event listener
function doReadyCheck(){
  if(mraid.getState() == 'loading'){
    mraid.addEventListener("ready", mraidIsReady);
  }else{
    showMyAd();
  }
}

// Once mraid is ready, it does not need to listen to the ready event anymore
function mraidIsReady(){
  mraid.removeEventListener("ready", mraidIsReady); 
  showMyAd();
}

// Only show Ad when mraid is ready
function showMyAd(){
  var advertElement = document.getElementById("normal");
  advertElement.style.display = 'block';
}

// Add event to the calendar using appropriate input if the device supports calendar manipulation
function addToCalendar(){

  // Register the click by creating an image
  var x = document.createElement("IMG");
  x.setAttribute("src", "%%CLICK_URL_ESC%%");
  window.top.document.body.appendChild(x);

  if(mraid.getVersion()=="2.0"){
    mraid.createCalendarEvent({summary: "[%EventSummary%]", description: "[%EventDescription%]", location: "[%EventLocation%]", start: "[%EventStartDate%]", end: "[%EventEndDate%]"}); 
  } 
  return false;
}

doReadyCheck();
</script>
</body>
</html>

测试广告单元名称：ali_Calendar

展示广告的示例代码：展开式页脚模板（使用 MRAID v2.0）

此模板是一个双组件广告单元，最开始会展示为屏幕底部的横幅广告。如果用户点击该横幅，广告会自动调整为某些特定的展开后尺寸。如果用户点击展开后的广告，会重定向至点击后到达网址。

广告的宽度可以是相应横幅的尺寸，也可以占据整个屏幕的宽度（前提是 FullWidthResize 的值为“Yes”）。

行为和界面元素

此类广告素材包含以下界面元素：

  • 广告素材资源（对于所有这些资源，均须提供文件、高度和宽度）
    • “横幅图片”组件
    • “调整大小后的横幅”组件
    • “关闭”按钮图标
  • 可调整“关闭”按钮的位置，使其位于屏幕的右上角或左上角。
  • 可更改广告的背景颜色。
名称 类型 是否必需 说明
横幅图片文件 文件 是 将在横幅广告中展示的图片。
横幅图片高度 数值 是 横幅图片的高度。
横幅图片宽度 数值 是 横幅图片的宽度。
背景颜色 文本 是 调整大小后的图片所占空间以及横幅所占空间的背景颜色。
点击后到达网址 网址 是 当用户点击调整大小后的广告时会被重定向到的网址。
调整大小后的图片文件 文件 是 当用户点击横幅时将会展示的图片。
调整大小后的图片高度 数值 是 调整大小后的图片的高度。
调整大小后的图片宽度 数值 是 调整大小后的图片的宽度。
“关闭”图标 文件 是 “关闭”按钮的图片文件。
“关闭”图标宽度 数值 是 “关闭”按钮的宽度。（平均宽度为 30）。
“关闭”图标高度 数值 是 “关闭”按钮的高度。（平均高度为 30）。
“关闭”按钮的位置 列表 否 可调整“关闭”按钮的位置，使其位于屏幕的右上角或左上角。可能的值为“右”或“左”。若将此项留空，则“关闭”按钮会被放置在屏幕的右上角。
大小调整为整个宽度 列表 否 如果值为“是”，则已调整大小的广告会占据整个宽度。如果值为“否”，则广告宽度将与原始横幅的尺寸相同。可能的值为“是”和“否”，默认值为“否”。
  

<html><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<head>
<script type="text/javascript" src="mraid.js"></script>
<style>
#close_button {
  position: absolute;
  top: 4px;
  right: 4px;
  display:block;
}

#resized img {
  display : block;
  margin : auto;
}
</style>
</head>
<body>
<div id="normal" style="display:none; margin:auto;top:0px;text-align:center">
<a onClick="resize();">
<img width="[%BannerImageWidth%]" height="[%BannerImageHeight%]" src="[%BannerImageFile%]"  />
</a>
</div>

<div id="resized" style="display:none; top:0px;">
<a onClick="openURL()">
<img width="[%ResizedImageWidth%]"  height="[%ResizedImageHeight%]" src="[%ResizedImageFile%]"/>
</a>
<div id="close_button">
<img width="[%CloseIconWidth%]" height="[%CloseIconHeight%]" src="[%CloseIcon%]"/> 
</div>
</div>

<script>
<!--
// Variables
var closeButton = document.getElementById("close_button");
var bodyElement = document.body;
var advertElement = document.getElementById("normal");
var resizedElement = document.getElementById("resized");
var resizeBannerWidth;

function changeBodyElementStyle() {
  // Change background color
  if ("[%ResizedBackgroundColor%]") {
    bodyElement.style.backgroundColor = "[%ResizedBackgroundColor%]";
    resizedElement.style.backgroundColor = "[%ResizedBackgroundColor%]";	
  }
}

function openURL() {
  mraid.open("%%CLICK_URL_ESC%%[%ClickThroughURL%]");
}

//Check whether MRAID is ready by adding event listener
function checkIfReady(){
  if(mraid.getState() == 'loading'){
    mraid.addEventListener("ready", mraidIsReady);
  } else{
    showMyAd();
  }
}

function mraidIsReady(){
  mraid.removeEventListener("ready", mraidIsReady); 
  showMyAd();
}

// Set resizing properties and resize
function resize(){
	// If FullWidthResize is "Yes", then the resized advert takes up the whole width. Otherwise takes up the width of the original banner
	if ("[%FullWidthResize%]" == "Yes") {
	    resizeBannerWidth = screen.width;
	} else {
	    resizeBannerWidth = mraid.getDefaultPosition().width;
	}	
	
  if(mraid.getVersion()=="2.0"){
    if ("[%PositionOfCloseButton%]" === "Left") {
	  closeButton.style.left = "0";

mraid.setResizeProperties({"width":""+resizeBannerWidth+"","height":"[%ResizedImageHeight%]","offsetX":"","offsetY":"","customClosePosition":"top-left", "allowOffscreen":false});
	} else {
	  closeButton.style.right = "0";

mraid.setResizeProperties({"width":""+resizeBannerWidth+"","height":"[%ResizedImageHeight%]","offsetX":"","offsetY":"","customClosePosition":"top-right", "allowOffscreen":false});
	}
    mraid.resize();
	return false;
  }
  else{
    return true;
  }
}

// Displays the advert and add an event listener to it to detect whether to resize
function showMyAd(){
  advertElement.style.display = "inline";
  mraid.addEventListener("stateChange",updateAd); 
}

// updateAd is called when MRAID changes state - calls toggleLayer to expand/ reduce ad size
function updateAd(state){
  if (state == "resized"){
    toggleLayer('normal', 'resized');
  }else if(state == "default"){
    toggleLayer('resized', 'normal');
  }
}

// Goes to the other state (either resized or banner)
function toggleLayer(fromLayer, toLayer){
  var fromLayerElem = document.getElementById(fromLayer);
  fromLayerElem.style.display = 'none';
  var toLayerElem = document.getElementById(toLayer);
  toLayerElem.style.display = 'block';
}

changeBodyElementStyle();
checkIfReady();
//-->
</script>
</body>
</html>

测试广告单元名称：ali_resizeBanner

此模板是一个双组件广告单元，最开始会展示为屏幕底部的横幅广告。如果用户点击该横幅，相应广告将会自动调整大小以覆盖整个屏幕。如果用户点击展开后的广告，会重定向至点击后到达网址。

此模板使用默认的 MRAID“关闭”按钮。

行为和界面元素

此类广告素材包含以下界面元素：

  • 广告素材资源：
    • “横幅图片”组件（还必须提供高度和宽度）
    • “展开横幅”组件
  • 可更改横幅广告和展开后广告的背景颜色
名称 类型 是否必需 说明
横幅图片文件 文件 是 将在横幅广告中展示的图片。
横幅图片高度 数值 是 横幅图片的高度。
横幅图片宽度 数值 是 横幅图片的宽度。
背景颜色 文本 是 横幅图片所占空间的背景颜色。
点击后到达网址 网址 是 当用户点击调整大小后的广告时会被重定向到的网址。
展开后图片文件 文件 是 当用户点击横幅时将会展示的图片。
展开后图片高度 数值 是 展开后图片的高度。
展开后图片宽度 数值 是 展开后的图片的宽度。
  

       
<html><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<head>
<script type="text/javascript" src="mraid.js"></script>
</head>
<body>
<div id="normal" style="display:none; margin:auto;top:0px;text-align:center">
<a onClick="expand();">
<img width="[%BannerImageWidth%]" height="[%BannerImageHeight%]" src="[%BannerImageFile%]" />
</a>
</div>
<div id="expanded" style="display:none;top:0px;text-align:center">
<a onClick="openURL()">
<img width="[%ExpandedImageWidth%]"  height="[%ExpandedImageHeight%]" src="[%ExpandedImageFile%]" />
</a>
</div>

<script>
<!--

function openURL() {
  mraid.open("%%CLICK_URL_ESC%%[%ClickThroughURL%]");
}

// Change background color if present
function changeBodyElementStyle() {
  if ("[%BackgroundColor%]") {
    var bodyElement = document.body;
    bodyElement.style.backgroundColor = "[%BackgroundColor%]";
  }
}	

// Check whether MRAID is ready by adding event listener
function checkIfReady(){
  if(mraid.getState() == 'loading'){
    mraid.addEventListener("ready", mraidIsReady);
  } else{
    showMyAd();
  }
}

// Once MRAID is ready, it does not need to listen to the ready event anymore
function mraidIsReady(){
  mraid.removeEventListener("ready", mraidIsReady); 
  showMyAd();
}

function showMyAd(){
  // Displays the advert
  var advertElement = document.getElementById("normal");
  advertElement.style.display = "inline";

  // Add event listener to detect whether to expand or not
  mraid.addEventListener("stateChange",updateAd); 

  // Change background color of the expanded advert
  var expandedDiv = document.getElementById("expanded");
  if ("[%BackgroundColor%]") {
    expandedDiv.style.backgroundColor = "[%BackgroundColor%]";
  }
}

function expand() {
  if(mraid.getVersion()=="2.0"){
    mraid.expand();
    return false;
  }
  else {
    return true;
  }
}

// updateAd is called when mraid changes state
// Calls toggleLayer to expand/ reduce ad size
function updateAd(state){
  if (state == "expanded"){
    toggleLayer('normal', 'expanded');
  }else if(state == "default"){
    toggleLayer('expanded', 'normal');
  }
}

// Goes to the other state (either expands or banner)
function toggleLayer(fromLayer, toLayer){
  var fromLayerElem = document.getElementById(fromLayer);
  fromLayerElem.style.display = 'none';
  var toLayerElem = document.getElementById(toLayer);
  toLayerElem.style.display = "block";
}

changeBodyElementStyle();
checkIfReady();
//-->
</script>
</body>
</html>

测试广告单元名称：ali_expandDefaultClose

用于自动关闭插页式广告的示例代码
只有直接预订的插页式广告才能自动关闭；通过动态分配（即 Ad Exchange、AdSense 或 AdMob）投放的插页式广告只能由用户来关闭。

如需让插页式广告在固定时间段后关闭，请执行以下操作：

  • 在广告中添加相应代码，从而在经过固定时间段后关闭插页式广告。可将以下代码用作此方法的模板：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
      <script type="text/javascript" src="https://www.gstatic.com/afma/api/v1/google_mobile_app_ads.js"></script>
      <script>
        <!--
          function
          _admStartCountDown(){setTimeout('admob.opener.close()',parseInt('[%displayTime%]')*1000)}
          function
          _admOnload(){if(admob.opener.isOverlayShowing()){_admStartCountDown()}else{admob.events.addEventListener('onshow',
          _admStartCountDown)}}
          if(window.addEventListener){window.addEventListener("load",_admOnload,false)}else{window.attachEvent("onload",_admOnload)}
        //-->
      </script>
  </head>
  <body>
    [Your_AdCode_Goes_Here]
  </body>
</html>
目标窗口：应用内叠加窗口

通过使用 admob.opener.openOverlay()，您可以打开一个全屏叠加浏览器窗口，窗口中的内容可从屏幕底部以动画形式呈现。该浏览器窗口没有状态栏，且始终会在左上角显示一个“关闭”按钮。此选项非常适用于展开式广告，因为这类广告中的全屏广告素材可托管在单独的页面上。

下面是一个横幅广告的示例代码，其中的全屏广告单元可加载到叠加的浏览器窗口中。您需要将以下占位元素替换为自己的值。如果广告资源网支持，您可以使用该示例代码创建一个广告素材模板。

  • [BANNER_UNIT]：横幅广告素材的网址。
  • [WIDTH]：横幅广告素材的宽度。
  • [HEIGHT]：横幅广告素材的高度。
  • [FULLSCREEN_UNIT]：全屏广告素材的网址。请注意，全屏广告单元应包含 JavaScript 代码，以便在用户点击它后解析目标网址，并将用户重定向到着陆页。如需了解详情，请参阅处理全屏广告单元中的目标网址。
  • [DESTINATION_URL]：目标网页的网址。
  • [FALLBACK_URL]：未执行 JavaScript 函数时会使用的后备目标网址。
  • [ORIENTATION]：目标网址支持的屏幕方向（使用“p”表示支持纵向，“l”表示支持横向，省略此值表示支持任意屏幕方向）。

下面是一个广告素材代码示例：


<!DOCTYPE html>
<head>
<meta name="viewport" 
content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>

<script type="text/javascript" src="https://www.gstatic.com/afma/api/v1/google_mobile_app_ads.js"></script>
</head>

<body>
<a href="[FALLBACK_CLICKURL]" 
onClick="admob.opener.openOverlay('%%CLICK_URL_ESC%%[FULLSCREEN_UNIT]?destination=[DESTINATION_URL]', 
'[ORIENTATION]'); return false;"><img border="0" 
src="[BANNER_UNIT]" width="[WIDTH]" height="[HEIGHT]"></a>
</body>
</html>

处理全屏广告单元中的目标网址

admob.opener.openOverlay() 函数没有提供用于指定 html 内容目标网址的选项。

假设您在指定全屏广告单元时以键值对的形式传递了目标网址（例如“https://link.to.fullscreen.unit?destination=https://my.destination.url”），那么您可以编写一个 JavaScript 函数，然后添加 HTML 代码段来捕获点击并将用户重定向到目标网页。

下面是一个网页源代码示例：


<!DOCTYPE html>
<head>
<meta name="viewport" 
content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>

<script type="text/javascript" src="https://www.gstatic.com/afma/api/v1/google_mobile_app_ads.js"></script>

<script type="text/javascript">
function destinationUrl() {
  // Get current url after ?
  var destinationUrl = window.location.search;

  // Strip off the leading '?'
  destinationUrl = destinationUrl.substring(1);
  // Parse destination=url key-value pair
  var kvPair = destinationUrl.split("=");
  var key = kvPair[0]; // key: destination
  var value = kvPair[1]; // value: url
  var url = decodeURIComponent(value); 

  // Open destination inside overlay
  window.location = url;

  // Open destination in an external browser
  // admob.opener.openUrl(url, true);
}
</script>
</head>

<body>
<div style="position:relative;">
<!-- Load content source into an iframe -->
<iframe src="https://creative.admob.com/t1/bestBuy/tradeinJul/gi/" 
align="middle" frameborder=0 width=320 height=480 marginheight=0 marginwidth=0 scrolling=no></iframe>
<!-- Create a clickable area -->
<a href="#" onClick="destinationUrl(); return false;" style="position:absolute; top:0; left:0; 
display:inline-block; width:320px; height:480px; z-index:5;"></a>
</div>
</body>
</html>

MRAID 兼容性

Google 移动广告 SDK 支持 IAB 为帮助在移动应用中投放广告而推出的移动富媒体广告接口定义 (MRAID) 标准。您可从添加定位条件 > 设备功能下的订单项定位设置中将订单项设为 MRAID v1 或 MRAID v2。

MRAID 要求：

  • 对于 Android，MRAID v2 需要使用 Google Play 服务 v7.8 或更高版本；对于 iOS，MRAID v2 则需要使用 Google 移动广告 SDK v7.4.0 或更高版本。
  • 对于 Android，MRAID v3 需要使用 Google Play 服务 v15.0.0 或更高版本；对于 iOS，MRAID v3 则需要使用 Google 移动广告 SDK v7.30.0 或更高版本。

如要在您的广告素材中使用 MRAID 功能，您必须先将 mraid.js 导入相应广告素材。为此，您需在广告素材中添加 <script src="mraid.js">。然后，作为一款与 MRAID 兼容的 SDK，Google 移动广告 SDK 便会在该广告素材中查找此代码，并会将其替换为指向 MRAID 实施的实际网址。其他支持 MRAID 的 SDK 也会执行相同的操作，尽管它们的实际网址会有所不同。

您可酌情在同一广告素材中添加 MRAID 库和 Google 移动广告 SDK 功能。

仅当用户点击广告后，mraid.resize() 和其他类似函数才会发挥作用。这样可以防止恶意广告素材自动调整大小并占据整个屏幕。
开发者文档详细了解 MRAID 支持（Android 或 iOS）。

该内容对您有帮助吗？

您有什么改进建议？

需要更多帮助？

请尝试以下步骤：

向帮助社区发帖 向社区成员寻求答案
与我们联系 向我们提供更多信息，以便我们帮您解决问题
true
版本说明

获悉最新的 Ad Manager 功能和帮助中心更新。

了解新变化

搜索
清除搜索内容
关闭搜索框
主菜单
3997707332572107564
true
搜索支持中心
true
true
true
true
true
148
false
false