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

本文說明如何開發適用於 Google Mobile Ads SDK 的廣告，以及開發人員需要的資訊。接著，說明如何使用這些資訊建立指定廣告行為的代碼。

我們提供各種不同的廣告格式，包括應用程式內橫幅廣告、可展開式橫幅廣告和全螢幕廣告。每種廣告格式都各有其廣告素材資源和功能。舉例來說，在點擊時，可展開式橫幅廣告的大小和背景顏色可能會變更。Google Mobile Ads SDK 與 MRAID 標準相容。

若要使用 Google Mobile Ads SDK，您必須為開發人員收集應用程式 ID、廣告單元 ID 和廣告大小。

本頁內容：

找出 Google Mobile Ads 應用程式 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 Mobile Ads 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 的行動點擊加入日曆功能

這個橫幅廣告單元範本一開始會以螢幕底部橫幅的形式呈現。如果使用者點擊橫幅，預設的日曆應用程式就會取得使用者同意並建立新的活動。

行為和 UI 元素

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

  • 橫幅圖片以及其高度和寬度。
  • 必要的活動相關訊息，例如摘要、說明、位置、開始日期和結束日期。
名稱 類型 必要 說明
橫幅圖片檔案 檔案 是 橫幅廣告的圖片。
橫幅圖片寬度 數字 是 橫幅圖片的寬度。
橫幅圖片高度 數字 是 橫幅圖片的高度。
活動摘要 文字 是 活動的摘要。
事件說明 文字 是 活動的說明。
活動地點 文字 否 活動的地點。
活動開始日期 文字 是 活動的開始日期。開始日期應採用下列格式：「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

多媒體廣告程式碼範例：使用 MRAID v2.0 的可展開式頁尾範本

這是雙元件廣告單元範本，一開始會以橫幅廣告的形式在畫面底部呈現。如果使用者按一下橫幅，廣告大小將會調整為特定的展開尺寸。當使用者按一下尺寸已展開的廣告，系統就會將使用者重新導向到達網址所定義的網址。

廣告寬度可以是橫幅的寬度，也可以佔滿整個螢幕畫面的寬度 (前提是 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

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

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

  • [橫幅廣告單元]：橫幅廣告素材的網址。
  • [寬度]：橫幅廣告素材的寬度。
  • [高度]：橫幅廣告素材的高度。
  • [全螢幕廣告單元]：全螢幕廣告素材網址。請注意，全螢幕廣告單元必須加入 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 支援功能。

這對您有幫助嗎？

我們應如何改進呢？

還有其他問題嗎？

嘗試以下步驟：

張貼到產品討論社群 向社群成員尋求答案
與我們聯絡 進一步說明相關資訊，我們會盡力協助您
true
版本資訊

瞭解 Ad Manager 最新功能和說明中心更新內容。

查看新功能

搜尋
清除搜尋內容
關閉搜尋
主選單
1858575821508764924
true
搜尋說明中心
true
true
true
true
true
148
false
false