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

名称	类型	是否必需	说明
横幅图片文件	文件	是	横幅广告的图片。
横幅图片宽度	数值	是	横幅图片的宽度。
横幅图片高度	数值	是	横幅图片的高度。
活动摘要	文本	是	活动的摘要。
活动说明	文本	是	活动的说明。
活动地点	文本	否	活动的地点。
活动开始日期	文本	是	活动的开始日期。开始日期应采用如下格式：“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

用于自动关闭插页式广告的示例代码

目标窗口：应用内叠加窗口

通过使用 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 兼容性

该内容对您有帮助吗？

需要更多帮助？

请尝试以下步骤：

该选择与什么问题最相关？

共享其他信息或建议