Flutterの新しいAdMob SDKを試してみた

Google公式で、ネイティブのラッパーではないちゃんとしたFlutterのAdMob SDKがついにベータになったようですので動かしてみました（Android）。AdMob周りはほんとに使いづらくで困っていたので個人的にはかなり朗報です。

ほらみんな、Flutterの新しいAdMob SDKでバナーがウィジェット化したやつ動かせたぞーーーーー！！！！！！！ pic.twitter.com/AH0vhAEd9D

— だら🎄2/22～28開催Webサービス1週間開発イベ (@dala00) March 4, 2021

上記の動画のように、ラッパーライブラリでなくなったことにより（かな？）、ちゃんとスクロールに追従したり、ウィジェットの重なりにも対応するようになりました。

Flutter Engageで発表された感じでしょうか？　一緒に公開されたアナウンスに詳細は書かれています。

What’s New in Flutter 2. by Chris Sells | Mar, 2021 | Medium | Flutter | Flutter

使い方

Google Mobile Ads SDK for Flutter自体はこちらです。

https://pub.dev/packages/google_mobile_ads

以下試したログですが適当に試したので適当です。

インストール

dependencies:
  google_mobile_ads: ^0.11.0+1

AndroidManifestに広告のアプリIDを入れます。

    <meta-data android:name="com.google.android.gms.ads.APPLICATION_ID" android:value="ca-app-pub-**" />
  </application>
</manifest>

あとGradleのバージョンが3.5.0とかの低いやつだとビルド時に AAPT: error: unexpected element <queries> found in <manifest> のようなエラーになるようですのでいい感じのバージョンに上げましょう。僕は3.5.4で試しました。

    dependencies {
        classpath 'com.android.tools.build:gradle:3.5.4'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
    }

参考
https://stackoverflow.com/questions/62969917/how-to-fix-unexpected-element-queries-found-in-manifest-error

読み込み

まずは初期化します。loadを呼ばなきゃいけないのでどこかで初期化します。

class _MyHomePageState extends State<MyHomePage> {
  BannerAd myBanner;

  bool isLoaded = false;

  @override
  void initState() {
    super.initState();
    initAd();
  }

  void initAd() {
    myBanner = BannerAd(
      adUnitId: 'ca-app-pub-****',
      // size: AdSize.getSmartBanner(Orientation.landscape),
      size: AdSize.banner,
      request: AdRequest(),
      listener: AdListener(
        onAdLoaded: (Ad ad) {
          setState(() {
            isLoaded = true;
          });
        },
      ),
    )..load();
  }

スマートバナーも試そうとしましたが、取得できる広告サイズが -1 になって表示時にエラーになったのでとりあえず普通のバナーで試しました。

表示する

下記のような感じでリストの一部に入るようにしてみました。

  List<Widget> _buildChildren() {
    final children = <Widget>[];

    for (int i = 0; i < 50; i++) {
      if (i == 15) {
        children.add(isLoaded
            ? Container(
                alignment: Alignment.center,
                child: AdWidget(ad: myBanner),
                width: myBanner.size.width.toDouble(),
                height: myBanner.size.height.toDouble(),
              )
            : Container());
      } else {
        children.add(ListTile(
          title: Text(
            'test$i',
            style: TextStyle(color: Colors.black, fontSize: 18.0),
          ),
        ));
      }
    }

    return children;
  }

注意点

ページをpushする場合、同じ広告オブジェクトを使用するとエラーになります。表示するところ毎にバナーをロードした方が良いっぽいです。（ロードして表示するウィジェットを作ってそれを配置するようにしておくと良いでしょう）

あと、僕は動画生成するアプリを作っているのですが、pushしているすべてのページに広告を付けていると何故か動画が真っ白になってしまいました。試しに、pushする際に隠れるページの広告を非表示にしていくとちゃんと生成されるようになりました。謎ですがとりあえず回避方法です。

あとは広告を読み込むとコンテンツの位置がずれるので、もしかするとAdMob側から注意が来る可能性もあるかもしれません。サイズ指定の公告の場合は高さを固定するコンテナに入れておいた方が良いのかもしれません。

まとめ

とにかくFlutter直でAdMob対応してくれてるのは嬉しいですね。みなさんもどんどん使ってプルリクエストを送って安心して使えるようにしていってください！（人任せ）