このページは Cloud Translation API によって翻訳されました。

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

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

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

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

前提条件

スタートガイドの手順に沿って、Mobile Ads Flutter プラグインをインポートする

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

アダプティブバナーは、業界標準の 320×50 のバナーサイズと、それより優先されるスマートバナーフォーマットの両方を置き換えることができるように設計されています。

これらのバナーサイズは、アンカーバナーとしてよく使用され、通常は画面の上部または下部に固定されます。

このようなアンカー型バナーのアダプティブバナーのアスペクト比は、標準の 320×50 の広告のアスペクト比とほぼ同じになります。下の 3 つの例をご覧ください。

320×50 のバナー

アダプティブバナー

スマートバナー

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

幅を強制的に全画面表示にするのではなく、指定した任意の幅を使用するため、iOS ではセーフエリア、Android ではディスプレイカットアウトを考慮できます。
サイズの異なるデバイスに対して一定の高さを使用するのではなく、特定のデバイスに最適な高さが選択され、デバイスの断片化の影響が軽減されます。

実装上の注意

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

広告を配置するビューの幅を把握しておく必要があります。デバイスの幅に加え、セーフエリアやカットアウトも考慮する必要があります。
アダプティブバナーのサイズを使用する場合は、広告申込情報の更新または新規作成が必要になることがあります。詳細
広告スロットを埋めない小さいサイズの広告サイズを配信する場合は、AdMob ポリシーに準拠するため、広告ビューの背景が不透明なものになるようにしてください。
Google Mobile Ads Flutter プラグインの最新バージョンを使用していることを確認します。
アダプティブバナーのサイズは、利用可能な幅いっぱいにした場合に最も効果を発揮するように設計されています。ほとんどの場合、この値は使用中のデバイスの画面の横幅になります。該当する場合は、セーフエリアを考慮するようにしてください。
アダプティブ AdSize API を使用する場合、Google Mobile Ads SDK は指定された幅に対して、最適化された広告の高さでバナーのサイズを調整します。
アダプティブバナーの広告サイズを取得するには 2 つの方法があります。AdSize.getAnchoredAdaptiveBannerAdSize(Orientation orientation, int width)（特定の向きをリクエストする場合）と AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(int width)（実行時の現在の向きを取得する場合）です。
特定のデバイスで特定の幅に対して返されるサイズは常に同じであるため、特定のデバイスでレイアウトをテストすれば、広告サイズは変化しないことを確認できます。
アンカーバナーの高さは、デバイスの高さの 15% または密度非依存ピクセル 90 ピクセルのうち、小さい方以下、50 ピクセル以上である必要があります。

クイックスタート

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

アダプティブバナー広告のサイズを取得します。取得したサイズはアダプティブバナーのリクエストに使用されます。アダプティブバナーの広告サイズを取得するには、以下をご確認ください。
1. 使用されるデバイスの幅を密度非依存ピクセルで取得します。画面の全幅を使用しない場合は独自の幅を設定します。MediaQuery.of(context) を使用して画面の幅を取得できます。
2. 現在の向きに対してアダプティブな AdSize オブジェクトを取得するには、広告サイズクラスの適切な静的メソッド（AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(int width) など）を使用します。
広告ユニット ID、アダプティブ広告サイズ、広告リクエストオブジェクトを指定した AdManagerBannerAd オブジェクトを作成します。
通常のバナー広告の場合と同じように広告を読み込み、通常の広告ビューの場合と同様に AdWidget から表示します。

サンプルコード

画面の幅に合わせてアンカーアダプティブバナーを読み込むウィジェットの例を次に示します。

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';

/// This example demonstrates anchored adaptive banner ads.
class AnchoredAdaptiveExample extends StatefulWidget {
  @override
  _AnchoredAdaptiveExampleState createState() =>
      _AnchoredAdaptiveExampleState();
}

class _AnchoredAdaptiveExampleState extends State<AnchoredAdaptiveExample> {
  AdManagerBannerAd? _anchoredAdaptiveAd;
  bool _isLoaded = false;

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    _loadAd();
  }

  Future<void> _loadAd() async {
    // Get an AnchoredAdaptiveBannerAdSize before loading the ad.
    final AnchoredAdaptiveBannerAdSize? size =
        await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
            MediaQuery.of(context).size.width.truncate());

    if (size == null) {
      print('Unable to get height of anchored banner.');
      return;
    }

    _anchoredAdaptiveAd = AdManagerBannerAd(
      // TODO: replace with your own ad unit.
      adUnitId: '<your-ad-unit>',
      sizes: [size],
      request: AdManagerAdRequest(),
      listener: AdManagerBannerAdListener(
        onAdLoaded: (Ad ad) {
          print('$ad loaded: ${ad.responseInfo}');
          setState(() {
            // When the ad is loaded, get the ad size and use it to set
            // the height of the ad container.
            _anchoredAdaptiveAd = ad as AdManagerBannerAd;
            _isLoaded = true;
          });
        },
        onAdFailedToLoad: (Ad ad, LoadAdError error) {
          print('Anchored adaptive banner failedToLoad: $error');
          ad.dispose();
        },
      ),
    );
    return _anchoredAdaptiveAd!.load();
  }

  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          title: Text('Anchored adaptive banner example'),
        ),
        body: Center(
          child: Stack(
            alignment: AlignmentDirectional.bottomCenter,
            children: <Widget>[
              ListView.separated(
                  padding: const EdgeInsets.symmetric(horizontal: 16.0),
                  itemBuilder: (context, index) {
                    return Text(
                      'Placeholder text',
                      style: TextStyle(fontSize: 24),
                    );
                  },
                  separatorBuilder: (context, index) {
                    return Container(height: 40);
                  },
                  itemCount: 20),
              if (_anchoredAdaptiveAd != null && _isLoaded)
                Container(
                  color: Colors.green,
                  width: _anchoredAdaptiveAd!.size.width.toDouble(),
                  height: _anchoredAdaptiveAd!.size.height.toDouble(),
                  child: AdWidget(ad: _anchoredAdaptiveAd!),
                )
            ],
          ),
        ),
      );

  @override
  void dispose() {
    super.dispose();
    _anchoredAdaptiveAd?.dispose();
  }
}

ここでは、関数 AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize を使って、現在の画面の向きでアンカー位置のバナーのサイズを取得しています。特定の向きでアンカーバナーをプリロードするには、AdSize.getAnchoredAdaptiveBannerAdSize(Orientation orientation, int width) を使用して目的の向きを渡します。

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