Google Mobile Ads SDK の広告を作成する

Google Mobile Ads SDK を使用するには、デベロッパーに送るアプリ ID、広告ユニット ID、広告サイズを収集する必要があります。

Google Mobile Ads のアプリ ID を確認する

Google アドマネージャーにログインします。
[広告枠] [アプリ] をクリックします。
ID を確認するモバイルアプリを探すか、新しいモバイルアプリを登録します。
をクリックしてアプリ ID をクリップボードにコピーします。例: ca-app-pub-3940256099942544~3347511713
この情報をデベロッパーに送信します。

広告ユニット ID とサイズを確認する

[広告枠] [広告ユニット] をクリックします。
広告タグを作成する広告ユニットの名前をクリックするか、新しい広告ユニットを作成します。
[タグ] をクリックします。
タグタイプとして [モバイルアプリケーションタグ] を選択し、[次へ] をクリックします。
[タグ生成結果] から、広告ユニット 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 を使用したモバイルクリックからカレンダーへの移動の実装

以下は、初期状態で画面下部にバナーとして表示されるバナー広告ユニットのテンプレートです。ユーザーがバナーをクリックすると、そのユーザーのデフォルトのカレンダーアプリが開き、ユーザーの同意に基づく新しいイベントが作成されます。

挙動とユーザーインターフェース要素

このクリエイティブは次のユーザーインターフェース要素で構成されます。

バナー画像とその高さおよび幅
イベントに関する情報（概要、説明、場所、開始日と終了日など）

名前	タイプ	必須 / 省略可	説明
バナー画像ファイル	ファイル	必須	バナー広告の画像。
バナー画像の幅	数字	必須	バナー画像の幅。
バナー画像の高さ	数字	必須	バナー画像の高さ。
イベントの概要	テキスト	必須	イベントの概要。
イベントの説明	テキスト	必須	イベントの説明。
イベントの場所	テキスト	省略可	イベントの場所。
イベントの開始日	テキスト	必須	イベントの開始日。「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

以下は、初期状態で画面下部にバナー広告として表示される、2 つの部分からなる広告ユニットのテンプレートです。ユーザーがこのバナーをクリックすると、広告のサイズが特定のエキスパンドサイズに変更されます。ユーザーがエキスパンドサイズの広告をクリックすると、リンク先 URL として定義された URL にリダイレクトされます。

幅にはバナーのサイズを指定するか、画面の幅全体を指定できます（FullWidthResize の値が「Yes」に設定されている場合）。

挙動とユーザーインターフェース要素

このクリエイティブは次のユーザーインターフェース要素で構成されます。

クリエイティブアセット（アセットごとにファイル、高さ、幅を指定する必要があります）
- バナー画像コンポーネント
- サイズ変更時のバナーコンポーネント
- 閉じるボタンアイコン
閉じるボタンは画面の右上または左上に表示できます。
広告の背景色は変更できます。

名前	タイプ	必須 / 省略可	説明
バナー画像ファイル	ファイル	必須	バナー広告に表示される画像。
バナー画像の高さ	数字	必須	バナー画像の高さ。
バナー画像の幅	数字	必須	バナー画像の幅。
背景色	テキスト	必須	サイズ変更時の画像が表示される領域とバナーが表示される領域の背景色。
リンク先 URL	URL	必須	サイズ変更時の広告をユーザーがクリックした場合にリダイレクトされる URL。
サイズ変更時の画像ファイル	ファイル	必須	バナーがクリックされた場合に表示される画像。
サイズ変更時の画像の高さ	数字	必須	サイズ変更時の画像の高さ。
サイズ変更時の画像の幅	数字	必須	サイズ変更時の画像の幅。
閉じるアイコン	ファイル	必須	「閉じる」ボタンの画像ファイル。
閉じるボタンの幅	数字	必須	「閉じる」ボタンの幅（平均の幅は 30 です）。
閉じるボタンの高さ	数字	必須	「閉じる」ボタンの高さ（平均の高さは 30 です）。
閉じるボタンの位置	リスト	省略可	「閉じる」ボタンは画面の右上または左上に表示できます。有効な値は「Right」または「Left」です。値を空白のままにした場合、閉じるボタンは画面の右上に配置されます。
幅全体にサイズ変更	リスト	省略可	値が「Yes」の場合、サイズ変更時の広告は画面の幅全体に表示されます。値が「No」の場合、幅は元のバナーと同じサイズになります。指定できる値は「Yes」または「No」で、デフォルトは「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

以下は、初期状態で画面下部にバナー広告として表示される、2 つの部分からなる広告ユニットのテンプレートです。ユーザーがこのバナーをクリックすると、広告のサイズが変更されて画面全体に表示されます。ユーザーがエキスパンドサイズの広告をクリックすると、リンク先 URL として定義された URL にリダイレクトされます。

このテンプレートでは MRAID のデフォルトの閉じるボタンを使用しています。

挙動とユーザーインターフェース要素

このクリエイティブは次のユーザーインターフェース要素で構成されます。

クリエイティブアセット:
- バナー画像コンポーネント（高さと幅も指定する必要があります）
- エキスパンドバナーコンポーネント
バナー広告とエキスパンド広告の背景色は変更できます

名前	タイプ	必須 / 省略可	説明
バナー画像ファイル	ファイル	必須	バナー広告に表示される画像。
バナー画像の高さ	数字	必須	バナー画像の高さ。
バナー画像の幅	数字	必須	バナー画像の幅。
背景色	テキスト	必須	バナー画像が表示される領域の背景色。
リンク先 URL	URL	必須	サイズ変更時の広告をユーザーがクリックした場合にリダイレクトされる URL。
エキスパンド時の画像ファイル	ファイル	必須	バナーがクリックされた場合に表示される画像。
エキスパンド時の画像の高さ	数字	必須	エキスパンド時の画像の高さ。
エキスパンド時の画像の幅	数字	必須	エキスパンド時の画像の幅。


       
<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]: バナークリエイティブの URL。
[WIDTH]: バナークリエイティブの幅。
[HEIGHT]: バナークリエイティブの高さ。
[FULLSCREEN_UNIT]: フルスクリーンクリエイティブの URL。注: フルスクリーンユニットには、クリック操作の受信時にリンク先 URL を解析して、ユーザーをランディングページにリダイレクトするための JavaScript コードを含める必要があります。詳しくは、フルスクリーンユニットのリンク先 URL を処理するをご覧ください。
[DESTINATION_URL]: リンク先ページの URL。
[FALLBACK_URL]: JavaScript 関数が実行されない場合の代替リンク先 URL。
[ORIENTATION]: リンク先 URL を表示できる方向（縦向きは「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>

フルスクリーンユニットのリンク先 URL の処理

admob.opener.openOverlay() 関数には、HTML コンテンツのリンク先 URL を指定する設定がありません。

フルスクリーンユニットを指定するときに Key-Value ペアの形式でリンク先 URL を渡したと想定して（例: 「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() {
  // 現在の URL の「?」以降を取得
  var destinationUrl = window.location.search;

  // 先頭の「?」を削除
  destinationUrl = destinationUrl.substring(1);
  // 「destination=url」Key-Value ペアを解析
  var kvPair = destinationUrl.split("=");
  var key = kvPair[0]; // key: destination
  var value = kvPair[1]; // value: url
  var url = decodeURIComponent(value); 

  // オーバーレイ内でリンク先を開く
  window.location = url;

  // 外部ブラウザでリンク先を開く
  // admob.opener.openUrl(url, true);
}
</script>
</head>

<body>
<div style="position:relative;">
<!-- コンテンツ ソースを 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>
<!-- クリック可能な領域を作成 -->
<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 の Mobile Rich Media Ad Interface Definitions（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 の機能を使用するには、クリエイティブに mraid.js を読み込む必要があります。その場合は、クリエイティブに <script src="mraid.js"> を指定します。Google Mobile Ads SDK は MRAID に対応している SDK です。この SDK により、クリエイティブに指定されている MRAID のコードが検出され、MRAID の実装場所を示す実際の URL に置き換えられます。MRAID に対応している他の SDK でも同じ処理が行われますが、実際の URL は異なるものになります。

必要に応じて、MRAID のライブラリや Google Mobile Ads SDK の機能を同じクリエイティブに含めることができます。

mraid.resize() とその他の同様の関数は、広告がクリックされるまで機能しません。これは、悪質なクリエイティブが自動的にサイズを変更して画面全体を覆うのを防止するためです。

MRAID のサポートについて詳しくは、Android と iOS の説明をご覧ください。

この情報は役に立ちましたか？

改善できる点がありましたらお聞かせください。

Google Mobile Ads SDK の広告を作成する

Google Mobile Ads のアプリ ID を確認する

広告ユニット ID とサイズを確認する

その他の JavaScript 関数

挙動とユーザーインターフェース要素

挙動とユーザーインターフェース要素

挙動とユーザーインターフェース要素

フルスクリーンユニットのリンク先 URL の処理

MRAID の互換性

この情報は役に立ちましたか？

さらにサポートが必要な場合

次の手順をお試しください。

Google Mobile Ads SDK の広告を作成する

Google Mobile Ads のアプリ ID を確認する

広告ユニット ID とサイズを確認する

その他の JavaScript 関数

挙動とユーザー インターフェース要素

挙動とユーザー インターフェース要素

挙動とユーザー インターフェース要素

フルスクリーン ユニットのリンク先 URL の処理

MRAID の互換性

この情報は役に立ちましたか？

さらにサポートが必要な場合

次の手順をお試しください。

挙動とユーザーインターフェース要素

挙動とユーザーインターフェース要素

挙動とユーザーインターフェース要素

フルスクリーンユニットのリンク先 URL の処理