アンカー アダプティブ バナー

次世代のレスポンシブ広告であるアダプティブ バナーは、デバイスごとに広告サイズを最適化して広告の効果を高めます。アダプティブ バナーはスマートバナーが改良されたもので、スマートバナーの広告の高さが固定されているのに対し、アダプティブ バナーではお客様が指定する広告の幅に応じて、自動的に最適な広告サイズが決定されます。

最適な広告サイズが選択されるように、アダプティブ バナーでは固定された高さではなく、固定されたアスペクト比が使用されます。これにより、デバイスが異なってもバナー広告は一貫して画面のほぼ同じ分量のスペースを占めることになり、広告の掲載結果の向上につながります。

アダプティブ バナーを使用する場合、特定のデバイスと幅に対しては常に一定のサイズが返されます。テスト時にデバイスで確認したレイアウトが後で変化することはありません。ただし、バナー クリエイティブのサイズはデバイスによって異なります。したがって、さまざまな広告の高さに対応できるようレイアウトを調整することをおすすめします。まれなケースとして、最適化されたサイズがスロットに収まらない場合は、標準サイズのクリエイティブがスロットの中央に配置されることもあります。

アダプティブ バナーの用途

アダプティブ バナーは、業界標準の 320×50 のバナーおよびスマートバナーとの完全互換性を備えています。

これらのサイズのバナーは一般に、画面の上部か下部に固定されるアンカーバナーとして使われます。こうしたアンカーバナーの場合、アダプティブ バナーを使ったアスペクト比は、標準型の 320×50 の広告とほぼ同様になります(以下のスクリーンショットを参照)。

アダプティブ バナーを使用すると、画面スペースをより有効に活用できます。また、スマートバナーと比較して、アダプティブ バナーには次のようなメリットがあります。

  • 画面の幅全体ではなく指定した幅を使用しているため、 セーフエリアを考慮することができます。

  • サイズの異なるデバイスに対して一定の高さを使用するのではなく、デバイスごとに最適な高さが選択されるので、デバイスの細分化の影響を最小限に抑えることができます。

実装上の注意

アプリにアダプティブ バナーを実装する際には、次の点に注意してください。

  • 広告が配置されるビューの幅を確認してください。 デバイスの幅に加えて、 セーフエリア (該当する場合)も考慮に入れる必要があります
  • アダプティブ バナーの使用にあたって、広告申込情報の更新または新規作成が必要になる場合があります。詳細
  • 広告スロットよりも小さなサイズの広告を配信する際は、広告ビューの背景を不透明にしてAd Manager ポリシーを遵守するようにしてください。

  • 使用する Google Mobile Ads SDK が最新バージョンであることを確認します。 メディエーションを利用する場合は、最新バージョンのメディエーション アダプタを使用してください。

  • アダプティブ バナーは、利用できるスペースの横幅いっぱいに表示すると最も効果を発揮するように設計されています。ほとんどの場合は、デバイスの画面の全幅を使用できます。必ず、該当するセーフエリアを考慮してください。

  • Google Mobile Ads SDK は、指定された幅に対して、AdSize で最適化された広告の高さを返します。 GADAdSize

  • アダプティブ バナーの広告サイズを取得する方法は 3 つあります。1 つは横向き用、もう 1 つは実行時の向きです。詳しくは、下記の API のドキュメントをご覧ください。

  • 同じデバイス、同じ幅に対しては常に同じ広告サイズが返されるため、一度レイアウトをテストすれば、その後の確認は不要になります。そのデバイスでは同じレイアウトが維持されます。

  • アンカーバナーの高さは、デバイスの高さの 15% 以下、50ポイント以上になります。

クイック スタート

シンプルなアダプティブ アンカー バナーを実装する手順は以下のとおりです。

  1. オブジェクトを作成し、広告ユニット ID を設定します。 a GAMBannerView

  2. アダプティブ バナーの広告サイズを取得します。取得したサイズは、アダプティブ バナーのリクエストに使用します。アダプティブ バナーの広告サイズを取得するには、次の手順を行ってください。

    1. 使用中のデバイスの幅を取得します。デバイス画面の幅全体を使用しない場合は、任意の幅を設定します。
    2. 広告サイズクラスの適切な静的メソッド( GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(CGFloat width) など)を使用して、選択した向きのアダプティブ バナーのGADAdSize を取得します。
    3. バナー広告ビューで広告サイズを設定します。GAMBannerViewadSize プロパティを設定します。

    場合によっては、アダプティブ バナーのサイズよりも小さい純広告が配信されることがあります(詳しくは、こちらのページの説明をご覧ください)。返された広告は、広告ビューの中央に表示されます。 詳細な例を以下に示します。

  3. 通常のバナー リクエストと同様に、広告リクエスト オブジェクトを作成し、用意した広告ビューのloadRequestメソッドを使用してバナーを読み込みます。

サンプルコード

次の例は、セーフエリアとビューの向きを考慮して、任意の iOS バージョンでアダプティブ バナーを読み込んで再読み込みするビュー コントローラの例です。

Swift

class ViewController: UIViewController {

  @IBOutlet weak var bannerView: GADBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()

    // Step 1 - Create a GAMBannerView (in code or interface builder) and set the
    // ad unit ID on it.
    bannerView.adUnitID = "/6499/example/banner"
    bannerView.rootViewController = self
  }

  override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    // Note loadBannerAd is called in viewDidAppear as this is the first time that
    // the safe area is known. If safe area is not a concern (e.g., your app is
    // locked in portrait mode), the banner can be loaded in viewWillAppear.
    loadBannerAd()
  }

  override func viewWillTransition(to size: CGSize,
                          with coordinator: UIViewControllerTransitionCoordinator) {
    super.viewWillTransition(to:size, with:coordinator)
    coordinator.animate(alongsideTransition: { _ in
      self.loadBannerAd()
    })
  }

  func loadBannerAd() {
    // Step 2 - Determine the view width to use for the ad width.
    let frame = { () -> CGRect in
      // Here safe area is taken into account, hence the view frame is used
      // after the view has been laid out.
      if #available(iOS 11.0, *) {
        return view.frame.inset(by: view.safeAreaInsets)
      } else {
        return view.frame
      }
    }()
    let viewWidth = frame.size.width

    // Step 3 - Get Adaptive GADAdSize and set the ad view.
    // Here the current interface orientation is used. If the ad is being preloaded
    // for a future orientation change or different orientation, the function for the
    // relevant orientation should be used.
    bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth)

    // Step 4 - Create an ad request and load the adaptive banner ad.
    bannerView.load(GAMRequest())
  }
}

Objective-C

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];

  // Step 1 - Create a GAMBannerView (in code or interface builder) and set the
  // ad unit ID on it.
  self.bannerView.adUnitID = @"/6499/example/banner";
  self.bannerView.rootViewController = self;
}

- (void)viewDidAppear:(BOOL)animated {
  [super viewDidAppear:animated];
  // Note loadBannerAd is called in viewDidAppear as this is the first time that
  // the safe area is known. If safe area is not a concern (e.g., your app is
  // locked in portrait mode), the banner can be loaded in viewWillAppear.
  [self loadBannerAd];
}

- (void)viewWillTransitionToSize:(CGSize)size
    withTransitionCoordinator:(id)coordinator {
  [super viewWillTransitionToSize:size withTransitionCoordinator:coordinator];
  [coordinator animateAlongsideTransition:^(id
      _Nonnull context) {
        [self loadBannerAd];
  } completion:nil];
}

- (void)loadBannerAd {
  // Step 2 - Determine the view width to use for the ad width.
  CGRect frame = self.view.frame;
  // Here safe area is taken into account, hence the view frame is used after
  // the view has been laid out.
  if (@available(iOS 11.0, *)) {
    frame = UIEdgeInsetsInsetRect(self.view.frame, self.view.safeAreaInsets);
  }
  CGFloat viewWidth = frame.size.width;

  // Step 3 - Get Adaptive GADAdSize and set the ad view.
  // Here the current interface orientation is used. If the ad is being
  // preloaded for a future orientation change or different orientation, the
  // function for the relevant orientation should be used.
  self.bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth);

  // Step 4 - Create an ad request and load the adaptive banner ad.
  GAMRequest *request = [GAMRequest request];
  [self.bannerView loadRequest:request];
}

@end

ここでは、GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(CGFloat width) 関数を使用して、現在の画面の向きの固定位置でのバナーサイズを取得しています。特定の向きのバナーをプリロードするには、GADPortraitAnchoredAdaptiveBannerAdSizeWithWidth(CGFloat width) および GADLandscapeAnchoredAdaptiveBannerAdSizeWithWidth(CGFloat width) の適切な関数を使用してください。

GitHub のサンプルコードの全文

Swift Objective-C