製作適用於 Google Mobile Ads SDK 的廣告

名稱	類型	必要	說明
橫幅圖片檔案	檔案	是	橫幅廣告的圖片。
橫幅圖片寬度	數字	是	橫幅圖片的寬度。
橫幅圖片高度	數字	是	橫幅圖片的高度。
活動摘要	文字	是	活動的摘要。
事件說明	文字	是	活動的說明。
活動地點	文字	否	活動的地點。
活動開始日期	文字	是	活動的開始日期。開始日期應採用下列格式：「2016-10-22T00:00-05:00」。舉例來說，這表示 2016 年 10 月 22 日 0:00 到 05:00。
活動結束日期	文字	是	活動的結束日期。結束日期應採用下列格式：「2016-10-22T00:00-05:00」。舉例來說，這表示 2016 年 10 月 22 日 0:00 到 05:00。


<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」)。

行為和 UI 元素

廣告素材包括下列 UI 元素：

廣告素材資源 (在每個素材資源中，檔案、高度和寬度是必要項目)
- 橫幅圖片元件
- 調整橫幅元件的大小
- 「關閉」按鈕圖示
可調整「關閉」按鈕的位置，以便放在畫面右上方或或左上方。
可以變更廣告的底色。

名稱	類型	必要	說明
橫幅圖片檔案	檔案	是	顯示在橫幅廣告中的圖片。
橫幅圖片高度	數字	是	橫幅圖片的高度。
橫幅圖片寬度	數字	是	橫幅圖片的寬度。
背景顏色	文字	是	調整大小後的圖片和橫幅佔用空間的底色。
到達網址	網址	是	使用者按一下調整大小後的廣告時，系統將進行重新導向的網址。
調整大小後的圖片檔案	檔案	是	要在使用者按一下橫幅後顯示的圖片。
調整大小後的圖片高度	數字	是	調整大小後的圖片高度。
調整大小後的圖片寬度	數字	是	調整大小後的圖片寬度。
關閉圖示	檔案	是	「關閉」按鈕的圖片檔。
關閉圖示寬度	數字	是	「關閉」按鈕的寬度 (平均寬度為 30)。
關閉圖示高度	數字	是	「關閉」按鈕的高度 (平均高度為 30)。
關閉按鈕位置	清單	否	可放置「關閉」按鈕，以便放在畫面右上方或或左上方。可能的值為「左」或「右」。如果留空，則關閉按鈕會放置在螢幕畫面的右上方。
全寬調整大小	清單	否	如果該值為「是」，代表廣告調整大小後可占滿整個螢幕畫面的寬度。如果該值為「No」，廣告將採用原始橫幅的寬度。可能的值為「是」和「否」，預設值為「否」。


<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 關閉按鈕。

行為和 UI 元素

廣告素材包括下列 UI 元素：

廣告素材資源：
- 橫幅圖片元件 (也必須提供高度與寬度)
- 展開橫幅元件
可以變更橫幅廣告和可展開式廣告的底色。

名稱	類型	必要	說明
橫幅圖片檔案	檔案	是	顯示在橫幅廣告中的圖片。
橫幅圖片高度	數字	是	橫幅圖片的高度。
橫幅圖片寬度	數字	是	橫幅圖片的寬度。
背景顏色	文字	是	橫幅圖片佔用的空間底色。
到達網址	網址	是	使用者按一下調整大小後的廣告時，系統將進行重新導向的網址。
展開的圖片檔案	檔案	是	要在使用者按一下橫幅後顯示的圖片。
展開的圖片高度	數字	是	展開後的圖片高度。
展開的圖片寬度	數字	是	展開後的圖片寬度。


       
<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() 開啟一個全螢幕重疊瀏覽器，以動畫效果從螢幕底部帶出這個瀏覽器。視窗左上角設有關閉按鈕，但是沒有狀態列。這個選項十分適合用於可展開式廣告，可讓您將全螢幕廣告素材載入至個別網頁。

下方是橫幅廣告的程式碼範例，可將全螢幕廣告單元載入至重疊瀏覽器視窗。請將下面以 [ ] 框起的預留位置替換成自己的值。如果適用於您的聯播網，您就可以運用這段程式碼範例建立廣告素材範本。

[橫幅廣告單元]：橫幅廣告素材的網址。
[寬度]：橫幅廣告素材的寬度。
[高度]：橫幅廣告素材的高度。
[全螢幕廣告單元]：全螢幕廣告素材網址。請注意，全螢幕廣告單元必須加入 JavaScript 程式碼，設成在收到點擊動作時剖析到達網頁網址，並將使用者重新導向至到達網頁。如需詳細資訊，請參閱處理全螢幕廣告單元中的到達網頁網址。
[到達網頁網址]：到達網頁的網址。
[備用到達網頁網址]：如果 JavaScript 函式未順利執行，系統將使用這個備用到達網頁網址。
[螢幕方向]：到達網頁網址支援的螢幕方向 (「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 Mobile Ads SDK 支援在行動應用程式中放送廣告時，所採用的 IAB 的行動互動式多媒體廣告介面定義 (MRAID) 標準。只要依序前往「新增指定目標」>「裝置功能」，即可透過委刊項指定目標設定將委刊項設定為 MRAID v1 或 MRAID V2。

MRAID 規定：

如要使用 MRAID v2，Android 裝置必須搭載 Google Play 服務 v7.8 以上版本，而 iOS 裝置必須搭載 Google Mobile Ads SDK v7.4.0 以上版本。
如要使用 MRAID v3，Android 裝置必須搭載 Google Play 服務 v15.0.0 以上版本，而 iOS 裝置必須搭載 Google Mobile Ads SDK v7.30.0 以上版本。

您必須將 mraid.js 匯入廣告素材，才可在廣告素材中使用 MRAID 函式。方法很簡單，只要在廣告素材中加入 <script src="mraid.js">。Google Mobile Ads SDK 與 MRAID 相容，因此會在廣告素材中尋找該程式碼，換成指向已導入 MRAID 的實際網址。其他支援 MRAID 的 SDK 也會執行相同的動作，但使用不同的實際網址。

您也可以將 MRAID 程式庫和 Google Mobile Ads SDK 功能加到相同的廣告素材中。

mraid.resize() 和其他類似的函式只有在廣告獲得點擊後才會發揮作用，這樣可防範惡意廣告素材自動調整大小並佔滿整個螢幕畫面。

進一步瞭解 Android 或 iOS 的 MRAID 支援功能。

選擇要提供意見的區段

這對您有幫助嗎？

我們應如何改進呢？

製作適用於 Google Mobile Ads SDK 的廣告

本頁內容：

找出 Google Mobile Ads 應用程式 ID

找出廣告單元 ID 和大小

其他 JavaScript 函式

行為和 UI 元素

行為和 UI 元素

行為和 UI 元素

處理全螢幕單元中的到達網頁網址

MRAID 相容性

這對您有幫助嗎？

還有其他問題嗎？

嘗試以下步驟：

這個部分有什麼問題？

分享更多資訊或建議