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

アダプティブ バナーは次世代のレスポンシブ広告であり、デバイスごとに広告サイズを最適化して成果を最大化します。アダプティブ バナーでは、スマートバナーは固定の高さしかサポートされていませんでしたが、改良されたアダプティブ バナーでは、デベロッパーが広告の幅を指定し、それに基づいて最適な広告サイズを判断できます。

最適な広告サイズが選択されるように、アダプティブ バナーでは固定の高さではなく、固定のアスペクト比が使用されます。その結果、どのデバイスでも画面の一貫性の高い部分をバナー広告が占有するようになり、パフォーマンスが向上します。

アダプティブ バナーを使用する際は、特定のデバイスと幅において、常に同じサイズが返されることに注意してください。特定のデバイスでレイアウトをテストしたら、広告サイズが変化しないことを確認できます。ただし、バナー クリエイティブのサイズはデバイスによって異なる場合があります。そのため、広告の高さのばらつきに対応できるレイアウトにすることをおすすめします。まれに、アダプティブ サイズのフルサイズが表示されず、標準サイズのクリエイティブがこのスロットの中央に配置されることがあります。

アダプティブ バナーを使用するタイミング

アダプティブ バナーは、業界標準の 320×50 のバナーサイズおよび従来のスマートバナー フォーマットと簡単に差し替えられるように設計されています。

これらのバナーサイズは、アンカーバナーとしてよく使用され、通常は画面の上部または下部に固定されます。アダプティブ バナーのアスペクト比は、次のスクリーンショットからわかるように、標準の 320×50 の広告とほぼ同じになります。

アダプティブ バナーを使用すると、利用可能な画面サイズを最大限に活用できます。また、スマートバナーと比較すると、アダプティブ バナーは以下の点で優れています。

  • 画面の横幅いっぱいではなく、ご指定の幅で広告を表示できるため、 セーフエリアに対応できます。

  • サイズの異なるデバイスに対して一定の高さを使用するのではなく、特定のデバイスに最適な高さが選択され、デバイスの断片化の影響を軽減します。

実装上の注意

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

  • 広告を配置するビューの幅を把握しておく必要があります。デバイスの幅と、セーフエリア (該当する場合)を考慮する必要があります
  • 広告スロットに収まらない小さいサイズの広告サイズを配信する場合は、ポリシーに準拠するため、広告ビューの背景を不透明にしましょう。AdMob

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

  • アダプティブ バナーのサイズは、利用可能な幅いっぱいにした場合に最も効果を発揮するように設計されています。ほとんどの場合、この値は使用中のデバイスの画面の横幅になります。該当するセーフエリアを考慮してください。

  • Google Mobile Ads SDK は、指定された幅で最適化された広告の高さを GADAdSize

  • アダプティブ バナーの広告サイズを取得するには、横向き、縦向き、実行時の現在の向きの 3 つの方法があります。詳しくは、以下の完全な API ドキュメントをご覧ください。

  • 特定のデバイスで特定の幅に対して返されるサイズは常に同じであるため、特定のデバイスでレイアウトをテストすれば、広告サイズは変化しないことを確認できます。

  • アンカーバナーの高さは、デバイスの高さの 15% 以下、50ポイント

クイック スタート

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

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

  2. アダプティブ バナー広告のサイズを取得します。取得したサイズはアダプティブ バナーのリクエストに使用されます。アダプティブ バナーの広告サイズを取得するには、以下をご確認ください。

    1. 使用するデバイスの幅を取得します。画面の全幅を使用しない場合は独自の幅を設定します。
    2. 広告サイズクラスで適切な静的メソッド(例: GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(CGFloat width) )を使用して、選択した向きに合わせてアダプティブなGADAdSize オブジェクトを取得します。
    3. バナー広告ビューの広告サイズを設定します。これを行うには、 GADBannerViewadSize プロパティを設定します。

    以下に完全な例を示します。

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

サンプルコード

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

Swift

class ViewController: UIViewController {

  @IBOutlet weak var bannerView: GADBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()

    // Step 1 - Create a GADBannerView (in code or interface builder) and set the
    // ad unit ID on it.
    bannerView.adUnitID = "ca-app-pub-3940256099942544/2435281174"
    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(GADRequest())
  }
}

Objective-C

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];

  // Step 1 - Create a GADBannerView (in code or interface builder) and set the
  // ad unit ID on it.
  self.bannerView.adUnitID = @"ca-app-pub-3940256099942544/2435281174";
  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.
  GADRequest *request = [GADRequest request];
  [self.bannerView loadRequest:request];
}

@end

ここでは、現在の画面の向きで固定位置に表示されるバナーのサイズを取得するために、関数 GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(CGFloat width) が使用されています。特定の向きでアンカーバナーをプリロードするには、GADPortraitAnchoredAdaptiveBannerAdSizeWithWidth(CGFloat width)GADLandscapeAnchoredAdaptiveBannerAdSizeWithWidth(CGFloat width) の関連する関数を使用します。

GitHub の完全なサンプル

Swift Objective-C