この記事では、Google Mobile Ads SDK の広告の作成について説明します。まずデベロッパーに必要な情報について説明し、その情報を使用して、広告の動作を指定するタグを作成する方法を紹介します。
使用可能な広告フォーマットには、アプリ内バナー、エキスパンド バナー、フルスクリーン広告など、さまざまなものがあります。広告フォーマットによって、クリエイティブ アセットと機能はそれぞれ異なります。たとえば、エキスパンド バナーでは、クリックされたときにサイズと背景色を変更できます。Google Mobile Ads SDK は MRAID 標準に対応しています。
Google Mobile Ads SDK を使用するには、デベロッパーに送るアプリ ID、広告ユニット ID、広告サイズを収集する必要があります。
このページの内容:
Google モバイル広告のアプリ ID を確認する
- Google アド マネージャーにログインします。
- [広告枠]、[アプリ] をクリックします。
- ID を確認するモバイルアプリを探すか、新しいモバイルアプリを登録します。
- をクリックしてアプリ ID をクリップボードにコピーします。例:
ca-app-pub-3940256099942544~3347511713
- この情報をデベロッパーに送信します。
広告ユニット ID とサイズを確認する
- [広告枠]、[広告ユニット] をクリックします。
- 広告タグを作成する広告ユニットの名前をクリックするか、新しい広告ユニットを作成します。
- [タグ] をクリックします。
- タグタイプとして [モバイル アプリケーション タグ] を選択し、[次へ] をクリックします。
- [タグ生成結果] から、広告ユニット ID と広告ユニットサイズをコピーします。この情報をデベロッパーに送信します。
その他の JavaScript 関数
Google Mobile Ads SDK の機能を活用する方法については、デベロッパー向けドキュメントをご覧ください。
ここでは、クリエイティブの <head>
セクションを変更するための関数を一部紹介します。
この SDK は、iOS や Android で利用可能なアプリ内ブラウザの機能を公開しています。これにより、デベロッパーはプラットフォームでサポートされているデバイス機能(加速度計、ジャイロスコープ、コンパスなど)に HTML5 を使用してアクセスできます。
アプリイベントを利用すると、クリエイティブがアプリイベントをディスパッチしたときに、アプリでカスタムコードを実行できます。アプリイベントでは、アプリの背景色を変更するなど、アプリと連携するように広告の動作をカスタマイズできます。
フルスクリーン広告が画面全体に表示されない場合は、クリエイティブの <head>
セクションに次のコードを挿入してください。
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
以下は、初期状態で画面下部にバナーとして表示されるバナー広告ユニットのテンプレートです。ユーザーがバナーをクリックすると、そのユーザーのデフォルトのカレンダー アプリが開き、ユーザーの同意に基づく新しいイベントが作成されます。
挙動とユーザー インターフェース要素
このクリエイティブは次のユーザー インターフェース要素で構成されます。
- バナー画像とその高さおよび幅
- イベントに関する情報(概要、説明、場所、開始日と終了日など)
名前 | タイプ | 必須 / 省略可 | 説明 |
---|---|---|---|
バナー画像ファイル | ファイル | 必須 | バナー広告の画像。 |
バナー画像の幅 | 数字 | 必須 | バナー画像の幅。 |
バナー画像の高さ | 数字 | 必須 | バナー画像の高さ。 |
イベントの概要 | テキスト | 必須 | イベントの概要。 |
イベントの説明 | テキスト | 必須 | イベントの説明。 |
イベントの場所 | テキスト | 省略可 | イベントの場所。 |
イベントの開始日 | テキスト | 必須 | イベントの開始日。「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
一定時間の経過後にインタースティシャルを閉じるには:
- 一定時間の経過後にインタースティシャルを閉じるコードを、クリエイティブに挿入します。この方法では、次のコードをテンプレートとして使用できます。
<!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 のモバイル リッチメディア広告インターフェース定義(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()
とその他の同様の関数は、広告がクリックされるまで機能しません。これは、悪質なクリエイティブが自動的にサイズを変更して画面全体を覆うのを防止するためです。