バナー広告

スタートガイドでは、SDK を使用してテスト用のバナー広告を表示する方法を説明しました。このガイドでは、バナー広告の高度なカスタマイズ機能について説明します。

バナー広告のカスタマイズ機能の実装について確認するには、Objective-C や Swift の iOS API デモアプリをダウンロードしてください。

API デモをダウンロードする

Google Mobile Ads は以下のバナーサイズに対応しています。

サイズ(幅×高さ) 説明 対応 広告サイズの定数値
320×50 標準のバナー スマートフォン、タブレット kGADAdSizeBanner
320×100 バナー(大) スマートフォン、タブレット kGADAdSizeLargeBanner
300×250 IAB レクタングル(中) スマートフォン、タブレット kGADAdSizeMediumRectangle
468×60 IAB フルサイズ バナー タブレット kGADAdSizeFullBanner
728×90 IAB ビッグバナー タブレット kGADAdSizeLeaderboard
画面の幅×32|50|90 スマートバナー スマートフォン、タブレット kGADAdSizeSmartBannerPortrait
kGADAdSizeSmartBannerLandscape

スマートバナー

スマートバナーは、あらゆる画面サイズの端末で、画面をどの向きにしていても横幅いっぱいに広告を表示できる広告ユニットです。端末の向きに合わせて画面の横幅を認識し、広告をそのサイズに合わせて表示することで、端末の画面サイズの細分化が進んでも対応できます。

スマートバナーで表示される広告の高さは、次の 3 つのいずれかになります。単位は、dp(密度非依存ピクセル)です。

  • 32: 端末の画面の高さが 400 以下
  • 50: 端末の画面の高さが 400 より大きく 720 以下
  • 90: 端末の画面の高さが 720 より大きい

スマートフォンなど一部の端末では、向きによって画面の高さが変わります。通常の場合、スマートフォンでは縦向きが全幅×50dp、横向きが全幅×32dp となります。タブレットではどちらの向きでも全幅×90dp です。

スペース全体にイメージ広告を表示しようとすると余白ができる場合は、画像が中央に配置され、両側のスペースは塗りつぶされます。

スマートバナーを使用するには、定数値 kGADAdSizeSmartBannerPortrait または kGADAdSizeSmartBannerLandscape を次のように使用します。

Objective-C

// Use kGADAdSizeSmartBannerLandscape if your app is running in landscape.
DFPBannerView *bannerView = [[DFPBannerView alloc] initWithAdSize:kGADAdSizeSmartBannerPortrait];

Swift

// Use kGADAdSizeSmartBannerLandscape if your app is running in landscape.
let bannerView = DFPBannerView(adSize: kGADAdSizeSmartBannerPortrait)

カスタム広告ユニット

DoubleClick For Publishers(DFP)では、標準の AdMob 広告ユニットに加えて、任意のサイズの広告ユニットをアプリ内に表示できます。広告リクエストで定義する広告サイズ(幅、高さ)は、アプリに表示される広告ビュー(DFPBannerView)のサイズと一致している必要があります。

Objective-C

// Define custom GADAdSize of 250x250 for DFPBannerView
GADAdSize customAdSize = GADAdSizeFromCGSize(CGSizeMake(250, 250));
self.bannerView = [[DFPBannerView alloc] initWithAdSize:customAdSize];

Swift

// Define custom GADAdSize of 250x250 for DFPBannerView.
let customAdSize = GADAdSizeFromCGSize(CGSize(width: 250, height: 250))
bannerView = DFPBannerView(adSize: customAdSize)

カスタム広告ユニットを iOS API デモアプリで実装するには、DFP で複数の広告サイズに対応する例をご覧ください。

Objective-C Swift

複数の広告サイズ

DFP では、DFPBannerView に表示する広告サイズを複数指定できます。この機能を使用するためのステップは、次の 3 つです。

  1. DFP の管理画面で、広告ユニットを対象とする広告申込情報を作成し、サイズが異なる複数のクリエイティブに関連付けます。

  2. アプリで、DFPBannerViewvalidAdSizes プロパティを次のように設定します。

    Objective-C

    // Define an optional array of GADAdSize to specify all valid sizes that are appropriate
    // for this slot. Never create your own GADAdSize directly. Use one of the
    // predefined standard ad sizes (such as kGADAdSizeBanner), or create one using
    // the GADAdSizeFromCGSize method.
    //
    // Note: Ensure that the allocated DFPBannerView is defined with an ad size. Also note
    // that all desired sizes should be included in the validAdSizes array.
    self.bannerView.validAdSizes = @[
        NSValueFromGADAdSize(kGADAdSizeBanner),
        NSValueFromGADAdSize(kGADAdSizeMediumRectangle),
        NSValueFromGADAdSize(GADAdSizeFromCGSize(CGSizeMake(120, 20)))
    ];
    

    Swift

    // Define an optional array of GADAdSize to specify all valid sizes that are appropriate
    // for this slot. Never create your own GADAdSize directly. Use one of the
    // predefined standard ad sizes (such as kGADAdSizeBanner), or create one using
    // the GADAdSizeFromCGSize method.
    //
    // Note: Ensure that the allocated DFPBannerView is defined with an ad size. Also note
    // that all desired sizes should be included in the validAdSizes array.
    bannerView.validAdSizes = [NSValueFromGADAdSize(kGADAdSizeBanner),
        NSValueFromGADAdSize(kGADAdSizeMediumRectangle),
        NSValueFromGADAdSize(GADAdSizeFromCGSize(CGSize(width: 120, height: 20)))]
    

  3. 広告サイズの変化を検出するために、GADAdSizeDelegate メソッドを実装します。

    Objective-C

    - (void)adView:(DFPBannerView *)view willChangeAdSizeTo:(GADAdSize)size;
    

    Swift

    public func adView(bannerView: DFPBannerView!, willChangeAdSizeTo size: GADAdSize)
    

    広告のリクエストの前にデリゲートを設定します。

    Objective-C

    self.bannerView.adSizeDelegate = self;

    Swift

    bannerView.adSizeDelegate = self

カスタム広告ユニットを iOS API デモアプリで実装するには、DFP で複数の広告サイズに対応する例をご覧ください。

Objective-C Swift

インプレッションの手動カウント

インプレッションの記録について特別な条件がある場合は、インプレッションの ping を DFP に手動で送信できます。手動でカウントするには、広告を読み込む前に、DFPBannerView で手動インプレッションを有効にします。

Objective-C

self.bannerView.enableManualImpressions = YES;

Swift

bannerView.enableManualImpressions = true

広告が正常に返され、画面に表示されていることを確認したら、インプレッションを手動でカウントします。

Objective-C

[self.bannerView recordImpression];

Swift

bannerView.recordImpression()

アプリ内イベント

アプリ内イベントを利用することで、アプリのコードにメッセージを送信する広告を作成できます。アプリは、送信されたメッセージに基づいて、処理を行います。

DFP のアプリ内イベントをリッスンするには、GADAppEventDelegate を使用します。DFP のアプリ内イベントは、GADBannerViewDelegateadViewDidReceiveAd: が呼び出される前でも、広告ライフサイクルの途中で発生する場合があります。

Objective-C

// Implement your app event within these methods. The delegate will be
// notified when the SDK receives an app event message from the ad.

@optional
// Called when the banner receives an app event.
- (void)adView:(DFPBannerView *)banner
    didReceiveAppEvent:(NSString *)name
              withInfo:(NSString *)info;
// Called when the interstitial receives an app event.
- (void)interstitial:(DFPInterstitial *)interstitial
    didReceiveAppEvent:(NSString *)name
              withInfo:(NSString *)info;

Swift

// Implement your app event within these methods. The delegate will be
// notified when the SDK receives an app event message from the ad.

// Called when the banner receives an app event.
optional public func adView(banner: GADBannerView!,
    didReceiveAppEvent name: String!, withInfo info: String!)

// Called when the interstitial receives an app event.
optional public func interstitial(interstitial: GADInterstitial!,
    didReceiveAppEvent name: String!, withInfo info: String!)

アプリ内イベントに対するメソッドは、ビュー コントローラ内に実装します。

Objective-C

@import GoogleMobileAds;

@interface ViewController : UIViewController  {
}

@end

Swift

import GoogleMobileAds

class ViewController: UIViewController, GADAppEventDelegate {
}

広告のリクエストを行う前に、appEventDelegate プロパティを使用してデリゲートを設定します。

Objective-C

self.bannerView.appEventDelegate = self;

Swift

bannerView.appEventDelegate = self

アプリ内イベントに応じてアプリの背景色が指定した色に変わるようにする方法は次のとおりです。

Objective-C

- (void)adView:(DFPBannerView *)banner
    didReceiveAppEvent:(NSString *)name
              withInfo:(NSString *)info {
  if ([name isEqual:@"color"]) {
    if ([info isEqual:@"green"]) {
      // Set background color to green.
      self.view.backgroundColor = [UIColor greenColor];
    } else if ([info isEqual:@"blue"]) {
      // Set background color to blue.
      self.view.backgroundColor = [UIColor blueColor];
    } else
      // Set background color to black.
      self.view.backgroundColor = [UIColor blackColor];
    }
  }
}

Swift

func adView(banner: GADBannerView!, didReceiveAppEvent name: String!,
    withInfo info: String!) {
  if name == "color" {
    switch info {
    case "green":
      // Set background color to green.
      view.backgroundColor = UIColor.greenColor()
    case "blue":
      // Set background color to blue.
      view.backgroundColor = UIColor.blueColor()
    default:
      // Set background color to black.
      view.backgroundColor = UIColor.blackColor()
    }
  }
}

また、対応するクリエイティブは次のとおりです。これは、色に関するアプリ内イベント メッセージを appEventDelegate に送信します。

<html>
<head>
  <script src="//media.admob.com/api/v1/google_mobile_app_ads.js"></script>
  <script>
    // Send a color=green event when ad loads.
    admob.events.dispatchAppEvent("color", "green");

    handleClick = function() {
      // Send a color=blue event when ad is clicked.
      admob.events.dispatchAppEvent("color", "blue");
    };
  </script>
  <style>
    #ad {
      width: 320px;
      height: 50px;
      top: 0px;
      left: 0px;
      font-size: 24pt;
      font-weight: bold;
      position: absolute;
      background: black;
      color: white;
      text-align: center;
    }
  </style>
</head>
<body>
  <div id="ad" onClick="handleClick()">Carpe diem!</div>
</body>
</html>

iOS API デモアプリでアプリ内イベントを利用するには、DFP でアプリ内イベントに対応する例をご覧ください。

Objective-C Swift

広告のライフサイクル イベントのコールバック

広告のライフサイクル イベント(リクエストの失敗やクリックスルーなど)をトラッキングするには、GADBannerViewDelegate の全体やその一部を実装します。

Objective-C

@protocol GADBannerViewDelegate 
@optional
- (void)adViewDidReceiveAd:(DFPBannerView *)bannerView;
- (void)adView:(DFPBannerView *)bannerView
    didFailToReceiveAdWithError:(GADRequestError *)error;
- (void)adViewWillPresentScreen:(DFPBannerView *)bannerView;
- (void)adViewDidDismissScreen:(DFPBannerView *)bannerView;
- (void)adViewWillDismissScreen:(DFPBannerView *)bannerView;
- (void)adViewWillLeaveApplication:(DFPBannerView *)bannerView;
@end

Swift

public protocol GADBannerViewDelegate: NSObjectProtocol {
  optional public func adViewDidReceiveAd(bannerView: GADBannerView!)
  optional public func adView(bannerView: GADBannerView!,
      didFailToReceiveAdWithError error: GADRequestError!)
  optional public func adViewWillPresentScreen(bannerView: GADBannerView!)
  optional public func adViewWillDismissScreen(bannerView: GADBannerView!)
  optional public func adViewDidDismissScreen(bannerView: GADBannerView!)
  optional public func adViewWillLeaveApplication(bannerView: GADBannerView!)
}

これらのメソッドは、次のようにビュー コントローラなどの個別のオブジェクトに実装できます。

Objective-C

@import GoogleMobileAds;

@interface ViewController : UIViewController  {
}

@end

Swift

import GoogleMobileAds

class ViewController: UIViewController, GADBannerViewDelegate {
}

また、次のように DFPBannerView サブクラスの一部としても実装できます。

Objective-C

@import GoogleMobileAds;

@interface MyBannerView : DFPBannerView  {
}

@end

Swift

import GoogleMobileAds

class MyBannerView: DFPBannerView, GADBannerViewDelegate {
}

広告のリクエストの前にデリゲートを設定します。

Objective-C

self.bannerView.delegate = self;

Swift

bannerView.delegate = self

adViewDidReceiveAd:

loadRequest: が成功した場合に送信されます。センダーがまだ表示されていない場合は、この時点で次のようにビュー階層に追加できます。

Objective-C

- (void)adViewDidReceiveAd:(DFPBannerView *)bannerView {
  bannerView.hidden = NO;
}

Swift

func adViewDidReceiveAd(bannerView: DFPBannerView!) {
  bannerView.hidden = false
}

adView:didFailToReceiveAdWithError:

loadRequest: が失敗した場合に送信されます。通常はネットワーク障害、アプリの設定エラー、広告枠の不足が原因です。原因を記録しておけば、デバッグの役に立ちます。

Objective-C

- (void)adView:(DFPBannerView *)adView
    didFailToReceiveAdWithError:(GADRequestError *)error {
  NSLog(@"adView:didFailToReceiveAdWithError: %@", error.localizedDescription);
}

Swift

func adView(bannerView: DFPBannerView!,
    didFailToReceiveAdWithError error: GADRequestError!) {
  print("adView:didFailToReceiveAdWithError: \(error.localizedDescription)")
}

adViewWillPresentScreen:

センダーをタップする操作に応じて、広告 UI がフルスクリーンでユーザーに表示される直前に送信されます。この時点で、UIApplicationDidEnterBackgroundNotification の場合と同じように、アニメーションやタイマーなどのユーザー操作が想定されるすべての処理を一時停止し、アプリの状態を保存します。通常はユーザーがフルスクリーン広告を閲覧して終了すると、adViewDidDismissScreen: が生成されてコントロールがアプリに戻ります。ただし、バナーの操作が Click-to-App-Store か Click-to-iTunes である場合や、ユーザーが広告の表示中にホームボタンを押した場合、アプリはバックグラウンドに切り替わり、終了する可能性があります。

このような場合、iOS 4.0 以降ではルート ビュー コントローラの applicationWillResignActive: が次に呼び出され、続いて adViewWillLeaveApplication: が呼び出されます。

adViewDidDismissScreen:

ユーザーがフルスクリーン表示のセンダーの UI を終了すると送信されます。

adViewWillDismissScreen:

フルスクリーン表示のセンダーの UI が終了し、アプリとルート ビュー コントローラが復元される直前に送信されます。この時点で、adViewWillPresentScreen: で一時停止していたフォアグラウンド処理が再開されます。

adViewWillLeaveApplication:

Click-to-App-Store バナーや Click-to-iTunes バナーがタップされて、アプリがバックグラウンドに切り替わるか、終了する直前に送信されます。applicationDidEnterBackground: など通常の UIApplicationDelegate 通知はこの直前に届きます。

applicationWillEnterForeground: では広告をリクエストしないでください。リクエストしても無視されます。代わりに、applicationDidBecomeActive: にリクエストを配置してください。

Objective-C デリゲートは保持されず、オブジェクトのデリゲートが最終的に割り当て解除される前に非同期でメッセージ化されます。

iOS API デモアプリでライフサイクル イベントのコールバックを使用するには、広告デリゲートの例をご覧ください。

Objective-C Swift

次のステップ

フィードバックを送信...

ご不明な点がありましたら、Google のサポートページをご覧ください。