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

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

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

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

本页内容：

查找 Google 移动广告应用 ID
查找广告单元 ID 和尺寸
其他 JavaScript 函数
MRAID 兼容性

查找 Google 移动广告应用 ID

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

查找广告单元 ID 和尺寸

依次点击广告资源 > 广告单元。
点击相应广告单元（您要为其创建广告代码）的名称，或者创建新的广告单元。
点击代码。
选择“移动应用代码”这一代码类型，然后点击继续。
在“生成的代码”页面中，复制“广告单元 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

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

广告的宽度可以是相应横幅的尺寸，也可以占据整个屏幕的宽度（前提是 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）。

该内容对您有帮助吗？

您有什么改进建议？

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

本页内容：

查找 Google 移动广告应用 ID

查找广告单元 ID 和尺寸

其他 JavaScript 函数

行为和界面元素

行为和界面元素

行为和界面元素

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

MRAID 兼容性

该内容对您有帮助吗？

需要更多帮助？

请尝试以下步骤：