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

MRAID の互換性

Google Mobile Ads SDK では、モバイルアプリでの広告配信に適用される IAB の Mobile Rich Media Ad Interface Definitions(MRAID)標準がサポートされています。広告申込情報のターゲティング設定[デバイス] > [端末スペック])では、MRAID v1 または MRAID v2 を指定できます。

MRAID v2 を使用するには、Android の場合は Google Play 開発者サービス v7.8 以上、iOS の場合は Google Mobile Ads SDK v7.4.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 SDK の機能を活用するには、google.mobile.app.ads クラスで公開される JavaScript 関数(リンク先は英語)を使用します。クリエイティブの <head> セクションには、下記のコードを挿入する必要があります。

端末の機能へのアクセス

この SDK では iOS や Android で利用可能なアプリ内ブラウザの機能も公開しています。この機能を利用すると、デベロッパーがプラットフォームでサポートされている端末機能(加速度計、ジャイロスコープ、コンパスなど)に HTML5 を使用してアクセスできるようになります。こうした端末機能の詳細とアクセス方法については、各プラットフォームのドキュメントをご覧ください。

アプリイベント

アプリイベントを利用すると、クリエイティブがアプリイベントをディスパッチしたときに、アプリでカスタムコードを実行できます。アプリイベントでは、アプリの背景色を変更するなど、アプリと連携するように広告の動作をカスタマイズできます。

アプリイベントの実装方法についての記事をご覧ください。

画像のフルスクリーン表示

フルスクリーン広告が画面全体に表示されない場合は、クリエイティブの <head> セクションに次のコードを挿入してください。

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>.

ローテーション表示可能な広告のサンプルコード

以下のコードを使用して、ローテーション表示可能な広告を配信できます。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <style>
      * {
        padding: 0px;
        margin: 0px;
        border: none;
      }

      a { display: block }

      #landscape{ display: none; }

      /* 縦向き */
      @media screen and (orientation:portrait) {
        #portrait { display: block; }
	#landscape { display: none; }
      }
      /* 横向き */
      @media screen and (orientation:landscape) {
        #portrait { display: none; }
	#landscape { display: block; }
      }
    </style>
  </head>
  <body>
    <a href="%%CLICK_URL_UNESC%%[%ClickThroughURL%]">
      <img id="portrait" src="[%PortraitImageFile%]" width="[%PortraitImageWidth%]" height="[%PortraitImageHeight%]"/>
      <img id="landscape" src="[%LandscapeImageFile%]" width="[%LandscapeImageWidth%]" height="[%LandscapeImageHeight%]"/>
    </a>
  </body>
</html>

アプリ内広告のサンプルコード: 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>

// イベント リスナーを追加して MRAID の準備ができているか確認
function doReadyCheck(){
  if(mraid.getState() == 'loading'){
    mraid.addEventListener("ready", mraidIsReady);
  }else{
    showMyAd();
  }
}

// MRAID の準備ができている場合、そのイベントのリッスンは不要
function mraidIsReady(){
  mraid.removeEventListener("ready", mraidIsReady); 
  showMyAd();
}

// MRAID の準備ができている場合のみ広告を表示
function showMyAd(){
  var advertElement = document.getElementById("normal");
  advertElement.style.display = 'block';
}

// 端末がカレンダー操作に対応している場合は適切な入力方法でカレンダーにイベントを追加
function addToCalendar(){

  // 画像を作成してクリックを登録
  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 を使用したエキスパンド フッターのテンプレート

以下は、初期状態で画面下部にバナーとして表示される、2 つの部分からなる広告ユニットのテンプレートです。ユーザーがこのバナーをクリックすると、広告のサイズが特定のサイズに変更されます。展開された広告をユーザーがクリックした場合、ユーザーは指定のウェブサイトにリダイレクトされます。

幅にはバナーのサイズを指定するか、画面の幅全体を指定できます(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>
<!--

// 変数
var closeButton = document.getElementById("close_button");
var bodyElement = document.body;
var advertElement = document.getElementById("normal");
var resizedElement = document.getElementById("resized");
var resizeBannerWidth;

function changeBodyElementStyle() {
  // 背景色を変更
  if ("[%ResizedBackgroundColor%]") {
    bodyElement.style.backgroundColor = "[%ResizedBackgroundColor%]";
    resizedElement.style.backgroundColor = "[%ResizedBackgroundColor%]";	
  }
}

function openURL() {
  mraid.open("%%CLICK_URL_ESC%%[%ClickThroughURL%]");
}

// イベント リスナーを追加して MRAID の準備ができているか確認
function checkIfReady(){
  if(mraid.getState() == 'loading'){
    mraid.addEventListener("ready", mraidIsReady);
  } else{
    showMyAd();
  }
}

function mraidIsReady(){
  mraid.removeEventListener("ready", mraidIsReady); 
  showMyAd();
}

// サイズ変更プロパティを設定してサイズを変更
function resize(){
	// FullWidthResize が「Yes」の場合はサイズ変更時の広告を幅全体に表示、それ以外の場合は元のバナーの幅で表示
	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;
  }
}

// 広告を表示して、サイズを変更するかどうかを検出するためのイベント リスナーを追加
function showMyAd(){
  advertElement.style.display = "inline";
  mraid.addEventListener("stateChange",updateAd); 
}

// MRAID の状態が変更された場合に updateAd を呼び出す - toggleLayer を呼び出して広告を展開または折りたたみ
function updateAd(state){
  if (state == "resized"){
    toggleLayer('normal', 'resized');
  }else if(state == "default"){
    toggleLayer('resized', 'normal');
  }
}

// 他の状態に移行(サイズ変更時、またはバナー)
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 2.0)

以下は、初期状態で画面下部にバナーとして表示される、2 つの部分からなる広告ユニットのテンプレートです。ユーザーがこのバナーをクリックすると、広告が展開されて画面全体に表示されます。展開された広告をユーザーがクリックした場合、ユーザーは指定のウェブサイトにリダイレクトされます。このテンプレートでは 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%]");
}

// 背景色を変更(ある場合)
function changeBodyElementStyle() {
  if ("[%BackgroundColor%]") {
    var bodyElement = document.body;
    bodyElement.style.backgroundColor = "[%BackgroundColor%]";
  }
}	

// イベント リスナーを追加して MRAID の準備ができているか確認
function checkIfReady(){
  if(mraid.getState() == 'loading'){
    mraid.addEventListener("ready", mraidIsReady);
  } else{
    showMyAd();
  }
}

// MRAID の準備ができている場合、そのイベントのリッスンは不要
function mraidIsReady(){
  mraid.removeEventListener("ready", mraidIsReady); 
  showMyAd();
}

function showMyAd(){
  // 広告を表示
  var advertElement = document.getElementById("normal");
  advertElement.style.display = "inline";

  // 展開するかどうかを検出するためのイベント リスナーを追加
  mraid.addEventListener("stateChange",updateAd); 

  // エキスパンド時の広告の背景色を変更
  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;
  }
}

// MRAID の状態が変更された場合に updateAd を呼び出す
// toggleLayer を呼び出して広告を展開または折りたたみ
function updateAd(state){
  if (state == "expanded"){
    toggleLayer('normal', 'expanded');
  }else if(state == "default"){
    toggleLayer('expanded', 'normal');
  }
}

// 他の状態に移行(エキスパンド、またはバナー)
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

アプリ内広告のサンプルコード: カスタムの閉じるボタンを使用したモバイル エキスパンド バナー(MRAID 2.0)

以下は、初期状態で画面下部にバナーとして表示される、2 つの部分からなる広告ユニットのクリエイティブです。ユーザーがこのバナーをクリックすると、広告が展開されて画面全体に表示されます。展開された広告をユーザーがクリックした場合、ユーザーは指定のウェブサイトにリダイレクトされます。

このクリエイティブでは、カスタムの閉じるボタンを使用できます(ボタンの高さと幅、デザイン、位置を変更できます)。

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

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

  • クリエイティブ アセット:
    • バナー画像コンポーネント(高さと幅も指定する必要があります)
    • エキスパンド バナー コンポーネント
  • バナー広告とエキスパンド広告の背景色は変更できます。
  • カスタムの閉じるボタンを使用します。
名前 タイプ 必須 / 省略可 説明
バナー画像ファイル ファイル 必須 バナー広告に表示される画像。
バナー画像の高さ 数値 必須 バナー画像の高さ。
バナー画像の幅 数値 必須 バナー画像の幅。
背景色 テキスト 必須 バナー画像が表示される領域の背景色。
リンク先 URL URL 必須 サイズ変更時の広告をユーザーがクリックした場合にリダイレクトされる URL。
エキスパンド時の画像ファイル ファイル 必須 バナーがクリックされた場合に表示される画像。
エキスパンド時の画像の高さ 数値 必須 エキスパンド時の画像の高さ。
エキスパンド時の画像の幅 数値 必須 エキスパンド時の画像の幅。
閉じるアイコン ファイル 必須 「閉じる」ボタン用の画像ファイル。
閉じるボタンの幅 数値 必須 「閉じる」ボタンの幅(平均的な幅は 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: 0px;
right: 0px;
display: block;
}
//-->
</style>

</head>
<body>
<div id="normal" style="display:none; top:0px;">
<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="[%ExpandImageWidth%]"  height="[%ExpandImageHeight%]" src="[%ExpandImageFile%]" />
</a>
<div id="close_button">
<img width="[%CloseIconWidth%]" height="[%CloseIconHeight%]" src="[%CloseIcon%]"/> 
</div>
</div>

<script>
<!--

function openURL() {
	mraid.open("%%CLICK_URL_ESC%%[%ClickThroughURL%]");
}


// 背景色を変更(ある場合)
function changeBodyElementStyle() {
	if ("[%BackgroundColor%]") {
	  var bodyElement = document.body;
      bodyElement.style.backgroundColor = "[%BackgroundColor%]";
  }
}

// イベント リスナーを追加して MRAID の準備ができているか確認
function checkIfReady(){
  if(mraid.getState() == 'loading') {
    mraid.addEventListener("ready", mraidIsReady);
  } else{
    showMyAd();
  }
}

// MRAID の準備ができている場合、そのイベントのリッスンは不要
function mraidIsReady(){
  mraid.removeEventListener("ready", mraidIsReady); 
  showMyAd();
}

function showMyAd(){
  // 広告を表示
  var advertElement = document.getElementById("normal");
  advertElement.style.display = "inline";

  // 展開するかどうかを検出するためのイベント リスナーを追加
  mraid.addEventListener("stateChange",updateAd); 

  // エキスパンド時の広告の背景色を変更
  var expandedDiv = document.getElementById("expanded");
  expandedDiv.style.backgroundColor = "[%BackgroundColor%]";
}

// MRAID の状態が変更された場合に updateAd を呼び出す
// toggleLayer を呼び出して広告を展開または折りたたみ
function updateAd(state){
  if (state == "expanded"){
    toggleLayer('normal', 'expanded');
  }else if(state == "default"){
    toggleLayer('expanded', 'normal');
  }
}

// 他の状態に移行(エキスパンド、またはバナー)
function toggleLayer(fromLayer, toLayer){
  var fromLayerElem = document.getElementById(fromLayer);
  fromLayerElem.style.display = 'none';
  var toLayerElem = document.getElementById(toLayer);
  toLayerElem.style.display = "inline";
}

// 広告を展開して閉じるボタンを表示			
function expand() {
   if(mraid.getVersion()=="2.0"){
    document.getElementById("close_button").style.visibility = "visible";
    mraid.setExpandProperties({"width": "[%ExpandImageWidth%]", "height": "[%ExpandImageHeight%]", "useCustomClose": true}); 
    mraid.expand();
    return false;
  }
  else {
    return true;
  }
}

changeBodyElementStyle();
checkIfReady();
//-->
</script>
</body>
</html>


テスト広告ユニット名: ali_expandCustomClose

ディスプレイ広告のサンプルコード: MRAID 2.0 を使用しないエキスパンド フッターのテンプレート

以下は、初期状態で画面下部にバナーとして表示される、2 つの部分からなる広告ユニットのテンプレートです。ユーザーがこのバナーをクリックすると、広告のサイズが特定のサイズに変更されます。展開された広告をユーザーがクリックした場合、ユーザーは指定のウェブサイトにリダイレクトされます。

このテンプレートでは、広告をバナーの状態に戻すためのカスタムの閉じるボタンも使用しています。

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

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

  • クリエイティブ アセット(アセットごとにファイル、高さ、幅を指定する必要があります)
    • バナー画像コンポーネント
    • エキスパンド バナー コンポーネント
    • 閉じるボタンアイコン
  • 閉じるボタンは画面の右上または左上に表示できます。
  • 広告の背景色は変更できます。
名前 タイプ 必須 / 省略可 説明
バナー画像ファイル ファイル 必須 バナー広告に表示される画像。
バナー画像の高さ 数値 必須 バナー画像の高さ。
バナー画像の幅 数値 必須 バナー画像の幅。
背景色 テキスト 必須 サイズ変更時の画像が表示される領域の背景色。
リンク先 URL URL 必須 サイズ変更時の広告をユーザーがクリックした場合にリダイレクトされる URL。
サイズ変更時の画像ファイル ファイル 必須 バナーがクリックされた場合に表示される画像。
サイズ変更時の画像の高さ 数値 必須 サイズ変更時の画像の高さ。
サイズ変更時の画像の幅 数値 必須 サイズ変更時の画像の幅。
閉じるアイコン ファイル 必須 「閉じる」ボタン用の画像ファイル。
閉じるボタンの幅 数値 必須 「閉じる」ボタンの幅(平均的な幅は 30 です)。
閉じるボタンの高さ 数値 必須 「閉じる」ボタンの高さ(平均的な高さは 30 です)。
閉じるボタンの位置 リスト 省略可 「閉じる」ボタンは画面の右上または左上に表示できます。指定できる値は「Right」または「Left」です。値を空白のままにした場合、閉じるボタンは画面の右上に配置されます。
 

<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>
<style>
#close_button {
position: absolute;
top: 1%;
display:block;
}
#advertArea {
position:absolute; 
width:100%;
height:100%;
top:0;
left: 0;				
}
</style>
</head>
<body>
<div id="normal" style="display:block; margin:auto;top:0px;text-align:center">
<img width="[%BannerImageWidth%]" height="[%BannerImageHeight%]" src="[%BannerImageFile%]" onClick="showBiggerAdvert();" />
</div>

<div id="resized" style="display:none;top:0px;text-align:center;";>
<a href="%%CLICK_URL_ESC%%[%ClickThroughURL%]">
<span id="advertArea"> </span>
<img width="[%ResizedImageWidth%]"  height="[%ResizedImageHeight%]" src="[%ResizedImageFile%]" />
</a>
<div id="close_button">
<img width="[%CloseIconWidth%]" height="[%CloseIconHeight%]" src="[%CloseIcon%]" onClick="showOriginalBanner()"/> 
</div>
</a>
</div>

<script>

// 変数の割り当て
var closeButton = document.getElementById("close_button");
var resizedDiv = document.getElementById("resized");
var bannerDiv  = document.getElementById("normal");

function changeBodyElementStyle() {
  // 背景色を変更
  if ("[%BackgroundColor%]") {
    var bodyElement = document.body;
    bodyElement.style.backgroundColor = "[%BackgroundColor%]";
  }

  // 閉じるボタンの位置を移動
  if ("[%CloseButtonPosition%]" === "Left") {
    closeButton.style.left = "0";
  } else {
    closeButton.style.right = "0";
  }
}

// 広告のサイズを変更して展開表示	
function showBiggerAdvert(){
  toggleLayer('normal', 'resized');
}

// サイズ変更した広告を非表示にして元のバナーを表示
function showOriginalBanner() {
  toggleLayer('resized', 'normal');
}

// 他の状態に移行(サイズ変更またはバナー)
function toggleLayer(fromLayer, toLayer){
  var fromLayerElem = document.getElementById(fromLayer);
  fromLayerElem.style.display = 'none';
  var toLayerElem = document.getElementById(toLayer);
  toLayerElem.style.display = 'block';
}

changeBodyElementStyle();
</script>
</body>
</html>


エキスパンド広告のサンプルコード(MRAID v1 のバージョンと MRAID 以外のバージョン)

MRAID サンプルコード

詳しくは、デベロッパー向けドキュメントをご覧ください。

<html>
  <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="mraid.js"></script>
    <style type="text/css">
      html, body {
        margin: 0;
        padding: 0;
      }

      .banner, .overlayBanner {
        display: block;
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 1000;
        overflow: hidden;
      }

      .banner {
        background-color: black;
        width: 300px;
        height: 50px;
      }

      .overlayBanner {
        background-color: green;
        width: 300px;
        height: 250px;
      } 
    </style>
    <script type="text/javascript">
      // ドキュメントの準備ができているか確認
      if ((mraid.getState() != "default") || (mraid.getState() != "ready")) {
        // console.log(「ドキュメントの準備ができていません。イベント リスナーを追加しています」);
        // 状態変更をトラッキングするためにイベント リスナーを登録
        mraid.addEventListener("stateChange", handleStateChanges);
      } else {
        // console.log(「ドキュメントの準備ができています」);
        // 状態変更をトラッキングするためにイベント リスナーを登録
        mraid.addEventListener("stateChange", handleStateChanges);
      }

      function handleStateChanges() {
        // console.log('mraid state: ' + mraid.getState());
        // 状態変更があったときにアクションを実行
        switch(mraid.getState()) {
        case "expanded":
          // console.log("handleStateChanges, expanded");
          // 表示が「エキスパンド」状態のときにオーバーレイ バナーを表示
          document.getElementById('banner').setAttribute('class', 'overlayBanner');
          break;
        case "default":
          // console.log("handleStateChanges, default");
          // 表示が「デフォルト」状態のときに初期バナーを表示
          document.getElementById('banner').setAttribute('class', 'banner');
          break;
        }
      }
</script>
</head>

<body>
<div id='banner' onClick='mraid.expand()'></div>
</body>

</html>

MRAID 以外のサンプルコード(クリエイティブ テンプレートを使用)

下記のサンプルコードを使用して、モバイルアプリにバナーを配信できます。クリックするとバナーがエキスパンドし、アプリ内のオーバーレイ ウィンドウにフルスクリーン表示されます。サンプルコードの次のプレースホルダ要素は、実際の値に置き換えてください。

  • [FALLBACK_CLICKURL]: JavaScript 関数を呼び出せなかった場合のバックアップ用ランディング ページ。
  • [FULLSCREEN_UNIT]: フルスクリーン広告ユニットの URL。
  • [ORIENTATION]: フルスクリーン ユニットを表示できる方向(縦向きは「p」、横向きは「l」(小文字のエル)、指定しない場合はどちらにも対応)。
  • [BANNER_UNIT]: バナー画像の URL。
  • [WIDTH]: バナーの幅。
  • [HEIGHT]: バナーの高さ。
<!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://media.admob.com/api/v1/google_mobile_app_ads.js"></script>
</head>

<body>
<a href="[FALLBACK_CLICKURL]" onClick="admob.opener.openOverlay('%%CLICK_URL_ESC_ESC%%[FULLSCREEN_UNIT]', '[ORIENTATION]'); 
return false;"><img border="0" src="[BANNER_UNIT]" width="[WIDTH]" height="[HEIGHT]"></a>
</body>

</html>

インタースティシャルを自動的に閉じるコードの例
直接予約されたインタースティシャルのみ、自動的に閉じることができます。ダイナミック アロケーション経由で配信されたインタースティシャル(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://media.admob.com/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://media.admob.com/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://media.admob.com/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>
ターゲット ウィンドウ: 新しいブラウザ ウィンドウ

admob.opener.openUrl() を使用すると、(アプリ外部で)新しいネイティブ ブラウザ ウィンドウを開くことができます。リンク先 URL を新しいブラウザ ウィンドウに読み込むことのできる、シンプルなバナー用のサンプルコードを下記で紹介します。次のプレースホルダ要素は、独自の値に置き換えてください。ネットワークで利用可能な場合は、下記のサンプルコードを使ってクリエイティブ テンプレートを作成できます。

  • [BANNER_UNIT]: バナー クリエイティブの URL。
  • [WIDTH]: バナー クリエイティブの幅。
  • [HEIGHT]: バナー クリエイティブの高さ。
  • [FULLSCREEN_UNIT]: フルスクリーン クリエイティブの URL。
  • [FALLBACK_URL]: JavaScript 関数が実行されない場合の代替リンク先 URL。

下記はクリエイティブ コードの例です。

<!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://media.admob.com/api/v1/google_mobile_app_ads.js"></script>
</head>

<body>
<a href="[FALLBACK_CLICKURL]" 
onClick="admob.opener.openUrl('%%CLICK_URL_ESC%%[FULLSCREEN_UNIT]', true); 
return false;"><img border="0" src="[BANNER_UNIT]" width="[WIDTH]" height="[HEIGHT]"></a>
</body>
</html>

 

AdMob のモバイル広告作成ガイド(英語)も併せてご覧ください。
この情報は役に立ちましたか?
改善できる点がありましたらお聞かせください。