バナー広告は、デバイス画面の上部か下部にアプリのレイアウト内の一部分を使用して表示されます。アプリの操作中は画面に表示され続けますが、一定時間が経過すると自動的に更新されるよう設定できます。モバイル広告を初めてお使いの場合は、この広告から始めることをおすすめします。 事例紹介。
このガイドでは、AdMob のバナー広告を iOS アプリに組み込む方法について説明します。コード スニペットと設定手順のほか、バナーの適切なサイズに関する情報、他の関連情報へのリンクも紹介します。
前提条件
- Google Mobile Ads SDK を単体か Firebase の一部としてインポートします。
常にテスト広告でテストする
アプリの開発とテストでは実際の広告ではなく、必ずテスト広告を使ってください。実際の広告でテストすると、アカウントが停止される場合があります。
テスト広告は、次に示す iOS バナー広告向けのテスト専用広告ユニット ID を使うと簡単に読み込むことができます。
ca-app-pub-3940256099942544/2934735716
この ID は、すべてのリクエストに対してテスト広告を返すように構成されており、アプリのコーディング、テスト、デバッグで自由に使うことができます。なお、テスト用 ID は、アプリを公開する前に必ずご自身の広告ユニット ID に置き換えてください。
Mobile Ads SDK のテスト広告の仕組みについて詳しくは、テスト広告をご覧ください。
GADBannerView を作成する
バナー広告は GADBannerView
オブジェクトに表示されるため、バナー広告を組み込む最初のステップは、ビュー階層に GADBannerView
を含めることです。この手順は、通常 Interface Builder かプログラムで行います。
Interface Builder
GADBannerView
は、通常のビューと同様にストーリーボードか xib ファイルに追加できます。このメソッドを使用する場合は、表示する広告サイズに合わせて幅と高さの制約を追加してください。たとえば、バナー(320×50)を表示する場合は、320 ポイントの幅制約と 50 ポイントの高さ制約を使用します。
プログラムで行う場合
GADBannerView
は、直接インスタンス化することもできます。次の例では、GADBannerView
を作成し、画面のセーフエリアの下中央に合わせて配置して、バナーのサイズを 320×50 に設定する方法を示します。
Swift
import GoogleMobileAds import UIKit class ViewController: UIViewController { var bannerView: GADBannerView! override func viewDidLoad() { super.viewDidLoad() // In this case, we instantiate the banner with desired ad size. bannerView = GADBannerView(adSize: kGADAdSizeBanner) addBannerViewToView(bannerView) } func addBannerViewToView(_ bannerView: GADBannerView) { bannerView.translatesAutoresizingMaskIntoConstraints = false view.addSubview(bannerView) view.addConstraints( [NSLayoutConstraint(item: bannerView, attribute: .bottom, relatedBy: .equal, toItem: bottomLayoutGuide, attribute: .top, multiplier: 1, constant: 0), NSLayoutConstraint(item: bannerView, attribute: .centerX, relatedBy: .equal, toItem: view, attribute: .centerX, multiplier: 1, constant: 0) ]) } }
Objective-C
@import GoogleMobileAds; @interface ViewController () @property(nonatomic, strong) GADBannerView *bannerView; @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; // In this case, we instantiate the banner with desired ad size. self.bannerView = [[GADBannerView alloc] initWithAdSize:kGADAdSizeBanner]; [self addBannerViewToView:self.bannerView]; } - (void)addBannerViewToView:(UIView *)bannerView { bannerView.translatesAutoresizingMaskIntoConstraints = NO; [self.view addSubview:bannerView]; [self.view addConstraints:@[ [NSLayoutConstraint constraintWithItem:bannerView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.bottomLayoutGuide attribute:NSLayoutAttributeTop multiplier:1 constant:0], [NSLayoutConstraint constraintWithItem:bannerView attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1 constant:0] ]]; } @end
この場合、提供される広告サイズによりバナーのコンテンツ サイズが決まるため、幅や高さの制約は与えません。
定数で定義された標準サイズを使用しない場合は、GADAdSizeFromCGSize
を使用してカスタムサイズを設定できます。詳しくは、バナーサイズのセクションをご覧ください。
GADBannerView プロパティを設定する
広告を読み込んで表示するには、GADBannerView
にいくつかのプロパティを設定する必要があります。
rootViewController
- このビュー コントローラは、広告のクリック時にオーバーレイを表示するために使用されます。通常は、GADBannerView
を含むビュー コントローラに設定されます。adUnitID
-GADBannerView
が広告を読み込む先の広告ユニットの ID です。
UIViewController の viewDidLoad
メソッドで 2 つの必須プロパティを設定するコードサンプルを次に示します。
Swift
override func viewDidLoad() { super.viewDidLoad() ... bannerView.adUnitID = "ca-app-pub-3940256099942544/2934735716" bannerView.rootViewController = self }
Objective-C
- (void)viewDidLoad { [super viewDidLoad]; ... self.bannerView.adUnitID = @"ca-app-pub-3940256099942544/2934735716"; self.bannerView.rootViewController = self; }
広告を読み込む
GADBannerView
を配置してそのプロパティを設定したら、いよいよ広告を読み込みます。それには GADRequest
オブジェクトの loadRequest:
を呼び出します。
Swift
override func viewDidLoad() { super.viewDidLoad() ... bannerView.adUnitID = "ca-app-pub-3940256099942544/2934735716" bannerView.rootViewController = self bannerView.load(GADRequest()) }
Objective-C
- (void)viewDidLoad { [super viewDidLoad]; ... self.bannerView.adUnitID = @"ca-app-pub-3940256099942544/2934735716"; self.bannerView.rootViewController = self; [self.bannerView loadRequest:[GADRequest request]]; }
GADRequest オブジェクトは単一の広告リクエストを表し、ターゲティング情報などのプロパティを含みます。
広告イベント
広告が閉じられたときや、ユーザーがアプリから離れたときなどのライフサイクル イベントは、GADBannerViewDelegate
を使用してリッスンできます。
バナー広告イベントを登録する
バナー広告イベントを登録するには、GADBannerViewDelegate
プロトコルを実装しているオブジェクトに、GADBannerView
の delegate
プロパティを設定します。通常は、バナー広告を実装するクラスがデリゲート クラスとしての役割も果たすため、その場合は delegate
プロパティに self
を設定できます。
Swift
import GoogleMobileAds import UIKit class ViewController: UIViewController, GADBannerViewDelegate { var bannerView: GADBannerView! override func viewDidLoad() { super.viewDidLoad() ... bannerView.delegate = self } }
Objective-C
@import GoogleMobileAds; @interface ViewController () <GADBannerViewDelegate> @property(nonatomic, strong) GADBannerView *bannerView; @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; ... self.bannerView.delegate = self; }
バナー広告イベントを実装する
GADBannerViewDelegate
の各メソッドはオプションのため、必要なメソッドを実装すれば問題ありません。各メソッドを実装してメッセージのログをコンソールに記録する場合のサンプルを、次に示します。
Swift
/// Tells the delegate an ad request loaded an ad. func adViewDidReceiveAd(_ bannerView: GADBannerView) { print("adViewDidReceiveAd") } /// Tells the delegate an ad request failed. func adView(_ bannerView: GADBannerView, didFailToReceiveAdWithError error: GADRequestError) { print("adView:didFailToReceiveAdWithError: \(error.localizedDescription)") } /// Tells the delegate that a full-screen view will be presented in response /// to the user clicking on an ad. func adViewWillPresentScreen(_ bannerView: GADBannerView) { print("adViewWillPresentScreen") } /// Tells the delegate that the full-screen view will be dismissed. func adViewWillDismissScreen(_ bannerView: GADBannerView) { print("adViewWillDismissScreen") } /// Tells the delegate that the full-screen view has been dismissed. func adViewDidDismissScreen(_ bannerView: GADBannerView) { print("adViewDidDismissScreen") } /// Tells the delegate that a user click will open another app (such as /// the App Store), backgrounding the current app. func adViewWillLeaveApplication(_ bannerView: GADBannerView) { print("adViewWillLeaveApplication") }
Objective-C
/// Tells the delegate an ad request loaded an ad. - (void)adViewDidReceiveAd:(GADBannerView *)adView { NSLog(@"adViewDidReceiveAd"); } /// Tells the delegate an ad request failed. - (void)adView:(GADBannerView *)adView didFailToReceiveAdWithError:(GADRequestError *)error { NSLog(@"adView:didFailToReceiveAdWithError: %@", [error localizedDescription]); } /// Tells the delegate that a full-screen view will be presented in response /// to the user clicking on an ad. - (void)adViewWillPresentScreen:(GADBannerView *)adView { NSLog(@"adViewWillPresentScreen"); } /// Tells the delegate that the full-screen view will be dismissed. - (void)adViewWillDismissScreen:(GADBannerView *)adView { NSLog(@"adViewWillDismissScreen"); } /// Tells the delegate that the full-screen view has been dismissed. - (void)adViewDidDismissScreen:(GADBannerView *)adView { NSLog(@"adViewDidDismissScreen"); } /// Tells the delegate that a user click will open another app (such as /// the App Store), backgrounding the current app. - (void)adViewWillLeaveApplication:(GADBannerView *)adView { NSLog(@"adViewWillLeaveApplication"); }
iOS API デモアプリでバナー デリゲート メソッドを使用するには、広告デリゲートのサンプルをご覧ください。
ユースケース
これらの広告イベント メソッドの使用に適したケースをいくつか紹介します。
広告を取得してからバナーをビュー階層に追加する
広告が取得されるまで、ビュー階層に GADBannerView
を追加するのを遅らせたい場合は、次のように adViewDidReceiveAd:
イベントをリッスンします。
Swift
func adViewDidReceiveAd(_ bannerView: GADBannerView) { // Add banner to view and add constraints as above. addBannerViewToView(bannerView) }
Objective-C
- (void)adViewDidReceiveAd:(GADBannerView *)adView { // Add adView to view and add constraints as above. [self addBannerViewToView:self.bannerView]; }
バナー広告をアニメーション表示する
バナー広告が返されたら、adViewDidReceiveAd:
イベントを使用して、バナー広告をアニメーション表示することもできます。次にサンプルを示します。
Swift
func adViewDidReceiveAd(_ bannerView: GADBannerView) { bannerView.alpha = 0 UIView.animate(withDuration: 1, animations: { bannerView.alpha = 1 }) }
Objective-C
- (void)adViewDidReceiveAd:(GADBannerView *)adView { adView.alpha = 0; [UIView animateWithDuration:1.0 animations:^{ adView.alpha = 1; }]; }
アプリを一時停止したり再開したりする
GADBannerViewDelegate
プロトコルには、クリックによってオーバーレイを表示したり閉じたりする、または外部ブラウザを起動する、などのイベントを通知するメソッドがあります。広告が要因となってこれらのイベントが発生したことを確認するには、GADBannerViewDelegate
メソッドを登録します。
全種類のオーバーレイ表示または外部ブラウザの起動を確認するには、広告クリックで呼び出されるメソッドだけでなく、UIViewController
か UIApplication
の同等のメソッドをアプリでリッスンすることをおすすめします。以下の表には、GADBannerViewDelegate
のメソッドと同じタイミングで呼び出される、iOS の同等のメソッドが示されています。
GADBannerViewDelegate のメソッド | iOS のメソッド |
---|---|
adViewWillPresentScreen: |
UIViewController の viewWillDisappear: |
adViewWillDismissScreen: |
UIViewController の viewWillAppear: |
adViewDidDismissScreen: |
UIViewController の viewDidAppear: |
adViewWillLeaveApplication: |
UIApplicationDelegate の applicationDidEnterBackground: |
バナーのサイズ
標準のバナーサイズについては、以下の表をご覧ください。
サイズ(単位はポイント、幅×高さ) | 説明 | 対応デバイス | AdSize の定数値 |
---|---|---|---|
320×50 | バナー | スマートフォン、タブレット | kGADAdSizeBanner |
320×100 | バナー(大) | スマートフォン、タブレット | kGADAdSizeLargeBanner |
300×250 | IAB レクタングル(中) | スマートフォン、タブレット | kGADAdSizeMediumRectangle |
468×60 | IAB フルサイズ バナー | タブレット | kGADAdSizeFullBanner |
728×90 | IAB ビッグバナー | タブレット | kGADAdSizeLeaderboard |
指定された幅×最適な高さ | アダプティブ バナー | スマートフォン、タブレット | なし |
画面の幅×32|50|90 | スマートバナー | スマートフォン、タブレット | kGADAdSizeSmartBannerPortrait kGADAdSizeSmartBannerLandscape
|
今後はスマートバナーに代わってアダプティブ バナーが使用される予定です。詳しくは、アダプティブ バナーをご覧ください。 |
カスタム広告サイズ
カスタムのバナーサイズを定義するには、GADAdSizeFromCGSize
を使って希望のサイズを次のように設定します。
Swift
let adSize = GADAdSizeFromCGSize(CGSize(width: 300, height: 50))
Objective-C
GADAdSize size = GADAdSizeFromCGSize(CGSizeMake(300, 50));
その他のリソース
GitHub 上のサンプル
バナー広告の例: Swift | Objective-C
高度な機能のデモ: Swift | Objective-C
バナー UITableView の例(GitHub 上): Swift |Objective-C