アダプティブ バナー

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

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

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

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

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

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

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

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

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

実装に関する注意事項

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

  • 使用する 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) の適切な関数を使用してください。