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

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

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

  1. Google アド マネージャーにログインします。
  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 を使用してアクセスできます。

これらの機能について詳しくは、AndroidiOS 向けのドキュメントをご覧ください。

アプリイベント

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

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

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

フルスクリーン広告が画面全体に表示されない場合は、クリエイティブの <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 までを表します)。
 

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

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

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

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

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

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

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

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

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

以下は、初期状態で画面下部にバナーとして表示される、2 つの部分からなる広告ユニットのテンプレートです。

ユーザーがこのバナーをクリックすると、広告が展開されて画面全体に表示されます。展開された広告をユーザーがクリックした場合、ユーザーは指定のウェブサイトにリダイレクトされます。このテンプレートでは MRAID のデフォルトの閉じるボタンを使用しています。

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

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

  • クリエイティブ アセット:
    • バナー画像コンポーネント(高さと幅も指定する必要があります)
    • エキスパンド バナー コンポーネント
  • バナー広告とエキスパンド広告の背景色は変更できます
名前 タイプ 必須 / 省略可 説明
バナー画像ファイル ファイル 必須 バナー広告に表示される画像。
バナー画像の高さ 数値 必須 バナー画像の高さ。
バナー画像の幅 数値 必須 バナー画像の幅。
背景色 テキスト 必須 バナー画像が表示される領域の背景色。
リンク先 URL URL 必須 サイズ変更時の広告をユーザーがクリックした場合にリダイレクトされる URL。
エキスパンド時の画像ファイル ファイル 必須 バナーがクリックされた場合に表示される画像。
エキスパンド時の画像の高さ 数値 必須 エキスパンド時の画像の高さ。
エキスパンド時の画像の幅 数値 必須 エキスパンド時の画像の幅。
 

テスト広告ユニット名: 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 のサポートについて詳しくは、デベロッパー向けドキュメント(AndroidiOS)をご覧ください。

この情報は役に立ちましたか?
改善できる点がありましたらお聞かせください。

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

問題を迅速に解決できるよう、ログインして追加のサポート オプションをご利用ください。

検索
検索をクリア
検索終了
Google アプリ
メインメニュー
ヘルプセンターを検索
true
148
false